@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render('admin-kredit.laporan-slik') }}
@endsection

@section('content')
    <div class="grid">
        <div class="min-w-full border card border-agi-100 card-grid" data-datatable="false" data-datatable-page-size="10"
            data-datatable-state-save="false" id="laporan-slik-table"
            data-api-url="{{ route('admin-kredit.laporan-slik.datatables') }}">
            <div class="flex-wrap py-5 card-header bg-agi-50">
                <h3 class="card-title">
                    Laporan SLIK
                </h3>
                <div class="flex flex-wrap gap-2 lg:gap-5">
                    <div class="flex">
                        <label class="input input-sm">
                            <i class="ki-filled ki-magnifier"></i>
                            <input placeholder="Search Laporan SLIK" id="search" type="text" value="">
                        </label>
                    </div>
                    <div class="flex flex-wrap gap-2.5">
                        <div class="h-[24px] border border-r-gray-200"></div>
                        <a class="btn btn-sm btn-light" href="#" id="export-excel">
                            <i class="ki-filled ki-file-down"></i> Export Excel
                        </a>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="scrollable-x-auto">
                    <table
                        class="table text-sm font-medium text-gray-700 align-middle table-auto table-border min-w-[1200px]"
                        data-datatable-table="true">
                        <thead>
                            <tr>
                                <th class="w-14">
                                    <input class="checkbox checkbox-sm" data-datatable-check="true" type="checkbox" />
                                </th>
                                <th class="min-w-[100px]" data-datatable-column="sandi_bank">
                                    <span class="sort">
                                        <span class="sort-label">Sandi Bank</span>
                                        <span class="sort-icon"></span>
                                    </span>
                                </th>
                                <th class="min-w-[120px]" data-datatable-column="no_rekening">
                                    <span class="sort">
                                        <span class="sort-label">No Rekening</span>
                                        <span class="sort-icon"></span>
                                    </span>
                                </th>
                                <th class="min-w-[120px]" data-datatable-column="baki_debet">
                                    <span class="sort">
                                        <span class="sort-label">Baki Debet</span>
                                        <span class="sort-icon"></span>
                                    </span>
                                </th>
                                <th class="min-w-[100px]" data-datatable-column="status">
                                    <span class="sort">
                                        <span class="sort-label">Status</span>
                                        <span class="sort-icon"></span>
                                    </span>
                                </th>
                                <th class="min-w-[50px] text-center" data-datatable-column="actions">Aksi</th>
                            </tr>
                        </thead>
                    </table>
                </div>
                <div
                    class="flex-col gap-3 justify-center font-medium text-gray-600 card-footer md:justify-between md:flex-row text-2sm">
                    <div class="flex gap-2 items-center">
                        Show
                        <select class="w-16 select select-sm" data-datatable-size="true" name="perpage"> </select> per page
                    </div>
                    <div class="flex gap-4 items-center">
                        <span data-datatable-info="true"> </span>
                        <div class="pagination" data-datatable-pagination="true">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Responsive adjustments for table */
        @media (max-width: 768px) {
            .table-responsive {
                overflow-x: auto;
            }

            .modal-content {
                max-width: 95% !important;
                margin: 10px;
            }

            .grid-cols-1.md\:grid-cols-2 {
                grid-template-columns: 1fr;
            }
        }

        /* Ensure table is scrollable on small screens */
        .scrollable-x-auto {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Prevent text wrapping in table cells */
        .table th,
        .table td {
            white-space: nowrap;
            vertical-align: middle;
        }

        /* Allow wrapping for long text in detail modal */
        .modal-body .text-gray-900 {
            word-break: break-word;
        }
    </style>
@endpush

@push('scripts')
    <script>
        let dataTable;
    </script>
    <script type="module">
        /**
         * Inisialisasi DataTable untuk Laporan SLIK menggunakan KTDataTable
         */
        document.addEventListener('DOMContentLoaded', function() {
            const element = document.querySelector('#laporan-slik-table');
            const searchInput = document.getElementById('search');

            const apiUrl = element.getAttribute('data-api-url');

            // Konfigurasi DataTable menggunakan KTDataTable
            const dataTableOptions = {
                apiEndpoint: apiUrl,
                pageSize: 10,
                columns: {
                    select: {
                        render: (item, data, context) => {
                            const checkbox = document.createElement('input');
                            checkbox.className = 'checkbox checkbox-sm';
                            checkbox.type = 'checkbox';
                            checkbox.value = data.id.toString();
                            checkbox.setAttribute('data-datatable-row-check', 'true');
                            return checkbox.outerHTML.trim();
                        },
                    },
                    sandi_bank: {
                        title: 'Sandi Bank',
                    },
                    no_rekening: {
                        title: 'No Rekening',
                    },
                    baki_debet_formatted: {
                        title: 'Baki Debet',
                        render: (item, data) => {
                            return data.baki_debet_formatted || '-';
                        },
                    },
                    status_badge: {
                        title: 'Status',
                        render: (item, data) => {
                            return data.status_badge || '-';
                        },
                    },
                    actions: {
                        title: 'Aksi',
                        render: (item, data) => {
                            return `
                                <div class="flex gap-2">
                                    <button class="btn btn-sm btn-light btn-icon" onclick="showDetail(${data.id})" title="Detail">
                                        <i class="ki-filled ki-eye"></i>
                                    </button>
                                </div>
                            `;
                        },
                    }
                },
            };

            // Inisialisasi DataTable
            dataTable = new KTDataTable(element, dataTableOptions);
            dataTable.showSpinner();

            // Fungsi pencarian
            searchInput.addEventListener('input', function() {
                const searchValue = this.value.trim();
                dataTable.search(searchValue, true);
            });

            // Export Excel functionality
            document.getElementById('export-excel').addEventListener('click', function(e) {
                e.preventDefault();

                // Build export URL with current filters
                const params = new URLSearchParams();
                if (searchInput.value) params.append('search', searchInput.value);
                const exportUrl = '{{ route('admin-kredit.laporan-slik.export') }}?' + params.toString();
                window.open(exportUrl, '_blank');
            });
        });
    </script>

    <script>
        /**
         * Fungsi untuk menampilkan detail data Laporan SLIK
         * @param {number} id - ID data Laporan SLIK yang akan ditampilkan
         */
        function showDetail(id) {
            // Redirect ke halaman detail
            window.location.href = `{{ route('admin-kredit.laporan-slik.show', ':id') }}`.replace(':id', id);
        }
    </script>
@endpush