@extends('layouts.external.app')
@section('content')

<style>
    #dropArea {
        border: 2px dashed #ccc !important;
        cursor: pointer;
        transition: 0.3s;
    }

    #dropArea.bg-hover {
        background-color: #f8f9fa;
        border-color: #0d6efd;
    }

    .progress {
        height: 18px;
    }

    .progress-bar {
        line-height: 18px;
        font-size: 13px;
    }

    /* Dropdown item khusus di kolom dokumen */
    .dropdown-menu .dropdown-item {
        font-size: 12px;
        /* kecilin teks */
        padding: 4px 8px;
        /* rapetin */
    }

    .dropdown-menu .dropdown-item i {
        font-size: 12px;
        /* kecilin icon */
        margin-right: 5px;
        /* jarak icon ke teks */
    }
</style>
<div class="content-wrapper p-5">
    <div class="row">
        <div class="col-md-12 grid-margin">
            <div class="row">
                <div class="col-12 col-xl-8 mb-4 mb-xl-0">
                    <h3 class="fw-bold">Kontra Bank Garansi</h3>
                    <h6 class="fw-normal mb-0">Daftar Kontra Bank Garansi</h6>
                </div>
                <div class="col-12 col-xl-4">
                    <div class="justify-content-end d-flex">
                        <div class="dropdown flex-md-grow-1 flex-xl-grow-0">
                            <!-- <button class="btn btn-sm btn-light bg-white dropdown-toggle" type="button" id="dropdownMenuDate2"
                                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                <i class="mdi mdi-calendar"></i> Today (10 Jan 2021)
                            </button>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuDate2">
                                <a class="dropdown-item" href="#">January - March</a>
                                <a class="dropdown-item" href="#">March - June</a>
                                <a class="dropdown-item" href="#">June - August</a>
                                <a class="dropdown-item" href="#">August - November</a>
                            </div> -->
                            <a href="{{ url('v3/kontrabankgaransi/tambah') }}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Kontra Bank Garansi</a>
                            <button type="button" class="btn btn-outline-secondary btn-icon-text btn-sm" data-bs-toggle="modal" data-bs-target="#filter"><i class="fa fa-sliders"></i> Filter</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
                <div class="card-body">
                    <!-- <p class="card-title mb-0">Data Penjaminan <small><i class="fa fa-angle-double-right"></i> Reject</small></p> -->
                    {{-- ALERT CONTAINER --}}
                    <div id="api-error-container"></div>
                    <div class="table-responsive">
                        <table id="kbg-table" class="table table-striped table-borderless">
                            <thead>
                                <tr>
                                    <th class="text-center" style="font-size: 12px;">#</th>
                                    <th class="text-center" style="font-size: 12px;">Jaminan</th>
                                    <th class="text-center" style="font-size: 12px;">Sertifikat / <br>SP3</th>
                                    <th class="text-center" style="font-size: 12px;">Nama <br>Perusahaan</th>
                                    <th class="text-center" style="font-size: 12px;">Principal</th>
                                    <th class="text-center" style="font-size: 12px;">Obligee</th>
                                    <th class="text-center" style="font-size: 12px; width:7%">Nilai <br>Penjaminan</th>
                                    <th class="text-center" style="font-size: 12px; width:7%">Nilai <br> Nett IJP</th>
                                    <th class="text-center" style="font-size: 12px;">Tgl. Bayar</th>
                                    <th class="text-center" style="font-size: 12px;">Dok. Khusus</th>
                                    <th class="text-center" style="font-size: 12px;">Tgl Input</th>
                                    <th class="text-center" style="font-size: 12px;">Debitnote</th>
                                    <th class="text-center" style="font-size: 12px;">Status</th>
                                    <th class="text-center" style="font-size: 12px;">Surat <br>Permohonan</th>
                                    <th class="text-center" style="font-size: 12px;"></th>
                                </tr>
                            </thead>

                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Modal -->
<div class="modal fade" id="filter" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel"><i class="fa fa-sliders"></i> Filter</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <!-- <form action="" method="post"> -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-12">
                        <label for="type_penjaminan" class="mb-1">Type Penjaminan</label>
                        <select id="type_penjaminan" name="type_penjaminan" class="form-select">
                            <option value="">Pilih Lembaga Type Penjaminan</option>
                            <option value="all">
                                Semua
                            </option>
                            <option value="PENAWARAN">
                                PENAWARAN
                            </option>
                            <option value="PELAKSANAAN">
                                PELAKSANAAN
                            </option>
                            <option value="UANGMUKA">
                                UANG MUKA
                            </option>
                            <option value="PEMELIHARAAN">
                                PEMELIHARAAN
                            </option>
                        </select>
                    </div>
                </div>
            </div>
            <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Cari</button>
                </div> -->
            <!-- </form> -->
        </div>
    </div>
