@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: 310px; /* 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" style="display: flex; align-items: center;">
                        <input type="text" id="barcode" class="form-control" name="barcode" placeholder="Kode" >
                        <button class="btn btn-primary">Submit</button>
                    </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('cart'))
                                    @foreach (session()->get('cart') as $key=> $datacart )
                                        <tr>
                                            <td>{{$datacart['NamaBarang']}}</td>
                                            <td>Rp {{number_format($datacart['Harga'],2,',','.')}}</td>
                                            <td>{{$datacart['Qty']}}</td>
                                            <td>Rp {{number_format($datacart['TotalHarga'],2,',','.')}}</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;
                            //setlocale(LC_MONETERY,"")
                            if(session()->has('cart')){
                                $data = session()->get('cart');
                                foreach ($data as $key => $value) {
                                    $grandtot += $value['TotalHarga'];
                                }
                            }
                        @endphp
                        <span>Rp {{number_format($grandtot,2,',','.')}}</span>

                    </div>
                    <form action="{{url('/admin/Print')}}" id="formnotelp" method="POST">
                        @csrf
                        <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: '{{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:'{{url("/admin/Cekkodes")}}',
            type: 'POST',
            //data:{barcode:$(this).serialize()},
            data:$(this).serialize(),
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}' // Jangan lupa CSRF token!
            },
            success: function(response) {
                //alert('Sukses: ' + response.message);
                updatettabel();
            },
            error: function(xhr) {
                alert('Gagal: ' + xhr.responseText);
            }
        })
    })
    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',
                    url:'{{url("/admin/Cekkodes")}}',
                    type:'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}' // Jangan lupa CSRF token!
                    },
                    data:{barcode:scanned_barcode},
                    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:$(this).serialize(),
                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