@extends('layouts.external.app')
@section('content')
<style>
    /* Pastikan tabel collapse */
    .dataTables_wrapper .dataTables_scrollHead table,
    .dataTables_wrapper .dataTables_scrollBody table,
    #surety-table {
        border-collapse: collapse !important;
        width: 100%;
    }

    /* Hanya border th tipis minimalis */
    .dataTables_wrapper .dataTables_scrollHead thead th,
    table.dataTable thead th,
    #surety-table thead th {
        border: 1px solid #dcdcdc !important;
        /* garis tipis */
        background: #f9f9f9;
        font-size: 12px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    /* Baris header (termasuk colspan) ikut rapih */
    .dataTables_wrapper .dataTables_scrollHead thead tr,
    #surety-table thead tr {
        border: 1px solid #dcdcdc !important;
    }

    /* Hapus border bawah default bootstrap yang bikin “garis setelah teks” */
    .table> :not(caption)>*>* {
        border-bottom-width: 0;
    }

    /* Body tetap sama (tidak diubah paddingnya) */
    .dataTables_wrapper .dataTables_scrollBody tbody td,
    #surety-table tbody td {
        border: none;
        /* kalau mau body juga tipis: 1px solid #eee */
    }
</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">Underwriting</h3>
                    <h6 class="fw-normal mb-0">
                        Validasi Data Klaim
                        <i class="fa fa-angle-double-right"></i>
                        {{ ucfirst($dataklaimtype) }}
                    </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/suretybond/tambah') }}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Surety Bond</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="dataklaim-batal" class="table table-striped">
                            <thead>
                                <tr>
                                    <th class="text-center" style="font-size: 12px;" rowspan="2">#</th>
                                    <th class="text-center" style="font-size: 12px;" rowspan="2">Option</th>
                                    <th class="text-center" style="font-size: 12px;" rowspan="2">Debitnote</th>
                                    <th class="text-center" style="font-size: 12px;" rowspan="2">ID Terjamin</th>
                                    <th class="text-center" style="font-size: 12px;" rowspan="2">Nama</th>
                                    <th class="text-center" style="font-size: 12px;" colspan="4">Status Kredit</th>
                                    <th class="text-center" style="font-size: 12px;" colspan="4">Data Pembatalan</th>
                                    <th class="text-center" style="font-size: 12px;" rowspan="2">Cabang</th>
                                </tr>
                                <tr>
                                    <th class="text-center" style="font-size:12px">Tenor</th>
                                    <th class="text-center" style="font-size:12px">Tgl. Asuransi</th>
                                    <th class="text-center" style="font-size:12px">Nilai Terjamin</th>
                                    <th class="text-center" style="font-size:12px">Nett IJP</th>
                                    <th class="text-center" style="font-size:12px">Status</th>
                                    <th class="text-center" style="font-size:12px">Type</th>
                                    <th class="text-center" style="font-size:12px">Tgl. Klaim</th>
                                    <th class="text-center" style="font-size:12px">Dokumen</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="font-size:12px">1</td>
                                    <td style="font-size:12px">Edit</td>
                                    <td style="font-size:12px">DN001</td>
                                    <td style="font-size:12px">TRJ-001</td>
                                    <td style="font-size:12px">Andatara</td>
                                    <td style="font-size:12px">12</td>
                                    <td style="font-size:12px">01-01-2026</td>
                                    <td style="font-size:12px">100.000.000</td>
                                    <td style="font-size:12px">5.000.000</td>
                                    <td style="font-size:12px">Aktif</td>
                                    <td style="font-size:12px">Kredit</td>
                                    <td style="font-size:12px">10-01-2025</td>
                                    <td style="font-size:12px">-</td>
                                    <td style="font-size:12px">Semarang</td>
                                </tr>
                                <tr>
                                    <td style="font-size:12px">1</td>
                                    <td style="font-size:12px">Edit</td>
                                    <td style="font-size:12px">DN001</td>
                                    <td style="font-size:12px">TRJ-001</td>
                                    <td style="font-size:12px">Andatara</td>
                                    <td style="font-size:12px">12</td>
                                    <td style="font-size:12px">01-01-2026</td>
                                    <td style="font-size:12px">100.000.000</td>
                                    <td style="font-size:12px">5.000.000</td>
                                    <td style="font-size:12px">Aktif</td>
                                    <td style="font-size:12px">Kredit</td>
                                    <td style="font-size:12px">10-01-2025</td>
                                    <td style="font-size:12px">-</td>
                                    <td style="font-size:12px">Semarang</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 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>

<!-- 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>
    $(function() {
        $('#dataklaim-batal').DataTable({
            scrollX: true,
            autoWidth: false,
            pageLength: 10,
            ordering: true,
            searching: true,
            info: true
        });
    });
</script>
<!-- <script>
    $(document).ready(function() {
        var table = $('#surety-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("showsurety") }}',
                // 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: 'Sertifikat',
                    name: 'Sertifikat',
                    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: 'NoKertas',
                    name: 'NoKertas',
                    render: function(data) {
                        return `${data}`;
                    },
                    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: 'Pekerjaan',
                    name: 'Pekerjaan',
                    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: 'NamaDinas',
                    name: 'NamaDinas',
                    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: 'Kota',
                    name: 'Kota',
                    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: 'IjpTotal',
                    name: 'IjpTotal',
                    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: 'SyaratDokumen',
                    name: 'SyaratDokumen',
                    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: '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">${data}</span>`;
                        // return `<span class="badge text-bg-success text-white">Primary</span>`;
                    }
                },
                {
                    data: 'CreatedAt',
                    name: 'CreatedAt',
                    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: 'CreatedAt',
                    name: 'CreatedAt',
                    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">2025-08-31</div>`;
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'SyaratDokumen',
                    name: 'SyaratDokumen',
                    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: 'IDKota',
                    name: 'IDKota',
                    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: 'id',
                    render: function(data, type, row, meta) {
                        // const token = row.IDKbg;
                        const idkbg = row.id_kbg_encrypted;
                        let produk = row.produk;
                        const editUrl = '';
                        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> -->

</body>

</html>

@endsection