</div>
<!-- end filter modal -->

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-light">
                <h5 class="modal-title">Upload Dokumen Khusus</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">

                <div class="alert alert-info p-2">
                    Maximum file size allowed for upload: <b>5 MB</b> (.jpg, .jpeg, .png, .pdf )
                </div>

                <form id="uploadForm" enctype="multipart/form-data">
                    @csrf
                    <div id="dropArea" class="border border-2 border-dashed rounded p-5 text-center">
                        <p class="mb-2">Drop files here to start uploading</p>
                        <p class="text-muted">or</p>
                        <button type="button" class="btn btn-primary btn-sm" id="btnSelectFile">Select File</button>
                        <input type="file" name="file" id="fileInput" hidden>
                    </div>

                    <!-- Progress -->
                    <div id="progressWrapper" class="mt-3 d-none">
                        <strong id="fileName"></strong>
                        <div class="progress mt-1">
                            <div id="progressBar" class="progress-bar bg-success" role="progressbar"
                                style="width: 0%">0%</div>
                        </div>
                        <small id="fileInfo" class="text-muted"></small>
                    </div>
                </form>

            </div>
        </div>
    </div>
</div>


<!-- End upload modal -->

<!-- partial:partials/_footer.html -->
@include('partials.external.footer')
<!-- partial -->
</div>
<!-- main-panel ends -->
</div>
<!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- plugins:js -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/js/vendor.bundle.base.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="{{ url('/') }}/skydash/src/assets/vendors/chart.js/chart.umd.js"></script>

<!-- Datatables -->
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.bootstrap5.min.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dataTables.select.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="{{ url('/') }}/skydash/src/assets/js/off-canvas.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/template.js"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/settings.js"></script>
<script src="assets/js/todolist.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="{{ url('/') }}/skydash/src/assets/js/jquery.cookie.js" type="text/javascript"></script>
<script src="{{ url('/') }}/skydash/src/assets/js/dashboard.js"></script>
<!-- <script src="assets/js/Chart.roundedBarCharts.js"></script> -->
<!-- End custom js for this page-->

<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>

