@php
$imports = $imports ?? [];
@endphp

<style>
    /* Search input alignment */
    .roles-search {
        display: flex;
        align-items: center;
    }

    /* DataTables bottom bar */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info {
        font-size: 0.875rem;
        color: #6b7280;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        vertical-align: middle;
        line-height: normal;

    }

    .dataTables_wrapper .dataTables_length select {
        border: 1px solid #d1d5db;
        border-radius: 6px;
        padding: 4px 28px 4px 10px;
        margin: 0 6px;
        color: #374151;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 14px;
        cursor: pointer;
        font-size: 0.875rem;
    }

    /* Pagination */
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: none !important;
        background: none !important;
        padding: 6px 12px !important;
        border-radius: 6px !important;
        color: #374151 !important;
        cursor: pointer !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background-color: #2563eb !important;
        color: white !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background-color: #f3f4f6 !important;
        color: #374151 !important;
    }

    #kt_datatable_component4 td,
    #kt_datatable_component4 th {
        border-bottom: 1px solid #e5e7eb !important;
    }

    #kt_datatable_component4 thead tr {
        background-color: #f9fafb !important;
    }

    .import-error-file-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #2563eb;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
    }

    .import-error-file-link:hover {
        color: #1d4ed8;
        text-decoration: underline;
    }

    @media (max-width: 640px) {
        .roles-actions {
            flex-wrap: wrap;
        }

        .roles-search input {
            width: 100% !important;
        }

        .dataTables_wrapper .dataTables_paginate,
        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_info {
            width: 100%;
            justify-content: center;
        }
    }
</style>

<div class="component4-screen">
    <div class="management-toolbar mb-4">
        <div class="roles-actions flex justify-end gap-3">
            <div class="roles-search relative flex items-center">
                <i class="ki-filled ki-magnifier" style="position:absolute;right:20px;color:#6b7280;font-size:15px;pointer-events:none;"></i>
                <input
                    data-kt-datatable-search="#import_datatable"
                    id="import_search_input"
                    placeholder="Search import..."
                    type="text"
                    style="padding-left:34px;padding-right:12px;padding-top:8px;padding-bottom:8px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;color:#374151;background:#fff;outline:none;width:220px;" />
            </div>

            <button
                type="button"
                class="kt-btn common-secondary-btn roles-add-btn"
                id="import_add_btn"
                data-kt-modal-toggle="#import_modal"
                style="background-color:#2563eb;color:#fff;border-color:#2563eb;border-radius:8px;padding:8px 18px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;cursor:pointer;border:none;">
                <i class="ki-filled ki-plus"></i>
                Add Import
            </button>
        </div>
    </div>

    <div class="roles-panel">
        <div class="kt-card-table" style="border-radius:10px;border:1px solid #e5e7eb;overflow:hidden;background:#fff;">
            <div id="import_datatable_wrapper" class="p-0">
                <div class="kt-scrollable-x-auto" style="overflow-x:auto;">

                    <table class="kt-table kt-table-border roles-table w-full" id="import_datatable" style="width:100%;border-collapse:collapse;font-size:14px;">
                        <thead>
                            <tr style="background:#f9fafb;border-bottom:1px solid #e5e7eb;">
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">ID</th>
                                <!-- <th>Tenant Name</th> -->
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">Dataset</th>
                                <!-- <th>File Name</th> -->
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">Status</th>
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">Total Rows</th>
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">Success Rows</th>
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">Failed Rows</th>
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">Error Message</th>
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">Error file</th>
                                <th style="padding:12px 16px;text-align:left;font-weight:600;color:#374151;font-size:13px;white-space:nowrap;">Created At</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse($imports as $import)
                            @php
                            $errorFilePath = trim((string) ($import->error_file_path ?? ''));
                            $errorFileName = basename(str_replace('\\', '/', $errorFilePath));
                            @endphp
                            <tr style="border-bottom:1px solid #f3f4f6;" onmouseover="this.style.background='#f9fafb'" onmouseout="this.style.background='#fff'">
                                <td style="padding:12px 16px;color:#374151;">{{ $import->id }}</td>
                                <!-- <td style="padding:12px 16px;color:#374151;">{{ $import->project_name }}</td> -->
                                <td style="padding:12px 16px;color:#374151;">{{ $import->table_name }}</td>
                                <!-- <td style="padding:12px 16px;color:#374151;">{{ $import->file_name }}</td> -->
                                <td style="padding:12px 16px;">
                                    <span style="
                                        display:inline-block;
                                        padding:3px 10px;
                                        border-radius:999px;
                                        font-size:12px;
                                        font-weight:500;
                                        @if($import->status === 'completed')
                                        background:#dcfce7;color:#16a34a;
                                        @elseif($import->status === 'failed')
                                        background:#fee2e2;color:#dc2626;
                                        @elseif($import->status === 'processing')
                                        background:#dbeafe;color:#2563eb;
                                       @elseif($import->status === 'completed_with_errors')
                                       background:#ffedd5;color:#ea580c;
                                       @elseif($import->status === 'pending')
                                       background:#f3e8ff;color:#9333ea;
                                       @else
                                       background:#f3f4f6;color:#6b7280;
                                       @endif
                                    ">
                                        {{ ucfirst($import->status) }}
                                    </span>
                                </td>
                                <td style="padding:12px 16px;color:#374151;">{{ $import->total_rows }}</td>
                                <td style="padding:12px 16px;color:#374151;">{{ $import->success_rows }}</td>
                                <td style="padding:12px 16px;color:#374151;">{{ $import->failed_rows }}</td>

                                <td style="padding:12px 16px;color:#374151;">
                                    {{ $import->error_message ?? '-' }}
                                </td>

                                <td style="padding:12px 16px;color:#374151;">
                                    @if($errorFilePath !== '')
                                    <a
                                        href="{{ route('theme.default.import.error-file', $import->id) }}"
                                        class="import-error-file-link"
                                        title="{{ $errorFilePath }}">
                                        <i class="ki-filled ki-exit-down"></i>
                                        {{ $errorFileName ?: 'Download file' }}
                                    </a>
                                    @else
                                    -
                                    @endif
                                </td>

                                <td>
                                    {{ \Carbon\Carbon::parse($import->created_at)->format('d-m-Y') }}
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="9" style="padding:32px;text-align:center;color:#9ca3af;">
                                    No import records found
                                </td>
                            </tr>
                            @endforelse
                        </tbody>

                    </table>

                </div>
            </div>
        </div>
    </div>
