@props(['tableId' => 'services', 'filename' => 'exported_data'])

<!-- Load XLSX & jsPDF -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script>
<style>
    .dropdown-menu a:hover {
        background-color: #f0f0f0;
        border-radius: 6px;
    }

    .btn-outline-primary {
        border: 2px solid #0d6efd;
        transition: 0.2s ease-in-out;
    }

    .btn-outline-primary:hover {
        background-color: #0d6efd;
        color: white;
    }

    .btn-export-split {
        display: flex;
        overflow: hidden;
        border: none;
        border-radius: 5px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .btn-export-label {
        background-color: #696cff;
        color: white;
        padding: 8px 16px;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .btn-export-action {
        background-color: #28a745;
        color: white;
        padding: 8px 12px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .btn-export-action:hover {
        background-color: #218838;
    }

    .dropdown-menu li a {
        font-size: 14px;
        padding: 8px 12px;
    }

    .dropdown-toggle::after {
        display: none !important;
    }
</style>
@php
    use Illuminate\Support\Facades\Auth;
    use App\Models\SchoolSetting;

    $schoolId = Auth::user()->school_id ?? null;
    $settings = SchoolSetting::where('school_id', $schoolId)->first();
    $dataExportEnabled = $settings->data_export ?? 0;
@endphp

@if ($dataExportEnabled)
    <div class="dropdown mt-2">
        <div class="btn-export-split" data-bs-toggle="dropdown" aria-expanded="false" style="cursor: pointer;">
            <div class="btn-export-label">EXPORT</div>
            <div class="btn-export-action">
                <i class="bx bx-download"></i>
            </div>
        </div>
        <ul class="dropdown-menu shadow-sm">
            <li>
                <a class="dropdown-item d-flex align-items-center gap-2"
                    onclick="exportData('{{ $tableId }}', '{{ $filename }}', 'pdf')">
                    <i class="bx bxs-file-pdf text-danger"></i> PDF
                </a>
            </li>
            <li>
                <a class="dropdown-item d-flex align-items-center gap-2"
                    onclick="exportData('{{ $tableId }}', '{{ $filename }}', 'excel')">
                    <i class="bx bxs-file text-success"></i> Excel
                </a>
            </li>
            <li>
                <a class="dropdown-item d-flex align-items-center gap-2"
                    onclick="exportData('{{ $tableId }}', '{{ $filename }}', 'csv')">
                    <i class="bx bx-file text-primary"></i> CSV
                </a>
            </li>
        </ul>
    </div>
@endif
<script>
    /**
     * Converts an Excel serial date number to a formatted string.
     */
    function excelSerialDateToJSDate(serial) {
        if (typeof serial !== 'number' || isNaN(serial) || serial < 1) {
            return serial;
        }

        const MS_PER_DAY = 86400000;
        let day = Math.floor(serial);
        let milliseconds = (day - 1) * MS_PER_DAY;

        let excelEpoch = new Date(Date.UTC(1900, 0, 1));
        let convertedDate = new Date(excelEpoch.getTime() + milliseconds);

        // Format the date as DD-MM-YYYY
        const d = convertedDate.getUTCDate().toString().padStart(2, '0');
        const m = (convertedDate.getUTCMonth() + 1).toString().padStart(2, '0');
        const y = convertedDate.getUTCFullYear();

        return `${d}-${m}-${y}`;
    }

    /**
     * Main function to export data.
     */
    function exportData(tableId, filename, type) {
        const table = document.getElementById(tableId);
        if (!table) {
            console.error('Table with ID "' + tableId + '" not found.');
            return;
        }

        // --- CORE FIX: Exclude the last column (Action Column) from the data ---

        // 1. Extract Headers and remove the last one
        let headers = Array.from(table.tHead.rows[0].cells).map(cell => cell.textContent.trim());
        headers.pop(); // Remove the last header (Action)

        // 2. Extract and Process Body Data
        let data = [];
        const createdDateIndex = headers.findIndex(h => h.includes('Created D'));
        const dueDateIndex = headers.findIndex(h => h.includes('Due Date'));
        // Note: The indices above are now correct for the *filtered* headers list.

        Array.from(table.tBodies[0].rows).forEach(row => {
            // Get all cell data, but exclude the very last cell in the row
            let rowData = Array.from(row.cells)
                .slice(0, -1) // <--- THIS LINE EXCLUDES THE LAST COLUMN
                .map(cell => cell.textContent.trim());

            // 3. Apply Date Conversion (only needed for PDF, but harmless here)
            if (createdDateIndex !== -1) {
                const value = parseFloat(rowData[createdDateIndex]);
                if (!isNaN(value) && value > 1000) {
                    rowData[createdDateIndex] = excelSerialDateToJSDate(value);
                }
            }

            if (dueDateIndex !== -1) {
                const value = parseFloat(rowData[dueDateIndex]);
                if (!isNaN(value) && value > 1000) {
                    rowData[dueDateIndex] = excelSerialDateToJSDate(value);
                }
            }
            data.push(rowData);
        });

        // ----------------------------------------------------------------------

        // 4. Export Logic
        if (type === 'excel' || type === 'csv') {
            // Reconstruct a temporary table structure for XLSX.js using headers and processed data
            const ws = XLSX.utils.aoa_to_sheet([headers, ...data]);
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Data");

            if (type === 'excel') {
                XLSX.writeFile(wb, `${filename}.xlsx`);
            } else { // csv
                XLSX.writeFile(wb, `${filename}.csv`);
            }
        } else if (type === 'pdf') {
            const {
                jsPDF
            } = window.jspdf;
            const doc = new jsPDF('landscape');

            doc.autoTable({
                head: [headers],
                body: data,
                styles: {
                    fontSize: 8
                },
            });
            doc.save(`${filename}.pdf`);
        }
    }
</script>