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

<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-header bg-white">
            <div class="row">
                <div class="col-12">
                    <h6 class="card-title">Data Kontra Bon</h6>
                </div>
                <div class="col-12 col-md-4">
                    <div class="mb-2">
                        <select name="supplier_filter" id="supplier_filter" class="form-control select2Custom">
                            <option value="">Pilih Supplier</option>
                        </select>
                    </div>
                </div>
                <div class="col-12 col-md-5">
                    <div class="mb-2">
                        <input type="text" name="daterange" id="daterange" class="form-control" placeholder="Tanggal Kontra Bon" readonly>
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="row">
                        <div class="col-6 pe-1">
                            <button type="button" id="btnFilter" 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>
        </div>
      <div class="card-body">
        <div class="row">
            <div class="col-12">
            <table id="datatable-serverside" class="table" style="width: 100%;">
                        <thead>
                        <tr>
                            <th class="kolomNomor">No.</th>
                            <th>Nomor Kontra Bon</th>
                            <th>Supplier</th>
                            <th>Tanggal</th>
                            <th>Detail</th>
                            <th>File Upload</th>
                            <th class="kolomAksi">Aksi</th>
                        </tr>
                        </thead>
                    </table>
            </div>
        </div>
      </div>
      @can('kontra-bon.create')
        <div class="card-footer" style="text-align: right;">
            <a class="btn btn-info btn-custom1" href="kontra-bon/input">Tambah Data</a>
        </div>
      @endcan
    </div>
  </div>
</div>

{{-- Modal --}}
<div id="modalLihatDetail" 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 Detail Kontra Bon</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="btn-close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <x-checkbox-view-nama-modal />
                    <div class="col-12 pb-4">
                        <table class="table table-sm" id="tableDetail" style="width: 100% !important;">
                            <thead>
                                <tr>
                                    <th style="width: 10% !important;">Nomor PO</th>
                                    <th style="width: 50% !important;">Nama Barang</th>
                                    <th style="width: 10% !important;">Nomor Faktur</th>
                                    <th style="width: 20% !important;" class="text-end">Total Harga</th>
                                    <th style="width: 10% !important;">Keterangan</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="rowKosongDetail">
                                    <td colspan="5" class="text-center">Belum Terdapat Data</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<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 table-sm" id="tableKelolaBerkas" style="width: 100% !important;">
                            <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(['kontra-bon.edit', 'kontra-bon.create'])
                        <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>
{{-- 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('pembelian/kontra-bon') }}";
    var jmlBerkasAll = 0;

    $('#supplier_filter').select2({
        ajax: {
            url: '{{ route("kontak.supplier") }}',
            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,
    });

    $('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('');
    });

    let datatable = $('#datatable-serverside').DataTable({
      lengthMenu: lengthMenuDatatable(),
      processing: true,
      serverSide: true,
      ajax: URLs+'/get-data',
      columns: [
        {data: 'DT_RowIndex', name: 'id', searchable: false},
        {data: 'nomor_kontra_bon', name: 'nomor_kontra_bon'},
        {data: 'detail_supplier', name: 'detail_supplier'},
        {data: 'tanggal_kontra_bon', name: 'tanggal_kontra_bon'},
        {data: 'detail', name: 'detail', searchable: false, orderable: false, class: 'text-center'},
        {data: 'file_upload', name: 'file_upload', searchable: false, orderable: false, class: 'text-center'},
        {data: 'aksi', name: 'aksi', searchable: false, orderable: false, class: 'text-center'},
      ],
    });

    $('#btnFilter').on('click', function(e){
        var supplier_filter = $('#supplier_filter').val();
        var daterange = $('#daterange').val();
        if((supplier_filter != null && supplier_filter != '') || (daterange != null && daterange != '')){
            var URL_filter = URLs + "/get-data" + `?supplier=${$('#supplier_filter').val()}&daterange=${$('#daterange').val()}`;
            datatable.ajax.url(URL_filter).load();
        }else{
            swal('Perhatian', 'Pastikan Sudah Memilih Supplier ataupun Menentukan Tanggal', 'info');
        }
    });

    function filterReset(){
      $('#supplier_filter').val('').trigger('change');
      $('#daterange').val('');
      datatable.ajax.url(URLs + "/get-data").load();
    }

    function lihatDetail(id)
    {
        var data = {
            _token: "{{ csrf_token() }}",
            kontra_bon_header_id: id
        };
        sendJson(URLs+'/lihat-detail-po', data, rDetail);
    }

    function rDetail(data)
    {
        swal.close();
        $('#modalLihatDetail').modal('show');
        $('.rowDetail').remove();

        var checked_view_nama = $('input[name="view_nama"]:checked').val();

        var jmlData = 0;
        $.each(data, function(i, v){
            jmlData = parseInt(jmlData)+1;

            $('#tableDetail').append(
                '<tr class="rowDetail">'+
                '<td style="width: 10% !important; white-space: normal; word-break:break-all;">'+v.nomor_po+'</td>'+
                '<td style="width: 50% !important; white-space: normal; word-break:break-all;">'+
                    `<div class="view_nama_asli view_nama" ${checked_view_nama != 'view_nama_asli' ? 'style="display:none"' : ''}>
                        ${v.asli}
                    </div>
                    <div class="view_nama_alias view_nama" ${checked_view_nama != 'view_nama_alias' ? 'style="display:none"' : ''}>
                        ${v.alias}
                    </div>
                    <div class="view_nama_asli_alias view_nama" ${checked_view_nama != 'view_nama_asli_alias' ? 'style="display:none"' : ''}>
                        ${v.asli_alias}
                    </div>`+
                '</td>'+
                '<td style="width: 10% !important; white-space: normal; word-break:break-all;">'+(v.nomor_faktur == null || v.nomor_faktur == '' ? '-' : v.nomor_faktur)+'</td>'+
                '<td style="width: 20% !important; white-space: normal; word-break:break-all;" class="text-end">'+formatNumber(parseFloat(v.total_harga), 0, 2)+'</td>'+
                '<td style="width: 10% !important; white-space: normal; word-break:break-all;">'+v.keterangan+'</td>'+
                '</tr>'
            );
        });

        if(jmlData > 0){
            $('#rowKosongDetail').hide();
        }else{
            $('#rowKosongDetail').show();
        }
    }

    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);
        })
    }

    function kelolaBerkas(id){
        IDs = id;
        var data = {
            _token: "{{ csrf_token() }}",
            id: id
        };
        sendJson(URLs+'/read-file', data, rKelolaBerkas);
    }

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

        $.each(data, function(i, v) {
            var url = "{{ asset('berkas_file_kontra_bon/') }}" + '/' + 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() }}");
            data.append('kontra_bon_header_id', IDs);
            var file = $('#file')[0].files;
            data.append('file', file[0]);
            uploads(URLs+"/upload-file", 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('berkas_file_kontra_bon/') }}" + '/' + 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>');
            }
        })
    }

    var IDs2 = null;
    function hapusFile(id){
        IDs2 = id;
        var data = {
            _token: "{{ csrf_token() }}",
            id: id
        };
        sendJson(URLs+'/remove-file', data, 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;
            }
        });
    }

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