</div>

{{-- MODAL --}}
<div class="kt-modal" data-kt-modal="true" id="import_modal" data-kt-modal-backdrop-static="true">
    <div class="kt-modal-content max-w-[600px] w-[95vw] top-[5%]">

        <div class="kt-modal-header py-4 px-5">
            <h3 class="kt-modal-title text-base font-semibold" id="import_modal_title">
                Add Import
            </h3>

            <button class="kt-btn kt-btn-sm kt-btn-icon kt-btn-dim shrink-0" data-kt-modal-dismiss="true">
                <i class="ki-filled ki-cross"></i>
            </button>
        </div>

        <div class="kt-modal-body p-5 lg:p-7.5">
            <form id="import_form"
                action="{{ route('theme.default.import.store') }}"
                method="POST"
                enctype="multipart/form-data">
                @csrf

                <input type="hidden" name="project_name" id="project_name" value="{{ $projectName }}">
                <input type="hidden" name="date_format" id="date_format" value="{{ $dateFormat }}">

                <div class="flex flex-col gap-2 mb-4">
                    <label class="text-sm font-semibold">Select Table</label>
                    <select name="table_name" id="import_ip" class="kt-input w-full form-control p-1 cursor-pointer">
                        <option value="">Select Table</option>
                        <option value="beneficiaries">Beneficiaries</option>
                        <option value="banks">Bank</option>
                        <option value="financials">Financial</option>
                        <option value="withdrawls">Withdrawl</option>
                        <option value="building_checks">Building Checks</option>
                    </select>
                    <div class="invalid-feedback hidden text-red-500"></div>
                </div>
                <div class="flex flex-col gap-2 mb-4" id="inspection_type_wrapper" style="display:none;">
                    <label class="text-sm font-semibold">Select Building Type</label>

                    <select name="inspection_type" id="inspection_type"
                        class="kt-input w-full form-control p-1 cursor-pointer">
                        <option value="">Select Type</option>
                        <option value="plinth">Plinth</option>
                        <option value="lintel">Lintel</option>
                        <option value="roof">Roof</option>
                    </select>
                </div>
                <!-- IP SELECT -->
                <div class="flex flex-col gap-2 mb-4">
                    <label class="text-sm font-semibold">Select IP</label>
                    <select name="ip_name" id="ip_name" class="kt-input w-full form-control p-1 cursor-pointer">
                        <option value="">Select IP</option>
                        @foreach($ips as $ip)
                        <option value='{{$ip->id}}'>{{$ip->name}}</option>
                        @endforeach
                    </select>
                    <div class="invalid-feedback hidden text-red-500"></div>
                </div>



                <!-- FILE INPUT -->
                <div id="fileInputBox" class="mt-3">
                    <label class="block font-medium mb-1">
                        Import File (CSV)
                    </label>

                    <div class="relative w-full">
                        <!-- Fake input -->
                        <input type="text"
                            id="file_name"
                            class="w-full border-2 border-dashed border-gray-300 rounded-lg px-3 py-3 bg-gray-50 cursor-pointer text-gray-400 text-sm text-center hover:border-blue-400 transition-colors"
                            placeholder="📂 Click to browse CSV file..."
                            readonly>

                        <!-- Real file input -->
                        <input type="file"
                            name="file"
                            id="fileInput"
                            class="absolute top-0 left-0 w-full h-full opacity-0 cursor-pointer"
                            accept=".csv">
                    </div>

                    <small id="fileError" class="text-red-500 hidden flex items-center gap-1">
                        ⚠️ Please upload a CSV file only!
                    </small>
                </div>

                <div class="flex justify-end gap-3 pt-4 mt-2 border-t border-gray-100">
                    <button type="button"
                        class="kt-btn kt-btn-light"
                        data-kt-modal-dismiss="true">
                        Cancel
                    </button>

                    <button type="submit"
                        class="kt-btn kt-btn-primary px-6"
                        id="import_submit_btn">
                        Save
                    </button>
                </div>
            </form>
        </div>

    </div>
