@props([
    'id' => 'datatable',
    'exportColumns' => '[]',
    'order' => '[[0, "asc"]]',
    'title' => 'Data SIAD',
    'class' => '',
    'placeholder' => 'Cari data...',
    'exportable' => true,
])

@php
    $exportColsJson = is_array($exportColumns) ? json_encode($exportColumns) : $exportColumns;
    $orderJson = is_array($order) ? json_encode($order) : $order;

    $profile = \Schema::hasTable('village_profiles') ? \DB::table('village_profiles')->first() : null;
    $namaDesa      = ($profile && isset($profile->village_name)) ? $profile->village_name : 'Desa Siofabanua';
    $kecamatan     = ($profile && isset($profile->district_name)) ? $profile->district_name : 'Tuhemberua';
    $kabupaten     = ($profile && isset($profile->regency_name)) ? $profile->regency_name : 'Nias Utara';
    $alamatKantor  = ($profile && isset($profile->address)) ? $profile->address : 'Jalan Arah Tuhemberua Km. 28';
    $kodePos       = ($profile && isset($profile->postal_code)) ? $profile->postal_code : '22852';
    $teleponDesa   = ($profile && isset($profile->phone)) ? $profile->phone : '-';
    $emailDesa     = ($profile && isset($profile->email)) ? $profile->email : '-';
    $namaKades     = ($profile && isset($profile->signer_name)) ? $profile->signer_name : "WA'OZATULO ZEGA, S.Pd.";
    $jabatanKades  = ($profile && isset($profile->signer_position)) ? $profile->signer_position : "Pj. Kepala Desa Siofabanua";
    $nipKades      = ($profile && isset($profile->signer_nip)) ? $profile->signer_nip : '-';
    $logoUrl       = asset('images/logo.png');
    if ($profile && isset($profile->logo_path) && !empty($profile->logo_path)) {
        $logoUrl = asset('storage/' . $profile->logo_path);
    }
@endphp

<!-- MAIN TABLE CARD -->
<div class="card datatable-card">
    <div class="card-body datatable-card-body">
        <!-- FILTER BOX (NEW DESIGN) -->
        <div class="dt-filters-box">
            <div class="filter-controls-row">
                <!-- Search box is first -->
                <div class="filter-control-item filter-search">
                    <label class="filter-label">Cari Data</label>
                    <div class="input-group-filter">
                        <span class="input-group-icon"><i class="fas fa-search"></i></span>
                        <input type="text" id="{{ $id }}_search" class="form-control datatable-search-input" placeholder="{{ $placeholder }}">
                    </div>
                </div>

                @if(isset($filters))
                    <!-- Custom filters are rendered next -->
                    {{ $filters }}
                @endif

                @if($exportable)
                    <!-- Export buttons are aligned on the right in the same line -->
                    <div class="filter-control-item filter-actions ml-auto-desktop">
                        <label class="filter-label d-none d-md-block" style="height: 18px; margin-bottom: 0;">&nbsp;</label>
                        <div class="dt-buttons-wrapper">
                            @if(isset($buttons))
                                {{ $buttons }}
                            @endif
                            <button type="button" id="{{ $id }}_btn_excel" class="datatable-export-btn btn-excel">
                                <i class="fas fa-file-excel mr-1"></i> Excel
                            </button>
                            <button type="button" id="{{ $id }}_btn_print" class="datatable-export-btn btn-print">
                                <i class="fas fa-print mr-1"></i> Print
                            </button>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <div class="table-responsive">
            <table id="{{ $id }}" class="table table-custom-style w-100 {{ $class }}">
                {{ $slot }}
            </table>
        </div>
    </div>
</div>

