@extends('layout.master')

@push('plugin-styles')
  <link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
  <link href="{{ asset('assets/plugins/@mdi/css/materialdesignicons.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Penjualan</a></li>
    <li class="breadcrumb-item active" aria-current="page">Buka/Tutup Kasir</li>
  </ol>
</nav>

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">Data Buka/Tutup Kasir</h6>
        <div class="table-responsive">
            <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                <thead>
                    <tr>
                        <th class="kolomNomor">No.</th>
                        <th>Tanggal</th>
                        <th>Kasir</th>
                        <th class="text-end">Uang Kas Awal</th>
                        <th class="text-end">Pemasukan Lain</th>
                        <th class="text-end">Penjualan Tunai</th>
                        <th class="text-end">Pengeluaran Tunai</th>
                        <th class="text-end">Setoran</th>
                        <th class="text-end">Uang Kas Akhir (Otomatis)</th>
                        <th class="text-end">Uang Kas Akhir (Real)</th>
                        <th class="text-end">Selisih</th>
                        <th>Detail</th>
                        <th class="kolomAksi">Aksi</th>
                    </tr>
                </thead>
            </table>
        </div>
      </div>
      <div class="card-footer" style="text-align: right;">
        @can('buka-tutup-kasir.create')
            <button class="btn btn-info btn-custom1" id="tambahBukaKasir">Tambah Data</button>
        @endcan
      </div>
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalBukaKasir" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Buka Kasir</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_buka_kasir" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Tanggal</label>
                                <input type="datetime-local" class="form-control required" name="tanggal" id="tanggal" autocomplete="off" placeholder="Tanggal" value="2025-06-08T14:58:39">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Uang Kas Awal</label>
                                <input type="text" class="form-control sanitizeMinusSign" name="nominal_buka" id="nominal_buka" autocomplete="off" placeholder="Uang Kas Awal" onkeyup="dottocomma(this);onlyNumber(this);" onchange="formatInputUang(this);">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanBukaKasir" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalEditBukaKasir" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Edit Buka Kasir</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_buka_kasir_edit" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Uang Kas Awal</label>
                                <input type="text" class="form-control sanitizeMinusSign" name="nominal_buka_edit" id="nominal_buka_edit" autocomplete="off" placeholder="Uang Kas Awal" onkeyup="dottocomma(this);onlyNumber(this);" onchange="formatInputUang(this);">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanBukaKasirEdit" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalEditSetoran" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Edit Setoran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_setoran_edit" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Uang Setoran</label>
                                <input type="text" class="form-control sanitizeMinusSign" name="nominal_setoran" id="nominal_setoran" autocomplete="off" placeholder="Uang Setoran" onkeyup="dottocomma(this);onlyNumber(this);" onchange="formatInputUang(this);">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanSetoranEdit" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalEditTutupKasir" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Edit Tutup Kasir</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_tutup_kasir_edit" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Uang Kas Akhir</label>
                                <input type="text" class="form-control sanitizeMinusSign" name="nominal_tutup_edit" id="nominal_tutup_edit" autocomplete="off" placeholder="Uang Kas Akhir" onkeyup="dottocomma(this);onlyNumber(this);" onchange="formatInputUang(this);">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanTutupKasirEdit" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalTutupKasir" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Form Tutup Kasir [<span id="ketTanggal"></span>]</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_tutup_kasir" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <div class="mb-3">
                                <label class="form-label">Setoran</label>
                                <input type="text" class="form-control" name="setoran" id="setoran" autocomplete="off" placeholder="Setoran" onkeyup="dottocomma(this)" onchange="formatInputUang(this);" value="0">
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpanTutupKasir" class="btn btn-primary btn-custom1">Simpan</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keluar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div id="modalDetail" class="modal fade bd-example-modal-lg" data-bs-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Detail Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_tutup_kasir" class="forms-sample">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-sm table-modal-bordered" id="tableDetail" style="width: 100% !important;">
                                <thead>
                                    <tr>
                                        <th>No.</th>
                                        <th>Metode Bayar</th>
                                        <th>Nominal</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="infoKosongDetail">
                                        <td colspan="3">Belum Terdapat Data</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{{-- Akhiran Modal --}}
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script src="{{ asset('assets/js/sweet-alert.js') }}"></script>

  <script>
    var URLs = "{{ url('penjualan/buka-tutup-kasir') }}";

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data',
      columns: [
        {data: 'DT_RowIndex', name: 'id', searchable: false},
        {data: 'tanggal', name: 'tanggal'},
        {data: 'pelaksana_buka', name: 'pelaksana_buka', searchable: false, orderable: false},
        {data: 'nominal_buka', name: 'nominal_buka', className: 'text-end'},
        {data: 'pemasukan_lain', name: 'pemasukan_lain', className: 'text-end'},
        {data: 'transaksi_tunai', name: 'transaksi_tunai', searchable: false, orderable: false, className: 'text-end'},
        {data: 'pengeluaran_tunai', name: 'pengeluaran_tunai', searchable: false, orderable: false, className: 'text-end'},
        {data: 'setoran', name: 'setoran', className: 'text-end'},
        {data: 'nominal_tutup_seharusnya', name: 'nominal_tutup_seharusnya', className: 'text-end'},
        {data: 'nominal_tutup', name: 'nominal_tutup', className: 'text-end'},
        {data: 'selisih', name: 'selisih', className: 'text-end'},
        {data: 'lihat_detail', name: 'lihat_detail', searchable: false, orderable: false, class: 'text-center'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
    });

    $('#tambahBukaKasir').on('click', function(e){
        @can('has-toko')
            const data = {
                _token: "{{ csrf_token() }}"
            };
            reads(URLs+"/read-buka-kasir", data, rReadsBukaKasir);
        @else
            alertHastoko();
        @endcan
    });

    function rReadsBukaKasir(data){
        swal.close();
        stat = "add";
        $('#modalBukaKasir').modal('show');
        $('#nominal_buka').val(formatNumberComma(data.nominal_buka));
        $('#tanggal').val(data.tanggal_buka);
    }

    $('#btnSimpanBukaKasir').on('click', function(e){
        console.log('oke');
        if (cekForm('form_buka_kasir') == true) {
            if (stat == "add") {
                var data = {
                    _token: "{{ csrf_token() }}",
                    tanggal: $('#tanggal').val(),
                    nominal_buka: $('#nominal_buka').val().replace(/\./g, '').replace(/\,/g, '.')
                }

                sendJson(URLs+"/add-buka", data, rSends);
            }else{
                var data = {
                    _token: "{{ csrf_token() }}",
                    id: IDs,
                    tanggal: $('#tanggal').val(),
                    nominal_buka: $('#nominal_buka').val().replace(/\./g, '').replace(/\,/g, '.')
                }

                sendJson(URLs+"/update-buka", data, rSends);
            }
        }
    });

    $('#btnSimpanBukaKasirEdit').on('click', function(e){
        if (cekForm('form_buka_kasir_edit') == true) {
            var data = {
                _token: "{{ csrf_token() }}",
                id: IDs,
                nominal_buka: $('#nominal_buka_edit').val().replace(/\./g, '').replace(/\,/g, '.')
            }

            sendJson(URLs+"/update-buka", data, rSends);
        }
    });

    $('#btnSimpanTutupKasirEdit').on('click', function(e){
        if (cekForm('form_tutup_kasir_edit') == true) {
            var data = {
                _token: "{{ csrf_token() }}",
                id: IDs,
                nominal_tutup: $('#nominal_tutup_edit').val().replace(/\./g, '').replace(/\,/g, '.')
            }

            sendJson(URLs+"/update-tutup", data, rSends);
        }
    });

    $('#btnSimpanSetoranEdit').on('click', function(e){
        if (cekForm('form_setoran_edit') == true) {
            var data = {
                _token: "{{ csrf_token() }}",
                id: IDs,
                nominal_setoran: $('#nominal_setoran').val().replace(/\./g, '').replace(/\,/g, '.')
            }

            sendJson(URLs+"/update-setoran", data, rSends);
        }
    });

    function readDataBuka(id){
        stat = "update";
        IDs = id;
        var data = {
            act: "read",
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs+"/read", data, rReadsBuka);
    }

    function rReadsBuka(data) {
        swal.close();
        $('#modalEditBukaKasir').modal("show");
        $('#nominal_buka_edit').val(formatNumberComma(data.nominal_buka));
    }

    function readDataTutup(id){
        stat = "update";
        IDs = id;
        var data = {
            act: "read",
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs+"/read-saldo-tutup", data, rReadsTutup);
    }

    function rReadsTutup(data) {
        swal.close();
        $('#modalEditTutupKasir').modal("show");
        $('#nominal_tutup_edit').val(formatNumberComma(data.total_tutup));
    }

    function readDataSetoran(id){
        stat = "update";
        IDs = id;
        var data = {
            act: "read",
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs+"/read-setoran", data, rReadsSetoran);
    }

    function rReadsSetoran(data) {
        swal.close();
        $('#modalEditSetoran').modal("show");
        $('#nominal_setoran').val(formatNumberComma(data.setoran));
    }

    function hapusData(id){
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function(){
            var data = {act: "delete", id: id, _token:'{{ csrf_token() }}'};
            sendJson(URLs+"/delete", data, rSends);
        })
    }

    $('#modalBukaKasir').on('hidden.bs.modal', function(e){
        $('#form_buka_kasir input, #form_buka_kasir select').val('');

        IDs = '';
        stat = '';
    });

    $('#modalEditBukaKasir').on('hidden.bs.modal', function(e){
        $('#form_buka_kasir_edit input, #form_buka_kasir_edit select').val('');

        IDs = '';
        stat = '';
    });

    $('#modalEditTutupKasir').on('hidden.bs.modal', function(e){
        $('#form_tutup_kasir_edit input, #form_tutup_kasir_edit select').val('');

        IDs = '';
        stat = '';
    });

    function lihatDetail(id){
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads(URLs+"/lihat-detail", data, rLihatDetail);
    }

    function rLihatDetail(data){
        swal.close();

        $('#infoKosongDetail').hide();
        if(parseInt(data.jmlData) <= 0){
            $('#infoKosongDetail').show();
        }else{
            var htmlIsian = '';
            var nomor = 1;
            var total = 0;
            $.each(data.arrMB, function(i, v) {
                htmlIsian += '<tr class="tambahanData">';
                htmlIsian += '<td>' + (nomor++) + '</td>';
                htmlIsian += '<td>' + i + '</td>';
                htmlIsian += '<td style="text-align: right;">' + formatNumberComma(v) + '</td>';
                htmlIsian += '</tr>';
                
                // Tambahkan nilai 'v' ke total
                total += parseFloat(v);
            });
            // Menambahkan baris total ke HTML
            htmlIsian += '<tr class="tambahanData">';
            htmlIsian += '<td colspan="2" style="text-align: right;"><b>Total</b></td>';
            htmlIsian += '<td style="text-align: right;"><b>' + formatNumberComma(total) + '</b></td>';
            htmlIsian += '</tr>';
            $('#tableDetail tbody').append(htmlIsian);
        }

        $('#modalDetail').modal('show');
    }

    // function tutupPeriode(id, tanggal){
    //     IDs = id;

    //     var data = {
    //         id: id,
    //         _token: "{{ csrf_token() }}"
    //     };
    //     reads(URLs+"/read-tutup-periode", data, rTutupPeriode);
    // }

    // function rTutupPeriode(data){
    //     swal.close();

    //     $('#ketTanggal').html(data.tanggal_tutup_periode);
    //     $('#modalTutupKasir').modal('show');
    // }

    // $('#btnSimpanTutupKasir').on('click', function(e){
    //     var data = {
    //         _token: "{{ csrf_token() }}",
    //         id: IDs,
    //         setoran: $('#setoran').val().replace(/\./g, '').replace(/\,/g, '.')
    //     }
    //     sendJson(URLs+"/tutup-periode", data, rSends);
    // });

    function tutupPeriode(id){
        var uangKasAwal = $('#uangKasAwal'+id).html();
        var pemasukanLain = $('#pemasukanLain'+id).html();
        var penjualanTunai = $('#penjualanTunai'+id).html();
        var pengeluaranTunai = $('#pengeluaranTunai'+id).html();
        var setoran = $('#setoran'+id).html();
        var uangKasAkhirOtomatis = $('#uangKasAkhirOtomatis'+id).html();
        var uangKasAkhirReal = $('#uangKasAkhirReal'+id).html();
        var selisih = $('#selisih'+id).html();
        var textAlert = 
        "Apakah anda ingin menutup periode ini ?<br /> <br />" +
        "<table border='1' cellpadding='0' cellspacing='0' class='w-100 table table-bordered table-sm table-responsive' style='font-size: 12px;'>" +
            "<tr>" +
                "<td align='left'><b>Uang Kas Awal</b></td>" +
                "<td align='right'><b>" + uangKasAwal + "</b></td>" +
            "</tr>" +
            "<tr>" +
                "<td align='left'><b>Pemasukan Lain</b></td>" +
                "<td align='right'><b>" + pemasukanLain + "</b></td>" +
            "</tr>" +
            "<tr>" +
                "<td align='left'><b>Penjualan Tunai</b></td>" +
                "<td align='right'><b>" + penjualanTunai + "</b></td>" +
            "</tr>" +
            "<tr>" +
                "<td align='left'><b>Pengeluaran Tunai</b></td>" +
                "<td align='right'><b>" + pengeluaranTunai + "</b></td>" +
            "</tr>" +
            "<tr>" +
                "<td align='left'><b>Setoran</b></td>" +
                "<td align='right'><b>" + setoran + "</b></td>" +
            "</tr>" +
            "<tr>" +
                "<td align='left'><b>Uang Kas Akhir (Otomatis)</b></td>" +
                "<td align='right'><b>" + uangKasAkhirOtomatis + "</b></td>" +
            "</tr>" +
            "<tr>" +
                "<td align='left'><b>Uang Kas Akhir (Real)</b></td>" +
                "<td align='right'><b>" + uangKasAkhirReal + "</b></td>" +
            "</tr>" +
            "<tr>" +
                "<td align='left'><b>Selisih</b></td>" +
                "<td align='right'><b>" + selisih + "</b></td>" +
            "</tr>" +
        "</table>";



        swal({
            title: "Konfirmasi",
            text: textAlert,
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function(){
            var data = {act: "tutup-periode", id: id, _token:'{{ csrf_token() }}'};
            sendJson(URLs+"/tutup-periode", data, rSends);
        })
    }

    $('#modalTutupKasir').on('hidden.bs.modal', function(e){
        $('#ketTanggal').html('');
        $('#setoran').val('');
        IDs = null;
    });
    
    $('#modalDetail').on('hidden.bs.modal', function(e){
        $('.tambahanData').remove();
        $('#infoKosongDetail').show();
        IDs = null;
    });
  </script>
@endpush