@extends('template.template')
@section('contents')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    thead th {
      position: sticky;
      top: 0;
      background: white;
      z-index: 2;
    }

    tbody {
      display: block;
      height: 350px; /* Atur tinggi tbody */
      overflow-y: auto; /* Biar scroll */
    }

    thead, tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Transaksi</div>
                <form id='formkode'>
                    <div class="form-group">
                        <label for="company" class=" form-control-label">Kode</label>
                        <input type="text" id="test" class="form-control" name="test">
                    </div>
                </form>
                    <div class="table-responsive table-data">
                        <table class="table" id="cart">
                            <thead style="position: sticky; top: 0; background-color: white; z-index: 10;">
                                <tr>
                                    <td>Nama</td>
                                    <td>Harga</td>
                                    <td>Jumlah</td>
                                    <td>Total</td>
                                    <td>Action</td>
                                </tr>
                            </thead>
                            <tbody>
                               @if (session()->has('DataCart'))
                                    @foreach (session()->get('DataCart') as $key=> $datacart )
                                        <tr>
                                            <td>{{$datacart['NamaBarang']}}</td>
                                            <td>{{$datacart['Harga']}}</td>
                                            <td>{{$datacart['Jumlah']}}</td>
                                            <td>{{$datacart['TotalPrice']}}</td>
                                            <td>
                                                <a href="{{url('/admin/DeleteBarangCart/'.$key)}}"><button class="btn btn-danger btn-sm">Delete</button></a>
                                            </td>
                                        </tr>
                                    @endforeach
                               @endif
                            </tbody>
                        </table>
                        @php
                            $grandtot = 0;
                            if(session()->has('DataCart')){
                                $data = session()->get('DataCart');
                                foreach ($data as $key => $value) {
                                    $grandtot += $value['TotalPrice'];
                                }
                            }
                        @endphp
                        <span>Rp.{{$grandtot}},--</span>

                    </div>
                    <form action="" id="formnotelp">
                        <div class="form-group">
                            <input type="text" id="notelp" class="form-control" name="notelp" placeholder="No Telp">
                        </div>
                        <button class="btn btn-primary" id="printNota">Cetak</button>
                    </form>
            </div>
        </div>
    </div>
</div>
@endsection
@push('ScannerBarcode')
<script>
    function updatettabel(){
        //alert('asndiansd')
        $("#cart tbody").html("");
        $.ajax({
            url: '/admin/ambildata',
            type: 'GET',
            dataType: 'json',
            success: function(response) {
                console.log("Server Response:", response);
                if (response.success) {
                    //alert(JSON.stringify(response.data));
                    var temp = response.data;
                    if(temp.length == 0){
                        $("#cart tbody").html(`
                            <tr>
                                <td>Tidak ada data</td>
                            </tr>
                        `);
                    }
                    else{
                        temp.forEach(element => {
                            $("#cart tbody").append(`
                                <tr>
                                    <td>${element.NamaBarang}</td>
                                    <td>${element.Harga}</td>
                                    <td>${element.Qty}</td>
                                    <td>${element.TotalHarga}</td>
                                </tr>
                            `);
                        });
                    }
                } else {
                    alert(response.message || "Terjadi kesalahan!");
                }
            },
            error: function(xhr) {
                console.error("AJAX Error:", xhr.responseText);
                    alert("Terjadi kesalahan dalam komunikasi dengan server!");
            }
        })
    }

</script>
<script>
    $(document).ready(function(){
        $("#Jumlah").change(function(){
            var test1 = parseInt($('#Harga').val());
            var test2 = parseInt($('#Jumlah').val());
            var tot = test1*test2;
            document.getElementById("total").innerHTML = "Rp."+tot+",--"
            document.getElementById("Total").value = tot;
        });
    });
</script>
<script>
    // $('#formkode').submit(function(e){
    //     $.ajax({
    //         url:'/admin/Cekkodes',
    //         type: 'POST',
    //         data:$(this).serialize(),
    //         headers: {
    //             'X-CSRF-TOKEN': '{{ csrf_token() }}' // Jangan lupa CSRF token!
    //         },
    //         success: function (response) {
    //                     if (response.message === 'success') {
    //                         alert(response.message);
    //                     } else {
    //                         alert("Error: " + response.message);
    //                     }
    //                 }
    //     })
    // })\
    var barcode = '';
    var timeout;
            document.addEventListener('keydown', function(evt) {
                // evt.preventDefault();
                if (timeout)
                    clearTimeout(timeout);
                if (evt.code == 'Enter') {
                    if (barcode)handleBarcode(barcode);
                    barcode = '';
                    return;
                }
                if (evt.key != 'Shift')
                    barcode += evt.key;
                timeout = setTimeout(() => barcode = '', 100);
            });

            function handleBarcode(scanned_barcode) {
                //document.querySelector('#KodeBarang').value = scanned_barcode;
                $.ajax({
                    url: '/admin/CekKode/'+scanned_barcode,
                    type: 'GET',
                    dataType:'json',
                    success: function(res){
                        //alert(res.data)
                        updatettabel();
                    },
                    // error:function(xhr){
                    //     console.error(xhr.responseText)
                    // }
                })
            }
</script>
<script>
    $(document).ready(function (){
        //const dataToPrint = "Nama Barang: Laravel\nHarga: Rp 100,000\nJumlah: 1\nTotal: Rp 100,000";
        $('#printNota').click(function(){
            // alert('aaaaa')
            $.ajax({
                url:"{{url('/admin/Print')}}",
                method:'POST',
                //data:{data:dataToPrint,'_token':"{{csrf_token()}}"},
                //data:dataToPrint,
                headers: {
                    'Content-Type': 'application/json',
                    //'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-CSRF-TOKEN':  $('meta[name="csrf-token"]').attr('content'),
                },
                success: function (response) {
                        if (response.message === 'success') {
                            alert(response.message);
                        } else {
                            alert("Error: " + response.message);
                        }
                    },
                    error: function (xhr) {
                        alert("Terjadi kesalahan: " + xhr.responseText);
                    }
            });
        });
    });