@section('js')
    @parent
    <script>
    $(document).ready(function() {
        let exportCols = {!! $exportColsJson !!};
        let tableOrder = {!! $orderJson !!};

        let table = $('#{{ $id }}').DataTable({
            retrieve: true,
            order: tableOrder,
            buttons: [
                {
                    extend: 'excelHtml5',
                    exportOptions: { columns: exportCols },
                    title: '',
                    filename: 'SIAD_' + '{{ str_replace(" ", "_", $title) }}' + '_' + (new Date().toISOString().slice(0, 10)),
                    customize: function (xlsx) {
                        let sheet = xlsx.xl.worksheets['sheet1.xml'];
                        let sheetData = $('sheetData', sheet);
                        let numCols = exportCols.length || 7;
                        let lastColLetter = String.fromCharCode(64 + Math.min(numCols, 26));

                        // 1. Workbook Metadata
                        if (xlsx.docProps && xlsx.docProps['core.xml']) {
                            $('dc\\:title, title', xlsx.docProps['core.xml']).text('SIAD Desa Siofa Banua - {{ $title }}');
                            $('dc\\:creator, creator', xlsx.docProps['core.xml']).text('SIAD');
                        }

                        // 2. Shift existing data rows down by 14
                        let offset = 14;
                        $('row', sheetData).each(function () {
                            let r = parseInt($(this).attr('r'));
                            let newR = r + offset;
                            $(this).attr('r', newR);
                            $('c', this).each(function () {
                                let cellRef = $(this).attr('r');
                                let colLetter = cellRef.replace(/[0-9]/g, '');
                                $(this).attr('r', colLetter + newR);
                            });
                        });

                        // 3. Prepend Official Kop Surat & Metadata Rows
                        let printDate = '{{ \Carbon\Carbon::now()->translatedFormat("d F Y") }}';
                        let printTime = '{{ \Carbon\Carbon::now()->translatedFormat("H:i") }} WIB';
                        let printedBy = '{{ Auth::user()->name ?? "Admin" }}';
                        
                        let headerRowsXml = `
                            <row r="1"><c r="A1" t="inlineStr"><is><t>PEMERINTAH KABUPATEN {{ strtoupper($kabupaten) }}</t></is></c></row>
                            <row r="2"><c r="A2" t="inlineStr"><is><t>KECAMATAN {{ strtoupper($kecamatan) }}</t></is></c></row>
                            <row r="3"><c r="A3" t="inlineStr"><is><t>PEMERINTAH DESA {{ strtoupper($namaDesa) }}</t></is></c></row>
                            <row r="4"><c r="A4" t="inlineStr"><is><t>{{ $alamatKantor }} Kode Pos {{ $kodePos }} | Telp: {{ $teleponDesa }} | Email: {{ $emailDesa }}</t></is></c></row>
                            <row r="5"></row>
                            <row r="7"><c r="A7" t="inlineStr"><is><t>{{ strtoupper($title) }}</t></is></c></row>
                            <row r="8"><c r="A8" t="inlineStr"><is><t>Periode Data: Seluruh Data Terdaftar</t></is></c></row>
                            <row r="10"><c r="A10" t="inlineStr"><is><t>Tanggal Cetak: ${printDate}</t></is></c><c r="D10" t="inlineStr"><is><t>Dicetak Oleh: ${printedBy}</t></is></c></row>
                            <row r="11"><c r="A11" t="inlineStr"><is><t>Waktu Cetak: ${printTime}</t></is></c><c r="D11" t="inlineStr"><is><t>Sumber Data: SIAD Desa Siofa Banua</t></is></c></row>
                            <row r="13"></row>
                        `;

                        sheetData.prepend(headerRowsXml);

                        // 4. Merge Cells for Header Rows
                        let mergeCells = $('mergeCells', sheet);
                        if (mergeCells.length === 0) {
                            sheet.children().first().append('<mergeCells/>');
                            mergeCells = $('mergeCells', sheet);
                        }
                        mergeCells.append(`<mergeCell ref="A1:${lastColLetter}1"/>`);
                        mergeCells.append(`<mergeCell ref="A2:${lastColLetter}2"/>`);
                        mergeCells.append(`<mergeCell ref="A3:${lastColLetter}3"/>`);
                        mergeCells.append(`<mergeCell ref="A4:${lastColLetter}4"/>`);
                        mergeCells.append(`<mergeCell ref="A7:${lastColLetter}7"/>`);
                        mergeCells.append(`<mergeCell ref="A8:${lastColLetter}8"/>`);
                        mergeCells.attr('count', $('mergeCell', mergeCells).length);

                        // 5. Freeze Panes below table header
                        let sheetViews = $('sheetViews sheetView', sheet);
                        if (sheetViews.length > 0) {
                            sheetViews.append('<pane ySplit="15" topLeftCell="A16" activePane="bottomLeft" state="frozen"/>');
                        }
                    }
                },
                {
                    extend: 'print',
                    exportOptions: { columns: exportCols },
                    title: '',
                    customize: function (win) {
                        let titleText = '{{ strtoupper($title) }}';
                        let printedBy = '{{ Auth::user()->name ?? "Admin" }}';
                        let printDate = '{{ \Carbon\Carbon::now()->translatedFormat("d F Y") }}';
                        let printTime = '{{ \Carbon\Carbon::now()->translatedFormat("H:i") }} WIB';
                        
                        let headerHtml = `
                            <div class="report-container landscape">
                                <header class="kop-surat">
                                    <img src="{{ $logoUrl }}" class="kop-logo" alt="Logo" onerror="this.src='{{ asset('images/logo.png') }}';">
                                    <div class="kop-text">
                                        <h3 class="header-pemkab">PEMERINTAH KABUPATEN {{ strtoupper($kabupaten) }}</h3>
                                        <h2 class="header-kecamatan">KECAMATAN {{ strtoupper($kecamatan) }}</h2>
                                        <h1 class="header-desa">PEMERINTAH DESA {{ strtoupper($namaDesa) }}</h1>
                                        <p class="header-alamat">
                                            {{ $alamatKantor }} Kode Pos {{ $kodePos }} | Telp: {{ $teleponDesa }} | Email: {{ $emailDesa }}
                                        </p>
                                    </div>
                                </header>
                                <hr class="kop-divider">
                                <div class="report-title-section">
                                    <h2 class="title">${titleText}</h2>
                                </div>
                                <div class="report-meta-box">
                                    <div class="report-meta-grid">
                                        <div class="report-meta-item"><span class="meta-label">Tanggal Cetak</span><span class="meta-colon">:</span><span class="meta-value">${printDate}</span></div>
                                        <div class="report-meta-item"><span class="meta-label">Dicetak Oleh</span><span class="meta-colon">:</span><span class="meta-value">${printedBy}</span></div>
                                        <div class="report-meta-item"><span class="meta-label">Waktu Cetak</span><span class="meta-colon">:</span><span class="meta-value">${printTime}</span></div>
                                        <div class="report-meta-item"><span class="meta-label">Sumber Data</span><span class="meta-colon">:</span><span class="meta-value">Sistem Informasi Administrasi Desa (SIAD)</span></div>
                                    </div>
                                </div>
                                <div class="report-table-wrapper">
                        `;
                        
                        let footerHtml = `
                                </div>
                                <div class="signature-section">
                                    <div class="signature-box">
                                        <div class="sig-city-date">Siofabanua, ${printDate}</div>
                                        <div class="sig-title">Mengetahui,<br>{{ $jabatanKades }}</div>
                                        <div class="sig-name">{{ $namaKades }}</div>
                                        @if($nipKades && $nipKades !== '-')
                                            <div class="sig-nip">NIP. {{ $nipKades }}</div>
                                        @endif
                                    </div>
                                </div>
                                <footer class="report-footer">
                                    <div>Dokumen ini dihasilkan secara otomatis oleh <strong>Sistem Informasi Administrasi Desa (SIAD) {{ $namaDesa }}</strong></div>
                                    <div>Dicetak pada: ${printDate}, ${printTime}</div>
                                </footer>
                            </div>
                        `;

                        $(win.document.head).append('<link rel="stylesheet" href="{{ asset("css/report-print.css") }}">');
                        let $table = $(win.document.body).find('table');
                        $table.addClass('report-table');
                        $(win.document.body).addClass('report-body').html(headerHtml + $table[0].outerHTML + footerHtml);
                    }
                }
            ]
        });

        // Custom search binding
        $('#{{ $id }}_search').on('keyup change clear', function() {
            table.search(this.value).draw();
        });

        @if($exportable)
            $('#{{ $id }}_btn_excel').on('click', function() {
                table.button('.buttons-excel').trigger();
            });
            $('#{{ $id }}_btn_print').on('click', function() {
                table.button('.buttons-print').trigger();
            });
        @endif

        $(document).trigger('datatable:initialized:{{ $id }}', [table]);
    });
    </script>
@stop