@php
    $label = $assignedType === 'ruangan' ? 'Ruangan' : 'Personal';
@endphp

<x-app-layout>
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --danger-color: #f72585;
            --success-color: #4cc9f0;
            --warning-color: #f8961e;
            --light-color: #f8f9fa;
            --dark-color: #212529;
            --border-radius: 8px;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: #f5f7fa;
            color: var(--dark-color);
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }

        h1,
        h2,
        h3 {
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        h1 {
            font-size: 28px;
            border-bottom: 2px solid var(--primary-color);
            padding-bottom: 10px;
            display: flex;
            align-items: center;
        }

        h1 i {
            margin-right: 10px;
        }

        h2 {
            font-size: 22px;
            margin-top: 30px;
        }

        .card {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 20px;
            margin-bottom: 20px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 20px;
            border-radius: var(--border-radius);
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            font-size: 14px;
        }

        .btn i {
            margin-right: 8px;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }

        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }

        .btn-danger:hover {
            background-color: #d1145a;
            transform: translateY(-2px);
        }

        .btn-success {
            background-color: var(--success-color);
            color: white;
        }

        .btn-success:hover {
            background-color: #3ab4d8;
            transform: translateY(-2px);
        }

        .alert {
            padding: 12px 15px;
            border-radius: var(--border-radius);
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

        .alert-success {
            background-color: #d1fae5;
            color: #065f46;
            border-left: 4px solid #10b981;
        }

        .alert-error {
            background-color: #fee2e2;
            color: #b91c1c;
            border-left: 4px solid #ef4444;
        }

        .alert i {
            margin-right: 10px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-control {
            width: 100%;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: var(--border-radius);
            font-size: 14px;
            transition: var(--transition);
        }

        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.2);
        }

        .file-input {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .file-input input[type="file"] {
            display: none;
        }

        .file-input label {
            padding: 10px 15px;
            background-color: var(--light-color);
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
        }

        .file-input label:hover {
            background-color: #e9ecef;
        }

        .file-name {
            font-size: 14px;
            color: #6c757d;
        }

        .table-container {
            overflow-x: auto;
            margin-bottom: 20px;
            border-radius: var(--border-radius);
            box-shadow: 0 0 0 1px #e9ecef;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: 14px;
        }

        th,
        td {

            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }

        th {
            background-color: #f8f9fa;
            font-weight: 500;
            color: var(--dark-color);
            position: sticky;
            top: 0;
            cursor: pointer;
            transition: var(--transition);
        }

        th:hover {
            background-color: #e9ecef;
        }

        th i {
            margin-left: 5px;
            color: #adb5bd;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        .error-cell {
            background-color: #fff0f3;
            color: #d90429;
            position: relative;
        }

        .error-cell::after {
            content: '!';
            position: absolute;
            top: 2px;
            right: 2px;
            color: #d90429;
            font-weight: bold;
        }

        .pagination-container {
            display: flex;
            justify-content: center;
            margin: 20px 0;
        }

        .stats-container {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .stat-card {
            flex: 1;
            min-width: 200px;
            background: white;
            border-radius: var(--border-radius);
            padding: 15px;
            box-shadow: var(--box-shadow);
            display: flex;
            flex-direction: column;
        }

        .stat-card h4 {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 10px;
        }

        .stat-card p {
            font-size: 24px;
            font-weight: 500;
            color: var(--dark-color);
        }

        .stat-card .error-stat {
            color: var(--danger-color);
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: var(--transition);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background: white;
            border-radius: var(--border-radius);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            transform: translateY(-20px);
            transition: var(--transition);
            position: relative;
        }

        .modal-overlay.active .modal-content {
            transform: translateY(0);
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            margin: 0;
            display: flex;
            align-items: center;
        }

        .modal-header .close-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: #6c757d;
            transition: var(--transition);
        }

        .modal-header .close-btn:hover {
            color: var(--danger-color);
        }

        .modal-body {
            padding: 20px;
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1001;
            flex-direction: column;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .no-data {
            text-align: center;
            padding: 40px 20px;
            color: #6c757d;
        }

        .no-data i {
            font-size: 50px;
            color: #dee2e6;
            margin-bottom: 15px;
        }

        .no-data p {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .action-buttons {
            display: flex;
            gap: 10px;
            margin-top: 27px;
            flex-wrap: wrap;
        }

        /* Preview Dialog Table Styles */
        #preview-table {
            width: 100%;
            table-layout: auto;
            /* Changed from fixed to auto for better content-based sizing */
            border-collapse: collapse;
            font-size: 14px;
        }

        #preview-table th,
        #preview-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
            white-space: nowrap;
            min-width: 120px;
            /* Minimum width for all cells */
            max-width: 300px;
            /* Maximum width to prevent overly wide cells */
        }

        #preview-table th {
            background-color: #f8f9fa;
            font-weight: 500;
            color: #212529;
            position: sticky;
            top: 0;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        #preview-table th:hover {
            background-color: #e9ecef;
        }

        #preview-table tr:hover {
            background-color: #f8f9fa;
        }

        /* Specific column widths */
        #preview-table th:nth-child(1),
        #preview-table td:nth-child(1) {
            width: 60px;
            /* No column */
        }

        #preview-table th:nth-child(2),
        #preview-table td:nth-child(2) {
            width: 150px;
            /* ID Barang */
        }

        #preview-table th:nth-child(3),
        #preview-table td:nth-child(3) {
            width: 120px;
            /* Kodefikasi */
        }

        #preview-table th:nth-child(4),
        #preview-table td:nth-child(4) {
            width: 200px;
            /* Nama */
        }

        #preview-table th:nth-child(5),
        #preview-table td:nth-child(5) {
            width: 150px;
            /* Merk */
        }

        #preview-table th:nth-child(6),
        #preview-table td:nth-child(6) {
            width: 150px;
            /* Penempatan */
        }

        #preview-table th:nth-child(7),
        #preview-table td:nth-child(7) {
            width: 100px;
            /* Kondisi */
        }

        #preview-table th:nth-child(8),
        #preview-table td:nth-child(8) {
            width: 100px;
            /* Status */
        }

        #preview-table th:nth-child(9),
        #preview-table td:nth-child(9) {
            width: 80px;
            /* Tahun */
        }

        #preview-table th:nth-child(10),
        #preview-table td:nth-child(10) {
            width: 200px;
            /* Keterangan */
        }

        /* Error cells */
        .error-cell {
            background-color: #fff0f3;
            color: #d90429;
            position: relative;
        }

        .error-cell::after {
            content: '!';
            position: absolute;
            top: 2px;
            left: 5px;
            color: #d90429;
            font-weight: bold;
        }

        /* Table container */
        .table-container {
            overflow-x: auto;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 0 0 1px #e9ecef;
            max-width: 100%;
        }

        /* For long text in cells */
        #preview-table td {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            .stats-container {
                flex-direction: column;
                gap: 10px;
            }

            .stat-card {
                min-width: 100%;
            }

            th,
            td {
                padding: 8px 10px;
                font-size: 13px;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <h1><i class="fas fa-boxes"></i> Barang Management</h1>



        @if(session('success'))
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i> {{ session('success') }}
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-error">
            <i class="fas fa-exclamation-circle"></i> {{ session('error') }}
        </div>
        @endif

        <div class="card">
            <h3><i class="fas fa-file-import"></i> Import Data</h3>
            <form id="upload-form" enctype="multipart/form-data">
                <div class="form-group file-input">
                    <input type="file" name="file" id="file-input" required>
                    <label for="file-input">
                        <i class="fas fa-file-excel" style="margin-right: 8px;"> </i> Choose Excel File
                    </label>
                    <span id="file-name" class="file-name">No file chosen</span>
                </div>
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-eye"></i> Preview Import
                </button>
            </form>
        </div>

        <div id="preview-container" class="modal-overlay">
            <div class="modal-content">
                <div class="modal-header">
                    <h3><i class="fas fa-search"></i> Import Preview</h3>
                    <button class="close-btn" onclick="closePreview()">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="stats-container">
                        <div class="stat-card">
                            <h4>Total Rows</h4>
                            <p id="preview-total">0</p>
                        </div>
                        <div class="stat-card">
                            <h4>Duplicates</h4>
                            <p id="preview-duplicates" class="error-stat">0</p>
                        </div>
                        <div class="stat-card">
                            <h4>Missing Penempatan</h4>
                            <p id="preview-empty-penempatan" class="error-stat">0</p>
                        </div>
                    </div>

                    <div class="table-container">
                        <table id="preview-table"></table>
                    </div>

                    <div class="pagination-container" id="pagination-preview"></div>

                    <button id="save-btn" class="btn btn-success" style="width: 100%;">
                        <i class="fas fa-check"></i> Clean and Save Data
                    </button>
                </div>
            </div>
        </div>

        <div style="display: flex; flex-direction:row;">
            <h2><i class="fas fa-database"></i> Data in Database</h2>
            <div class="action-buttons" style="margin-left : 20px; max-height: 40px;">
                <button id="empty-db-btn" class="btn btn-danger">
                    <i class="fas fa-trash-alt"></i> Empty Database
                </button>
            </div>
        </div>

        <div class="stats-container">
            <div class="stat-card">
                <h4>Total Items</h4>
                <p>{{ count($barangs) }}</p>
            </div>
        </div>

        <div class="table-container">
            <table id="database-table">
                <thead>
                    <tr>
                        <th onclick="sortTable(0)">No <i class="fas fa-sort"></i></th>
                        <th onclick="sortTable(1)">ID Barang <i class="fas fa-sort"></i></th>
                        <th onclick="sortTable(2)">Nama <i class="fas fa-sort"></i></th>
                        <th onclick="sortTable(3)">Merk <i class="fas fa-sort"></i></th>
                        <th onclick="sortTable(4)">Penempatan <i class="fas fa-sort"></i></th>
                        <th onclick="sortTable(5)">Tahun <i class="fas fa-sort"></i></th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div class="pagination-container" id="pagination-db"></div>

        <div id="no-data-db" class="no-data" style="display:none;">
            <i class="fas fa-box-open"></i>
            <p>Database is empty</p>
            <p>Import an Excel file to get started</p>
        </div>
    </div>

    <div id="loading-overlay" class="loading-overlay" style="display: none;">
        <div class="spinner"></div>
        <p>Processing your data...</p>
    </div>

    <script>
        const allBarangs = @json($barangs);

        // File input display
        document.getElementById('file-input').addEventListener('change', function(e) {
            const fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
            document.getElementById('file-name').textContent = fileName;
        });

        function renderDatabasePage(data, offset = 0) {
            const tbody = document.querySelector("#database-table tbody");
            tbody.innerHTML = '';

            if (!data.length) {
                document.getElementById('database-table').style.display = 'none';
                document.getElementById('pagination-db').style.display = 'none';
                document.getElementById('no-data-db').style.display = 'block';
                return;
            }

            document.getElementById('database-table').style.display = 'table';
            document.getElementById('pagination-db').style.display = 'flex';
            document.getElementById('no-data-db').style.display = 'none';

            data.forEach((b, i) => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${offset + i + 1}</td>
                    <td>${b.id_barang}</td>
                    <td>${b.nama}</td>
                    <td>${b.merk}</td>
                    <td>${b.penempatan}</td>
                    <td>${b.tahun}</td>
                `;
                tbody.appendChild(tr);
            });
        }

        if (allBarangs.length) {
            $('#pagination-db').pagination({
                dataSource: allBarangs,
                pageSize: 10,
                callback: function(data, pagination) {
                    renderDatabasePage(data, (pagination.pageNumber - 1) * pagination.pageSize);
                }
            });
        } else {
            document.getElementById('database-table').style.display = 'none';
            document.getElementById('pagination-db').style.display = 'none';
            document.getElementById('no-data-db').style.display = 'block';
        }

        const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
        let rawData = [];

        function closePreview() {
            document.getElementById('preview-container').classList.remove('active');
        }

        function renderPreviewPage(dataSubset, offset = 0) {
            const table = document.getElementById('preview-table');
            table.innerHTML = '';

            // Header
            const header = document.createElement('tr');
            ['No', 'ID Barang', 'Kodefikasi', 'Nama', 'Merk', 'Penempatan', 'Kondisi', 'Status', 'Tahun', 'Keterangan'].forEach(h => {
                const th = document.createElement('th');
                th.textContent = h;
                header.appendChild(th);
            });
            table.appendChild(header);

            dataSubset.forEach((row, index) => {
                if (!Array.isArray(row) || row.length < 9) return; // skip incomplete rows

                const tr = document.createElement('tr');
                const id = row[0]?.trim();
                const penempatan = row[4]?.trim();
                const isDuplicate = rawData.filter(r => r[0] === id).length > 1 || row.__exists;
                const isEmptyPenempatan = !penempatan;

                // Row number
                const tdNum = document.createElement('td');
                tdNum.textContent = offset + index + 1;
                tr.appendChild(tdNum);

                // Limit to first 9 columns only
                for (let i = 0; i < 9; i++) {
                    const td = document.createElement('td');
                    td.textContent = row[i] ?? '';
                    if ((i === 0 && isDuplicate) || (i === 4 && isEmptyPenempatan)) {
                        td.classList.add('error-cell');
                    }
                    tr.appendChild(td);
                }

                table.appendChild(tr);
            });
        }

        document.getElementById('upload-form').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            formData.append('_token', csrfToken);
            document.getElementById('loading-overlay').style.display = 'flex';

            axios.post("{{ route('import.preview') }}", formData)
                .then(res => {
                    rawData = res.data.data.filter(row => row.some(cell => cell && cell.toString().trim() !== ''));
                    const existing = res.data.existing_ids ?? [];

                    // Mark existing
                    rawData.forEach(row => row.__exists = existing.includes(row[0]?.trim()));

                    // Count duplicates and empty penempatan
                    let duplicateCount = 0;
                    let emptyPenempatanCount = 0;
                    const seen = new Set();

                    rawData.forEach(row => {
                        const id = row[0]?.trim();
                        const penempatan = row[4]?.trim();

                        if (!penempatan) emptyPenempatanCount++;

                        if (seen.has(id) || row.__exists) {
                            duplicateCount++;
                        } else {
                            seen.add(id);
                        }
                    });

                    // Update preview counts
                    document.getElementById('preview-total').textContent = rawData.length;
                    document.getElementById('preview-duplicates').textContent = duplicateCount;
                    document.getElementById('preview-empty-penempatan').textContent = emptyPenempatanCount;

                    // Render pagination
                    $("#pagination-preview").pagination({
                        dataSource: rawData,
                        pageSize: 10,
                        callback: function(data, pagination) {
                            renderPreviewPage(data, (pagination.pageNumber - 1) * pagination.pageSize);
                        }
                    });

                    document.getElementById('loading-overlay').style.display = 'none';
                    document.getElementById('preview-container').classList.add('active');
                })
                .catch(err => {
                    document.getElementById('loading-overlay').style.display = 'none';
                    alert('Error: ' + (err.response?.data?.message || err.message));
                });
        });

        document.getElementById('save-btn').addEventListener('click', function() {
            if (!confirm('Are you sure you want to clean and save this data?')) return;

            document.getElementById('loading-overlay').style.display = 'flex';

            axios.post("{{ route('import.save') }}", {
                    _token: csrfToken
                })
                .then(() => location.reload())
                .catch(err => {
                    document.getElementById('loading-overlay').style.display = 'none';
                    alert('Error: ' + (err.response?.data?.message || err.message));
                });
        });

        // Simple sorting
        function sortTable(columnIndex) {
            const table = document.getElementById("database-table");
            const rows = Array.from(table.querySelectorAll("tbody tr"));
            const asc = table.dataset.sortOrder !== 'asc';
            table.dataset.sortOrder = asc ? 'asc' : 'desc';

            // Update sort icons
            table.querySelectorAll('th i').forEach(icon => {
                icon.className = 'fas fa-sort';
            });
            const currentHeader = table.querySelectorAll('th')[columnIndex];
            const sortIcon = currentHeader.querySelector('i');
            sortIcon.className = asc ? 'fas fa-sort-up' : 'fas fa-sort-down';

            rows.sort((a, b) => {
                const cellA = a.children[columnIndex].innerText;
                const cellB = b.children[columnIndex].innerText;
                return asc ? cellA.localeCompare(cellB, undefined, {
                    numeric: true
                }) : cellB.localeCompare(cellA, undefined, {
                    numeric: true
                });
            });

            const tbody = table.querySelector("tbody");
            tbody.innerHTML = '';
            rows.forEach(r => tbody.appendChild(r));
        }

        document.getElementById('empty-db-btn').addEventListener('click', function() {
            if (!confirm('This will delete ALL data from the database. Are you absolutely sure?')) return;

            document.getElementById('loading-overlay').style.display = 'flex';

            axios.post("{{ route('import.empty') }}", {
                    _token: csrfToken
                })
                .then(() => location.reload())
                .catch(err => {
                    document.getElementById('loading-overlay').style.display = 'none';
                    alert('Error: ' + (err.response?.data?.message || err.message));
                });
        });
    </script>
</x-app-layout>