</script>
@endpush
{{-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    table {
      border-collapse: collapse;
      width: 100%;
    }

    thead th {
      position: sticky;
      top: 0;
      background: white;
      z-index: 2;
    }

    tbody {
      display: block;
      height: 350px; /* Atur tinggi tbody */
      overflow-y: auto; /* Biar scroll */
    }

    thead, tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
<div class="container-fluid">
    <div class="row">
        {{-- <div class="col-md-12">
            <div class="card">
                <div class="card-header">Transaksi</div>
                <div class="card-body">
                    <form action="{{url('/admin/CekKode')}}" method="post">
                        @csrf
                        <div class="form-group">
                            <label for="company" class=" form-control-label">Kode</label>
                            <input type="text" id="KodeBarang" class="form-control" name="KodeBarang">
                        </div>
                    </form>
                    <hr>
                    @if (session()->has('DetailBarang'))
                        <form action="{{url('/admin/Cart')}}" method="post">
                            @php
                                $databarang = session()->get('DetailBarang');
                            @endphp
                            @csrf
                            <div class="form-group">
                                <label for="company" class=" form-control-label">Nama</label>
                                <input type="text" id="KodeBarang" class="form-control" name="NamaBarang" value="{{$databarang[0]->Nama}}">
                                <input type="hidden" name="Kode" value="{{$databarang[0]->kode}}">
                            </div>
                            <div class="form-group">
                                <label for="company" class=" form-control-label">Harga</label>
                                <input type="number" id="Harga" class="form-control" name="Harga" value="{{$databarang[0]->Harga}}">
                            </div>
                            <div class="form-group">
                                <label for="company" class=" form-control-label">Jumlah</label>
                                <input type="number" id="Jumlah" class="form-control" name="Jumlah" value="0">
                            </div>
                            <span id="total">Rp.0,--</span>
                            <input type="hidden" id="Total" name="Total">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fa fa-dot-circle-o"></i> Submit
                            </button>
                        </form>
                    @else
                    <form action="{{url('/admin/Cart')}}" method="post">
                        <div class="form-group">
                            <label for="company" class=" form-control-label">Nama</label>
                            <input type="text" id="KodeBarang" class="form-control" name="NamaBarang">
                        </div>
                        <div class="form-group">
                            <label for="company" class=" form-control-label">Harga</label>
                            <input type="number" id="Harga" class="form-control" name="Harga">
                        </div>
                        <div class="form-group">
                            <label for="company" class=" form-control-label">Jumlah</label>
                            <input type="number" id="Jumlah" class="form-control" name="Jumlah" value="0">
                        </div>
                        <span id="total">Rp.0,--</span>
                    </form>
                    @endif
                </div>
            </div>
        </div> --}}
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Transaksi</div>
                    {{-- <form action="{{url('/admin/CekKode')}}" method="post"> --}}
                    <form id='formkode'>
                        {{-- @csrf --}}
                        <div class="form-group">
                            <label for="company" class=" form-control-label">Kode</label>
                            <input type="text" id="test" class="form-control" name="test">
                            {{-- <input type="text" id="test" name="test" class="form-control"> --}}
                        </div>
                        <button class="btn btn-primary">Cetak</button>
                    </form>
                <div class="card-body">
                    <div class="table-responsive table-data">
                            {{-- <a href="{{url('/admin/ambildata')}}">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fa fa-dot-circle-o"></i> Submit
                                </button>
                            </a> --}}
                        <table class="table" id="cart">
                            <thead style="position: sticky; top: 0; background-color: white; z-index: 10;">
                                <tr>
                                    <td>Nama</td>
                                    <td>Harga</td>
                                    <td>Jumlah</td>
                                    <td>Total</td>
                                    <td>Action</td>
                                </tr>
                            </thead>
                            <tbody>
                               @if (session()->has('DataCart'))
                                    @foreach (session()->get('DataCart') as $key=> $datacart )
                                        <tr>
                                            <td>{{$datacart['NamaBarang']}}</td>
                                            <td>{{$datacart['Harga']}}</td>
                                            <td>{{$datacart['Jumlah']}}</td>
                                            <td>{{$datacart['TotalPrice']}}</td>
                                            <td>
                                                <a href="{{url('/admin/DeleteBarangCart/'.$key)}}"><button class="btn btn-danger btn-sm">Delete</button></a>
                                            </td>
                                        </tr>
                                    @endforeach
                               @endif
                            </tbody>
                        </table>
                        @php
                            $grandtot = 0;
                            if(session()->has('DataCart')){
                                $data = session()->get('DataCart');
                                foreach ($data as $key => $value) {
                                    $grandtot += $value['TotalPrice'];
                                }
                            }
                        @endphp
                        <span>Rp.{{$grandtot}},--</span>
                    </div>
                    <form action="" id="formnotelp">
                        <div class="form-group">
                            <input type="text" id="notelp" class="form-control" name="notelp" placeholder="No Telp">
                        </div>
                        <button class="btn btn-primary" id="printNota">Cetak</button>
                    </form>
                    {{-- <a href="{{url('/admin/Print')}}"><button class="btn btn-primary">Cetak2</button></a> --}}
                </div>
            </div>
        </div>
    </div>
</div>