@extends('layouts.external.app')
@section('content')
<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">Custom Bond</h3>
                    <h6 class="fw-normal mb-0">Daftar Custom Bond</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/custombond/tambah') }}" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Custom 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="custombond-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;">Sertifikat</th>
                                    <th class="text-center" style="font-size: 12px;">Cabang</th>
                                    <th class="text-center" style="font-size: 12px;">Dokumen</th>
                                    <th class="text-center" style="font-size: 12px; width:7%">Nilai<br>Jaminan</th>
                                    <th class="text-center" style="font-size: 12px;">Total IJP</th>
                                    <th class="text-center" style="font-size: 12px;">Status</th>
                                    <th class="text-center" style="font-size: 12px;">Tgl Input</th>
                                    <th class="text-center" style="font-size: 12px;"></th>
                                </tr>
                            </thead>

                        </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="KITE">
                                KITE
                            </option>
                            <option value="KABER">
                                KABER
                            </option>
                            <option value="BC12">
                                BC12
                            </option>
                            <option value="PPJK">
                                PPJK
                            </option>
                            <option value="TPS">
                                TPS
                            </option>
                            <option value="PJT">
                                PJT
                            </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>
    $(document).ready(function() {
        var table = $('#custombond-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: '{{ route("showcustom") }}',
                // type: 'GET',
                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: 'Cabang',
                    name: 'Cabang',
                    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: 'DokumenSumber',
                    name: 'DokumenSumber',
                    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: 'NilaiJaminan',
                    name: 'NilaiJaminan',
                    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: 'Status',
                    name: 'Status',
                    render: function(data) {
                        let badgeClass = 'secondary'; // default: abu-abu
                        if (!data) return '-';
                        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) {
                        return data ? data.split("T")[0] : '';
                    },
                    createdCell: function(td) {
                        $(td).css('font-size', '12px');
                    }
                },
                {
                    data: 'id',
                    render: function(data, type, row, meta) {
                        const IDCb = row.id_cb_encrypted;
                        let produk = row.produk;
                        const editUrl = `{{ route('edit.custom', ['IDCb' => '__IDCUSTOM__']) }}`.replace('__IDCUSTOM__', IDCb);
                        const detailUrl = `{{ route('detail.custom', ['IDCb' => '__IDCUSTOM__']) }}`.replace('__IDCUSTOM__', IDCb);
                        // 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>
                            </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