</div>
<script>
    document.getElementById('import_form').addEventListener('submit', function(e) {
        e.preventDefault();

        const btn = document.getElementById('import_submit_btn');
        const table = document.getElementById('import_ip').value;
        const file = document.getElementById('fileInput').files[0];

        if (!table) {
            alert('Please select a table first.');
            return;
        }

        if (!file) {
            alert('Please choose a CSV file before saving.');
            return;
        }

        const formData = new FormData(this);
        btn.disabled = true;
        btn.innerText = 'Saving...';

        fetch(this.action, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: formData,
            })
            .then(async res => {
                const data = await res.json();
                if (res.ok && data.success) {
                    alert(data.message);
                    document.getElementById('import_form').reset();
                    const fileNameEl = document.getElementById('file_name');
                    fileNameEl.value = '';
                    fileNameEl.classList.remove('border-green-400', 'text-green-600', 'bg-green-50');
                    fileNameEl.classList.add('border-gray-300', 'text-gray-400');

                    const modalEl = document.getElementById('import_modal');
                    const modalInstance = KTModal.getInstance(modalEl);
                    if (modalInstance) {
                        modalInstance.hide();
                    } else {
                        modalEl.querySelector('[data-kt-modal-dismiss="true"]').click();
                    }

                    window.location.reload();
                } else {
                    alert('Import failed. Please try again.');
                }
            })
            .catch(() => {
                alert('Something went wrong.');
            })
            .finally(() => {
                btn.disabled = false;
                btn.innerText = 'Save';
            });
    });

    document.getElementById('fileInput').addEventListener('change', function() {
        const fileNameEl = document.getElementById('file_name');
        if (this.files.length > 0) {
            fileNameEl.value = '✅ ' + this.files[0].name;
            fileNameEl.classList.remove('border-gray-300', 'text-gray-400');
            fileNameEl.classList.add('border-green-400', 'text-green-600', 'bg-green-50');
            document.getElementById('fileError').classList.add('hidden');
        }
    });
    $(document).ready(function() {
        const $table = $('#import_datatable');
        let dt = null;

        if ($table.length && $.fn.DataTable && !$.fn.DataTable.isDataTable($table)) {
            $table.find('tbody td[colspan]').closest('tr').remove();

            dt = $table.DataTable({
                dom: 'rt<"flex justify-between items-center flex-wrap p-5 border-t border-input"<"flex items-center gap-2"li>p>',
                pageLength: 10,
                lengthMenu: [10, 25, 50, 100],
                autoWidth: false,
                language: {
                    lengthMenu: "Show _MENU_",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    emptyTable: "No records found.",
                }
            });
        }

        const searchInput = document.querySelector('[data-kt-datatable-search="#import_datatable"]');
        if (searchInput && dt) {
            searchInput.addEventListener('keyup', function() {
                dt.search(this.value).draw();
            });
        }
    });
    document.getElementById('import_ip').addEventListener('change', function() {
        const wrapper = document.getElementById('inspection_type_wrapper');

        if (this.value === 'building_checks') {
            wrapper.style.display = 'flex';
        } else {
            wrapper.style.display = 'none';
            document.getElementById('inspection_type').value = '';
        }
    });
</script>