<script>
    $(document).ready(function() {
        var table = $('#kbg-table').DataTable({
            scrollX: true,
            autoWidth: false,
            ordering: true,
            searching: true,
            info: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("showkbg") }}',
                // type: 'POST',
                data: function(d) {
                    d.type_penjaminan = $('#type_penjaminan').val();
                },
                dataSrc: function(json) {
                    if (json.error) {
                        $('#api-error-container').html(`
                        <div class="alert alert-danger">
                            ${json.error}
                        </div>
                    `);
                    } else {
                        $('#api-error-container').html('');
                    }
                    return json.data;
                },
                error: function(xhr, status, error) {
                    $('#api-error-container').html(`
                    <div class="alert alert-danger">
                        Data sources timeout, please refresh page!
                    </div>
                `);
                }
            },
            columns: [{
                    data: 'no_urut',
                    title: '#',
                    className: 'text-center',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'TypeJaminan',
                    name: 'TypeJaminan',
                    className: 'text-center',
                    render: function(data) {
                        return `<div style="word-break: break-word; white-space:normal; line-height:19px">${data}</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'NomorSp3',
                    name: 'NomorSp3',
                    render: function(data) {
                        return `<div style="word-break: break-word; white-space:normal; line-height:19px">${data}</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'Perusahaan',
                    name: 'Perusahaan',
                    render: function(data) {
                        return `<div style="word-break: break-word; white-space: normal; line-height:19px">${data}</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'Principle',
                    name: 'Principle',
                    render: function(data) {
                        return `<div style="word-break: break-word; white-space: normal; line-height:19px">${data}</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'Obligee',
                    name: 'Obligee',
                    render: function(data) {
                        return `<div style="word-break: break-word; white-space:normal; line-height:19px">${data}</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'NilaiPenjaminan',
                    name: 'NilaiPenjaminan',
                    render: function(data) {
                        let number = parseFloat(data);
                        let formatted = number.toLocaleString('id-ID', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                        return `${formatted}`;
                    },
                    createdCell: function(td) {
                        $(td).css({
                            'font-size': '12px',
                            'text-align': 'right'
                        });
                    }
                },
                {
                    data: 'NilaiIjp',
                    name: 'NilaiIjp',
                    render: function(data) {
                        let number = parseFloat(data);
                        let formatted = number.toLocaleString('id-ID', {
                            minimumFractionDigits: 2,
                            maximumFractionDigits: 2
                        });
                        return `${formatted}`;
                    },
                    createdCell: function(td) {
                        $(td).css({
                            'font-size': '12px',
                            'text-align': 'right'
                        });
                    }
                },
                {
                    data: 'TglBayar',
                    name: 'TglBayar',
                    render: function(data) {
                        return `<div style="word-break: break-word; white-space:normal; line-height:19px">${data}</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'DocKhusus',
                    name: 'DocKhusus',
                    render: function(data, type, row) {
                        if (data && data.trim() !== "") {
                            let baseUrl = "{{ url('/v3/kontrabankgaransi/dockhusus') }}";
                            let fileUrl = baseUrl.replace(/\/$/, '') + '/' + data;

                            return `
                            <div class="btn-group">
                                <a href="${fileUrl}" target="_blank" class="btn btn-sm btn-link p-0" title="Lihat dokumen">
                                    <i class="fa fa-file-text-o text-success" style="font-size:17px"></i>
                                </a>
                                <button type="button" class="btn btn-sm btn-link p-0 dropdown-toggle dropdown-toggle-split" 
                                        data-bs-toggle="dropdown" aria-expanded="false" style="box-shadow:none;">
                                </button>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a class="dropdown-item open-upload-modal" 
                                        href="javascript:void(0)" 
                                        data-id="${row.id_kbg_encrypted}"
                                        data-oldfile="${data.replace('dockhusus/', '')}">
                                        <i class="fa fa-upload text-warning" style="font-size:12px"></i> Reupload
                                        </a>
                                    </li>
                                </ul>
                            </div>`;
                        } else {
                            return `<a href="javascript:void(0)" 
                                class="open-upload-modal" 
                                data-id="${row.id_kbg_encrypted}">
                                <i class="fa fa-upload text-danger" style="font-size:15px"></i> Upload
                                </a>`;
                        }
                    },
                    createdCell: function(td) {
                        $(td).css({
                            'font-size': '12px',
                            'text-align': 'center'
                        });
                    }
                },
                {
                    data: 'TglInput',
                    name: 'TglInput',
                    render: function(data) {
                        // Ambil hanya bagian tanggal sebelum 'T'
                        const formattedDate = data ? data.split("T")[0] : '';
                        return `<div style="word-break: break-word; white-space:normal; line-height:19px">${formattedDate}</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'Debitnote',
                    name: 'Debitnote',
                    render: function(data) {
                        // Ambil hanya bagian tanggal sebelum 'T'
                        const formattedDate = data ? data.split("T")[0] : '';
                        return `<div style="word-break: break-word; white-space:normal; line-height:19px">${formattedDate}</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'Status',
                    name: 'Status',
                    render: function(data) {
                        let badgeClass = 'secondary'; // default: abu-abu

                        switch (data.toLowerCase()) {
                            case 'aktif':
                                badgeClass = 'success'; // hijau
                                break;
                            case 'batal':
                                badgeClass = 'danger'; // merah
                                break;
                            case 'pending':
                                badgeClass = 'warning'; // kuning
                                break;
                        }

                        return `<span class="badge text-bg-${badgeClass} text-white" style="font-size:10px; font-weight:600">${data}</span>`;
                    },
                },
                {
                    data: 'SuratPermohonan',
                    name: 'SuratPermohonan',
                    render: function(data) {
                        return `<a href="${data}" target="_blank"><i class="fa fa-file-pdf-o text-danger"></i></a>`;
                    },
                    createdCell: function(td) {
                        $(td).css({
                            'font-size': '17px',
                            'text-align': 'center'
                        });
                    }
                },
                {
                    data: 'id',
                    render: function(data, type, row, meta) {
                        // const token = row.IDKbg;
                        const idkbg = row.id_kbg_encrypted;
                        let produk = row.produk;
                        const editUrl = `{{ route('edit.kbg', ['idkbg' => '__IDKBG__']) }}`.replace('__IDKBG__', idkbg);
                        const detailUrl = `{{ route('detail.kbg', ['idkbg' => '__IDKBG__']) }}`.replace('__IDKBG__', idkbg);
                        let deleteModal = '#deleteProduk' + data;

                        return `
                        <div class="btn-group">
                            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" style="font-size: 13px;padding:7px">
                                Action
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <a class="dropdown-item" title="Edit" href="${editUrl}" style="font-size: 13px;">
                                        Edit
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item" title="Detail" href="${detailUrl}" style="font-size: 13px;">
                                        Detail 
                                    </a>
                                </li>
                                <li>
                                    <a class="dropdown-item text-danger" title="Hapus" href="${deleteModal}" data-bs-toggle="modal" data-bs-target="${deleteModal}" data-produk="${produk}" style="font-size: 13px;">
                                        Hapus
                                    </a>
                                </li>
                            </ul>
                        </div>`;
                    },
                    orderable: false,
                    searchable: false
                }
            ],
            autoWidth: false
        });

        $('#type_penjaminan').on('change', function() {
            // const selected = $(this).val();
            // const url = new URL(window.location.href);
            // url.searchParams.set('type_penjaminan', selected);
            // window.location.href = url.toString(); 
            $('#filter').modal('hide');
            table.ajax.reload();
            table.ajax.draw();

        });
    });
</script>

<script>
    // buka modal dari icon upload di DataTables
    $(document).on('click', '.open-upload-modal', function() {
        let id = $(this).data('id');
        let oldFile = $(this).data('oldfile') || null;
        $('#uploadModal').modal('show');
        $('#uploadForm').data('id', id);
        $('#uploadForm').data('oldfile', oldFile);
    });

    // klik tombol select file → buka file input
    $('#btnSelectFile').on('click', function(e) {
        e.stopPropagation();
        $('#fileInput').click();
    });

    // drag & drop event
    let dropArea = document.getElementById('dropArea');
    dropArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropArea.classList.add('bg-hover');
    });
    dropArea.addEventListener('dragleave', () => {
        dropArea.classList.remove('bg-hover');
    });
    dropArea.addEventListener('drop', (e) => {
        e.preventDefault();
        dropArea.classList.remove('bg-hover');
        document.getElementById('fileInput').files = e.dataTransfer.files;
        previewFile();
    });

    // ketika pilih file manual
    $('#fileInput').on('change', previewFile);

    function previewFile() {
        let file = $('#fileInput')[0].files[0];
        if (!file) return;

        $('#fileName').text(file.name);
        $('#fileInfo').text((file.size / 1024).toFixed(2) + " KB");
        $('#progressWrapper').removeClass('d-none');

        let formData = new FormData($('#uploadForm')[0]);
        let idKbg = $('#uploadForm').data('id');
        formData.append('id', idKbg);
        formData.append('file', file); // PENTING

        // Step 1: Upload file ke server lokal
        $.ajax({
            url: '{{ route("uploaddockhusus.kbg") }}', // route baru
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function() {
                let xhr = $.ajaxSettings.xhr();
                if (xhr.upload) {
                    xhr.upload.addEventListener('progress', function(e) {
                        if (e.lengthComputable) {
                            let percent = Math.round((e.loaded / e.total) * 100);
                            $('#progressBar').css('width', percent + '%').text(percent + '%');
                        }
                    }, false);
                }
                return xhr;
            },
            success: function(res) {
                if (res.success) {
                    // Step 2: Update ke API dockhusus
                    $.ajax({
                        url: '{{ route("updatedockhusus.kbg") }}',
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            IDKbg: $('#uploadForm').data('id'),
                            FileDocDinas: res.path,
                            OldFile: $('#uploadForm').data('oldfile'),
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(r) {
                            $('#uploadModal').modal('hide');
                            $('#kbg-table').DataTable().ajax.reload();
                            alert(r.message || 'Dokumen khusus berhasil diperbarui!');
                        },

                    });
                }
            },
            error: function() {
                $('#progressBar')
                    .removeClass('bg-success')
                    .addClass('bg-danger')
                    .text('Gagal');
            }
        });
    }


    $('#uploadModal').on('hidden.bs.modal', function() {
        $('#uploadForm').trigger("reset");
        $('#uploadForm').removeData('id');
        $('#progressBar').css('width', '0%').text('0%');
        $('#progressWrapper').addClass('d-none');
        $('#fileName').text('');
        $('#fileInfo').text('');
    });
</script>


</body>

</html>

@endsection