@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"><a href="#">Kasir</a></li>
        <li class="breadcrumb-item active" aria-current="page">Pembayaran</li>
    </ol>
</nav>

<div class="row">
    <div class="col-md-12 grid-margin stretch-card">
        <div class="card">
            <div class="card-header bg-white">
                <h4>Data Pembayaran</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12 mb-3">
                        
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="mb-2">
                            <input type="text" name="nomor" id="nomor" class="form-control" placeholder="Search Nomor">
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="mb-2">
                            <select name="pelanggan" id="pelanggan" class="form-control required select2Custom">
                                <option value="">Semua Pelanggan</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="mb-2">
                            <select name="metode_bayar" id="metode_bayar" class="form-control select2Custom">
                                <option value="">Semua Metode Bayar</option>
                                @foreach ($metodeBayarList as $metodeBayar)
                                <option value="{{ $metodeBayar->id }}">{{ $metodeBayar->nama }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="mb-2">
                            <input type="text" name="tanggal" id="tanggal" class="form-control daterange-picker"
                                placeholder="Tanggal Transaksi" readonly>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="mb-2">
                            <input type="text" name="no_ref" id="no_ref" class="form-control"
                                placeholder="Search No Ref">
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="mb-2">
                            <select name="type" id="type" class="form-control select2Custom">
                                <option value="">Semua Tipe</option>
                                @foreach ($typeList as $key => $val)
                                <option value="{{ $key }}">{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-12 col-md-4">
                        <div class="mb-2">
                            <select name="status" id="status" class="form-control select2Custom">
                                <option value="">Semua Status</option>
                                @foreach ($statusList as $key => $val)
                                <option value="{{ $key }}">{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="row">
                            <div class="col-12 col-md-6 col-lg-3">
                                <div class="row">
                                    <div class="col-4 pe-1">
                                        <button type="button" onclick="filter()"
                                            class="btn btn-primary btn-custom2 w-100" title="Filter">
                                            <span class="mdi mdi-filter"></span>
                                        </button>
                                    </div>
                                    <div class="col-4">
                                        <button type="button" class="btn btn-light btn-custom8 w-100"
                                            onclick="filterReset()" title="Reset">
                                            <span class="mdi mdi-refresh"></span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-md-12">
                        <div class="table-responsive" style="overflow-x: auto;">
                    <table id="datatable-serverside" class="table table-sm" style="width: 100%;">
                        <thead>
                            <tr>
                                <th class="kolomNomor">No.</th>
                                <th>Nomor</th>
                                <th>Pelanggan</th>
                                <th>Metode Bayar</th>
                                <th>Tanggal</th>
                                <th>No Ref</th>
                                <th>Tipe</th>
                                <th>File</th>
                                <th>Nominal</th>
                                <th>Status</th>
                                <th>Potongan</th>
                                <th>Kembalian</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modalCekData" 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 Validasi Pembayaran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <form id="form_cek_data" class="forms-sample">
                    <input type="hidden" id="bayar_penjualan_detail_id" value="">
                    <div class="row">
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Metode Bayar</label>
                                <select name="metode_bayar_id" id="metode_bayar_id" class="form-control">
                                    <option value="">Silahkan Pilih</option>
                                    @foreach($metodeBayarList as $metodeBayar)
                                    <option data-info_rekening="{{ $metodeBayar->info_rekening_perusahaan }}"
                                        value="{{ $metodeBayar->id }}">
                                        {{ $metodeBayar->nama }}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Rekening Perusahaan</label>
                                <input type="text" class="form-control" id="rekening_perusahaan" autocomplete="off"
                                    placeholder="Rekening Perusahaan" readonly="readonly">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nomor Referensi</label>
                                <input type="text" class="form-control" id="nomor_transaksi" autocomplete="off"
                                    placeholder="Nomor Referensi">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label for="tanggal_transaksi" class="form-label">Tanggal Pembayaran</label>
                                <input type="datetime-local" class="form-control" id="tanggal_transaksi"
                                    autocomplete="off" placeholder="Tanggal Pembayaran">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Nominal</label>
                                <input type="text" class="form-control formatInputUang" id="nominal" autocomplete="off"
                                    placeholder="Nominal">
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="mb-3">
                                <label class="form-label">Bukti Pembayaran</label>
                                <input type="file" class="form-control" id="file_bukti" autocomplete="off"
                                    placeholder="Berkas Pembayaran">
                                <small><b>File Terupload: </b><a href=""><span id="buktiPembayaran"></span></a></small>
                            </div>
                        </div>
                        <div class="col-12" style="text-align: right;">
                            <button type="button" id="btnSimpan" 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>
@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>
    let URLs = "{{ url('penjualan/kasir/pembayaran') }}";

    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        searching: false,
        ajax: URLs + '/get-data',
        columns: [
            {
                data: 'DT_RowIndex',
                name: 'id',
                searchable: false
            },
            {
                data: 'bayar_penjualan.nomor',
                name: 'bayar_penjualan_nomor',
            },
            {
                data: 'bayar_penjualan.pelanggan.nama',
                name: 'bayar_penjualan.pelanggan.nama',
                searchable: false,
                orderable: false,
            },
            {
                data: 'bayar_penjualan.metode_bayar.nama',
                name: 'bayar_penjualan_metode_bayar_id',
                defaultContent: '-',
                searchable: false,
                render: function(data, type, row) {
                    if(!data) {
                        return '-';
                    }
                    return `
                    <div>
                        <span class="fw-bold">Metode : </span>
                        <span>${data}</span>
                    </div>
                    <div>
                        <span class="fw-bold">Rekening : </span>
                        <span>${row.bayar_penjualan?.metode_bayar?.info_rekening_perusahaan}</span>
                    </div>
                    `;
                }
            },
            {
                data: 'bayar_penjualan.tanggal',
                name: 'bayar_penjualan_tanggal'
            },
            {
                data: 'bayar_penjualan_nomor_transaksi_bank',
                name: 'bayar_penjualan_nomor_transaksi_bank',
                defaultContent: '-'
            },
            {
                data: 'type',
                name: 'type',
                orderable: false,
                searchable: false,
                defaultContent: '-'
            },
            {
                data: 'file',
                name: 'file',
                orderable: false,
                searchable: false,
            },
            {
                data: 'total_bayar',
                name: 'total_bayar',
                class: 'text-end',
                render: function(data) {
                    return formatNumberComma(data);
                }
            },
            {
                data: 'validasi_pembayaran',
                name: 'bayar_penjualan_verified_at',
                searchable: false
            },
            {
                data: 'bayar_penjualan_potongan',
                name: 'bayar_penjualan_potongan',
                class: 'text-end',
                render: function(data) {
                    return formatNumberComma(data);
                }
            },
            {
                data: 'bayar_penjualan_kembalian',
                name: 'bayar_penjualan_kembalian',
                class: 'text-end',
                render: function(data) {
                    return formatNumberComma(data);
                },
            },
            {
                data: 'aksi',
                name: 'aksi',
                defaultContent: '-',
                orderable: false,
                searchable: false
            },
        ],
        order: [
            [4, "desc"]
        ],
        rowCallback: function(row, data, index) {
            if(!data.is_verified){
                $(row).addClass('table-warning');
            }
        },
    });

    function deletePembayaran(id){
      swal({
        title: "Konfirmasi",
        text: "Apakah anda ingin menghapus data Pembayaran ini ?",
        type: "warning",
        showCancelButton: true,
        cancelButtonText: "Batal",
        confirmButtonText: "Lanjutkan"
      }).then(function(){
        const url = '/penjualan/kasir/pembayaran/' + id +'/delete';
        sendJson(url, {_token:'{{ csrf_token() }}'}, rSends);
      })
    }

    const filter = () => {
        const options = {
            tanggal: $('#tanggal').val(),
            metode_bayar: $('#metode_bayar').val(),
            status: $('#status').val(),
            nomor: $('#nomor').val(),
            no_ref: $('#no_ref').val(),
            type: $('#type').val(),
            pelanggan: $('#pelanggan').val(),
        }

        datatable.ajax.url(URLs + '/get-data?' + $.param(options)).load();
    }

    const filterReset = () => {
        $('#tanggal').val('');
        $('#metode_bayar').val(null).trigger('change');
        $('#status').val(null).trigger('change');
        $('#nomor').val('');
        $('#no_ref').val('');
        $('#type').val(null).trigger('change');
        $('#pelanggan').val(null).trigger('change');
        filter();
    }

    $('#pelanggan').select2({
        width: '100%',
        ajax: {
            url: '{{ route("kontak.pelanggan") }}',
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    search: params.term
                };
            },
            processResults: function (data) {
                return {
                    results: $.map(data, function (item) {
                        return {
                            text: item.nama,
                            id: item.id
                        }
                    })
                };
            },
            cache: true
        },
        minimumInputLength: 3,
    });

    $('#metode_bayar_id').on('change', function(e) {
        $('#rekening_perusahaan').val('');
        const selectedOption = $(this).find('option:selected');
        const rekeningPerusahaan = selectedOption.data('info_rekening');
        $('#rekening_perusahaan').val(rekeningPerusahaan || '');
    })

    function cekData(id){
        var data = {
            id: id,
            _token: "{{ csrf_token() }}"
        };
        reads("{{ url('penjualan/kasir') }}"+"/cek-data", data, rCekData);
    }

    function rCekData(data) {
        swal.close();
        $('#modalCekData').modal("show");
        $('#bayar_penjualan_detail_id').val(data.bayar_penjualan_detail_id);
        $('#metode_bayar_id').val(data.metode_bayar);
        $('#rekening_perusahaan').val(data.rekening_perusahaan);
        $('#nomor_transaksi').val(data.nomor_transaksi);
        $('#tanggal_transaksi').val(data.tanggal_transaksi);
        $('#nominal').val(formatNumberComma(data.nominal));

        if(data.file_pembayaran != null && data.file_pembayaran != ''){
            var url = "{{ asset('berkas_file_pembayaran/') }}" + '/' + data.file_pembayaran;
            $('#buktiPembayaran').html('<a href="'+url+'">'+data.file_pembayaran+'</a>');
        }else{
            $('#buktiPembayaran').html('-');
        }
    }

    $('#btnSimpan').on('click', function(e){
        let data = new FormData();
        data.append("_token", "{{ csrf_token() }}");
        data.append("id", IDs);
        data.append("metode_bayar_id", $('#metode_bayar_id').val());
        data.append("tanggal", $('#tanggal_transaksi').val());
        data.append("nomor_transaksi_bank", $('#nomor_transaksi').val());
        data.append("total_bayar", formatInputUangToFloat($('#nominal').val()));

        if($('#file_bukti').val() != null && $('#file_bukti').val() != ''){
            data.append("file_pembayaran", $('#file_bukti')[0].files[0]);
        }

        const url = `${URLs}/${$('#bayar_penjualan_detail_id').val()}/valid-data`;
        uploads(url, data, rSends);
    });

    function rSends(data) {
        swal({
            title: data.type == "success" ? "Berhasil" : "Gagal",
            text: data.response,
            type: data.type
        }).then(function() {
            if(data.type == "success"){
                $('#modalCekData').modal("hide");
                datatable.ajax.reload();
            }
        });
    }
</script>
@endpush