@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" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endpush

@section('content')
<nav class="page-breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#!">Pembelian</a></li>
        <li class="breadcrumb-item"><a href="{{ route('pembelian.invoice-ekspedisi.index') }}">Invoice Ekspedisi</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">
                <form onsubmit="formFilter()">
                    <div class="row">
                        <div class="col-12">
                            <h6 class="card-title">Data Pembayaran</h6>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="mb-2">
                                <select name="ekspedisi" id="ekspedisi" class="form-control select2Custom">
                                    <option value="">Pilih Ekspedisi</option>
                                    @foreach ($dataEkspedisi as $item)
                                    <option value="{{$item->id}}">{{$item->nama}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-2">
                            <div class="mb-2">
                                <select name="metode_bayar" id="metode_bayar" class="form-control select2Custom">
                                    <option value="">Pilih Metode</option>
                                    @foreach ($dataMetodeBayar as $item)
                                        <option value="{{$item->id}}">{{$item->nama}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-2">
                            <div class="mb-2">
                                <select name="rekening" id="rekening" class="form-control select2Custom">
                                    <option value="">Pilih Rekening</option>
                                    @foreach ($dataRekening as $item)
                                        <option value="{{$item->id}}">{{$item->bank->nama_bank}} | {{$item->no_rekening}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-12 col-md-2">
                            <div class="mb-2">
                                <input type="text" name="daterange" id="daterange" class="form-control" placeholder="Tanggal Bayar" readonly>
                            </div>
                        </div>
                        <div class="col-12 col-md-2">
                            <div class="row">
                                <div class="col-6 pe-1">
                                    <button type="submit" class="btn btn-primary btn-custom2 w-100">Filter</button>
                                </div>
                                <div class="col-6 ps-1">
                                    <button type="button" class="btn btn-light btn-custom8 w-100" onclick="filterReset()">Reset</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-body">
                <table id="datatable-serverside" class="table table-sm" style="width: 100%">
                    <thead>
                        <tr>
                            <th class="kolomNomor">No.</th>
                            <th>Nomor</th>
                            <th>Tanggal</th>
                            <th>Ekspedisi</th>
                            <th>Metode</th>
                            <th>No Rek</th>
                            <th>Total Bayar</th>
                            <th>Settlement</th>
                            <th>File Upload</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div class="card-footer text-end">
                @can('invoice-ekspedisi.create')
                    <a class="btn btn-info btn-custom1" href="{{ route('pembelian.bayar-invoice-ekspedisi.create') }}">Tambah</a>
                @endcan
            </div>
        </div>
    </div>
</div>

{{-- modal --}}
<div id="modalKelolaBerkas" class="modal fade bd-example-modal-xl" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title h4">Data File Upload</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-12 pb-4">
                        <table class="table" id="tableKelolaBerkas">
                            <thead>
                                <tr>
                                    <th>Nama File</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="rowKosongKelolaBerkas">
                                    <td colspan="2" class="text-center">Belum Terdapat Data</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    @canany(['invoice-ekspedisi.create', 'invoice-ekspedisi.edit'])
                        <div class="col-12">
                            <label>Upload File</label>
                            <input type="file" id="file" class="form-control mt-2" accept=".jpg,.jpeg,.jpe,.jfif,.jif,.pdf">
                            <x-upload-file-footnotes/>
                            <button type="button" id="btnKelolaBerkas" class="btn btn-success btn-custom1 btn-sm mt-2" style="width: 100% !important;">Upload File</button>
                        </div>
                    @endcanany
                </div>
            </div>
        </div>
    </div>
</div>
{{-- end 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>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
@endpush

@push('custom-scripts')
<script>
    let datatable = $('#datatable-serverside').DataTable({
        lengthMenu: lengthMenuDatatable(),
        processing: true,
        serverSide: true,
        ajax: "{{ route('pembelian.bayar-invoice-ekspedisi.index') }}",
        columns: [{
                data: 'DT_RowIndex',
                name: 'id',
                searchable: false,
            },
            {
                data: 'nomor',
                name: 'nomor'
            },
            {
                data: 'tanggal',
                name: 'tanggal',
                searchable: false
            },
            {
                data: 'supplier.nama',
                name: 'supplier.nama',
                searchable: false
            },
            {
                data: 'metode_bayar.nama',
                name: 'metode_bayar.nama',
                searchable: false
            },
            {
                data: 'rekening.no_rekening',
                name: 'rekening.no_rekening',
                searchable: false
            },
            {
                data: 'total_bayar',
                name: 'total_bayar',
                class: 'text-end'
            },
            {
                data: 'lunas',
                name: 'lunas',
                class: 'text-center',
                searchable: false
            },
            {
                data: 'file_upload',
                name: 'file_upload',
                searchable: false,
                orderable: false,
                class: 'text-center'
            },
            {
                data: 'aksi',
                name: 'aksi',
                searchable: false,
                orderable: false
            },
        ],
        order: [[0, 'desc']],
    });

    function hapus(id) {
        swal({
            title: "Konfirmasi",
            text: "Apakah anda ingin menghapus data ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(function() {
            let url = "{{ route('pembelian.bayar-invoice-ekspedisi.destroy', ':id') }}";
            url = url.replace(':id', id);
            sendJson(url, {
                _token: "{{ csrf_token() }}"
            }, rSends);
        })
    }

    function rSends(data) {
        let titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        }).then(function() {
            if (data.type == "success") {
                datatable.ajax.reload();
            }
        })
    }

    function kelolaBerkas(id) {
        IDs = id;
        let url = "{{ route('pembelian.bayar-invoice-ekspedisi.read-file', ':id') }}";
        url = url.replace(':id', id);

        sendJson(url, {
            _token: "{{ csrf_token() }}",
        }, rKelolaBerkas);
    }

    function rKelolaBerkas(data) {
        jmlBerkasAll = data.length;
        if (data.length > 0) {
            $('#rowKosongKelolaBerkas').hide();
        }

        $.each(data, function(i, v) {
            var url = "{{ asset('uploads/bayar-invoice-ekspedisi/') }}" + '/' + v.nama_file;
            var link = '<a href="' + url + '" target="_blank">' + v.nama_file + '</a>';

            var row = '<tr class="trFile trFile' + v.id + '"><td>' + link + '</td><td><button type="button" title="Hapus File" onclick="hapusFile(\'' + v.id + '\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td></tr>';

            $('#tableKelolaBerkas tbody').append(row);
        });

        swal.close();
        $('#modalKelolaBerkas').modal('show');
    }

    $('#btnKelolaBerkas').on('click', function(e) {
        if ($('#file').val() != null && $('#file').val() != '') {
            var data = new FormData();
            data.append('_token', "{{ csrf_token() }}");
            var file = $('#file')[0].files;
            data.append('file', file[0]);

            let url = "{{ route('pembelian.bayar-invoice-ekspedisi.upload-file', ':id') }}";
            url = url.replace(':id', IDs);

            uploads(url, data, rSendsUpload);

        } else {
            swal('Perhatian', 'Pastikan Sudah Memilih File yang Akan Diupload', 'warning');
        }
    });

    function rSendsUpload(data) {
        var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        }).then(function() {
            if (data.type == "success") {
                $('#file').val('');
                jmlBerkasAll = parseInt(jmlBerkasAll) + 1;
                if (jmlBerkasAll > 0) {
                    $('#rowKosongKelolaBerkas').hide();
                }

                var url = "{{ asset('uploads/bayar-invoice-ekspedisi/') }}" + '/' + data.nama_file;
                $('#tableKelolaBerkas tbody').append(
                    '<tr class="trFile trFile' + data.id + '">' +
                    '<td><a href="' + url + '" target="_blank">' + data.nama_file + '</a></td>' +
                    '<td><button type="button" title="Hapus File" onclick="hapusFile(\'' + data.id + '\')" class="btn btn-danger btn-custom5 btn-sm"><span class="mdi mdi-delete"></span></button></td>' +
                    '</tr>'
                );
            }
        })
    }

    $('#modalKelolaBerkas').on('hidden.bs.modal', function(e) {
        $('#rowKosongKelolaBerkas').show();
        $('.trFile').remove();
        $('#file').val('');
        IDs = null;
        jmlBerkasAll = 0;
    });

    var IDs2 = null;

    function hapusFile(id) {
        IDs2 = id;

        let url = "{{ route('pembelian.bayar-invoice-ekspedisi.remove-file', ':id') }}";
        url = url.replace(':id', id);

        sendJson(url, {
            _token: "{{ csrf_token() }}"
        }, rHapusFile);
    }

    function rHapusFile(data) {
        var titles = data.type == "success" ? "Sukses" : (data.type == "error" ? "Gagal" : "Info");
        swal({
            title: titles,
            text: data.response,
            type: data.type,
            confirmButtonText: "OK"
        }).then(function() {
            if (data.type == "success") {
                $('.trFile' + IDs2).remove();
                jmlBerkasAll = parseInt(jmlBerkasAll) - 1;
                if (jmlBerkasAll <= 0) {
                    $('#rowKosongKelolaBerkas').show();
                }
                IDs2 = null;
            }
        });
    }

    $('input[name="daterange"]').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear'
        }
    });

    $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
    });

    $('input[name="daterange"]').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
    });

    function formFilter() {
        event.preventDefault();
        let url = "{{ route('pembelian.bayar-invoice-ekspedisi.index') }}" + `?ekspedisi=${$('#ekspedisi').val()}&tipe=${$('#tipe').val()}&daterange=${$('#daterange').val()}`;
        url += `&metode_bayar=${$('#metode_bayar').val()}&rekening=${$('#rekening').val()}`;
        datatable.ajax.url(url).load();
    }

    function filterReset() {
        $('#supplier').val('').trigger('change');
        $('#tipe').val('').trigger('change');
        $('#daterange').val('');
        datatable.ajax.url("{{ route('pembelian.bayar-invoice-ekspedisi.index') }}").load();
    }

    const changeLunas = (e, id) => {
        swal({
            title: "Konfirmasi",
            text: "Apakah anda yakin ingin mengubah status settlement ?",
            type: "warning",
            showCancelButton: true,
            cancelButtonText: "Batal",
            confirmButtonText: "Lanjutkan"
        }).then(() => {
            changeLunasProcess(e, id);
        }).catch(function(){
            $(e).prop('checked', !$(e).prop('checked'))
        })
    }

    const changeLunasProcess = (e, id) => {
        let url = "{{ route('pembelian.bayar-invoice-ekspedisi.change-lunas', ':id') }}";
        url = url.replace(':id', id);
        $.ajax({
            url: url,
            type: 'POST',
            data: {
                _token: "{{ csrf_token() }}"
            },
            error: function(xhr){
                swal({
                    title: 'Gagal',
                    text: xhr.responseJSON.response,
                    type: 'error',
                    confirmButtonText: 'OK'
                })
                $(e).prop('checked', !$(e).prop('checked'));
            }
        })
    }
</script>
@endpush