@extends('layouts.apex')

@section('title', 'Database Management')

@push('styles')
<style>
    /* DataTables loading overlay */
    .dt-loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        border-radius: 12px;
    }
    .dt-loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #667eea;
        border-radius: 50%;
        animation: dt-spin 1s linear infinite;
    }
    @keyframes dt-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>
@endpush

@section('content')
<div class="page-header">
    <div class="page-header-content">
        <div>
            <h1 class="page-header-title">Database Management</h1>
            <p class="page-header-subtitle">Upload & manage database backups</p>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploadModal">
            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m0-4l4 4m4 4v8m-4-8h8"/>
            </svg>
            Upload SQL File
        </button>
    </div>
</div>

<div class="page-body">
    <!-- Summary Cards -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
        <!-- Total Uploads -->
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 1.5rem; color: white; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);">
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <div>
                    <div style="font-size: 0.875rem; opacity: 0.9; margin-bottom: 0.5rem; font-weight: 500;">Total Uploads</div>
                    <div style="font-size: 2rem; font-weight: 700;" id="totalUploads">0</div>
                </div>
                <div style="background: rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 1rem;">
                    <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.707.293H19a2 2 0 012 2v1a2 2 0 01-2 2h-1a2 2 0 01-2-2v-1a2 2 0 012-2h3a3 3 0 013 3v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V9a2 2 0 012-2h2a2 2 0 012-2v4a2 2 0 01-2 2z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Completed -->
        <div style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border-radius: 12px; padding: 1.5rem; color: white; box-shadow: 0 4px 15px rgba(17, 153, 142, 0.4);">
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <div>
                    <div style="font-size: 0.875rem; opacity: 0.9; margin-bottom: 0.5rem; font-weight: 500;">Completed</div>
                    <div style="font-size: 2rem; font-weight: 700;" id="completedUploads">0</div>
                </div>
                <div style="background: rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 1rem;">
                    <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Pending -->
        <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 12px; padding: 1.5rem; color: white; box-shadow: 0 4px 15px rgba(240, 147, 251, 0.4);">
            <div style="display: flex; align-items: center; justify-content: space-between;">
                <div>
                    <div style="font-size: 0.875rem; opacity: 0.9; margin-bottom: 0.5rem; font-weight: 500;">Pending</div>
                    <div style="font-size: 2rem; font-weight: 700;" id="pendingUploads">0</div>
                </div>
                <div style="background: rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 1rem;">
                    <svg width="32" height="32" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <!-- Upload History Table -->
    <div style="background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); overflow: hidden; position: relative;">
        <div id="tableLoading" class="dt-loading">
            <div class="dt-loading-spinner"></div>
        </div>
        <div style="padding: 1.5rem; border-bottom: 1px solid #e5e7eb;">
            <h5 style="margin: 0; font-size: 1.125rem; font-weight: 600; color: #111827;">Upload History</h5>
        </div>
        <div style="padding: 1.5rem;">
            <table id="databaseTable" class="table table-hover" style="margin-bottom: 0; width: 100%;">
                <thead>
                    <tr style="background: #f9fafb; border-bottom: 2px solid #e5e7eb;">
                        <th style="padding: 1rem; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb;">#</th>
                        <th style="padding: 1rem; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb;">File Info</th>
                        <th style="padding: 1rem; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb;">Tables</th>
                        <th style="padding: 1rem; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb;">Tables List</th>
                        <th style="padding: 1rem; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb;">Status</th>
                        <th style="padding: 1rem; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb;">Executed At</th>
                        <th style="padding: 1rem; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb;">Uploaded By</th>
                        <th style="padding: 1rem; font-weight: 600; color: #374151; border-bottom: 2px solid #e5e7eb; text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div id="uploadModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius: 12px; border: none; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);">
            <form id="uploadForm" action="{{ route('database.upload') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div style="padding: 1.5rem; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between;">
                    <h5 style="margin: 0; font-size: 1.25rem; font-weight: 600; color: #111827;">Upload SQL File</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" style="font-size: 1.5rem;"></button>
                </div>
                <div style="padding: 1.5rem;">
                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; padding: 1.25rem; margin-bottom: 1.5rem; color: white;">
                        <div style="display: flex; align-items: start; gap: 0.75rem;">
                            <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink: 0; margin-top: 0.125rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            <div>
                                <div style="font-weight: 600; margin-bottom: 0.5rem;">Informasi Penting:</div>
                                <ul style="margin: 0; padding-left: 1.25rem; font-size: 0.875rem; opacity: 0.95;">
                                    <li>Upload file .SQL untuk restore database</li>
                                    <li>Semua tabel dengan prefix 't' akan di-DROP terlebih dahulu</li>
                                    <li>Tabel akan dibuat ulang sesuai dengan file SQL</li>
                                    <li>Data akan diperbarui (restore/update)</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div style="margin-bottom: 1.25rem;">
                        <label style="display: block; font-weight: 500; margin-bottom: 0.5rem; color: #374151;">SQL File <span style="color: #ef4444;">*</span></label>
                        <div class="input-group">
                            <input type="file" name="sql_file" id="sql_file" class="form-control" accept=".sql,.txt" required style="border-radius: 8px 0 0 8px; padding: 0.75rem; border: 1px solid #d1d5db;">
                            <span class="input-group-text" style="background: #f9fafb; border-radius: 0 8px 8px 0; border-left: none; color: #6b7280; font-size: 0.875rem;">
                                .sql, .txt
                            </span>
                        </div>
                        <small style="color: #6b7280; font-size: 0.875rem; margin-top: 0.25rem; display: block;">Format: .sql atau .txt (Max 10MB)</small>
                    </div>

                    <div>
                        <label style="display: block; font-weight: 500; margin-bottom: 0.5rem; color: #374151;">Preview Tables Detected:</label>
                        <div id="previewTables" style="background: #f9fafb; padding: 1rem; border-radius: 8px; min-height: 100px; border: 1px solid #e5e7eb;">
                            <small style="color: #9ca3af; display: block; text-align: center; padding: 1rem 0;">Upload file untuk melihat tabel yang akan diproses...</small>
                        </div>
                    </div>
                </div>
                <div style="padding: 1.5rem; background: #f9fafb; border-top: 1px solid #e5e7eb; display: flex; gap: 0.75rem; justify-content: flex-end; border-radius: 0 0 12px 12px;">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" style="border: 1px solid #d1d5db; color: #374151; padding: 0.625rem 1.25rem; font-weight: 500;">
                        Batal
                    </button>
                    <button type="submit" class="btn btn-primary" id="uploadBtn" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none; padding: 0.625rem 1.25rem; font-weight: 500;">
                        <span id="uploadBtnText">
                            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="vertical-align: text-bottom; margin-right: 0.5rem;">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m0-4l4 4m4 4v8m-4-8h8"/>
                            </svg>
                            Upload & Process
                        </span>
                        <span id="uploadBtnLoading" style="display: none;">
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="width: 1rem; height: 1rem; border-width: 0.15em; margin-right: 0.5rem; display: inline-block;"></span>
                            <span style="display: inline-block;">Uploading...</span>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Details Modal -->
<div id="detailsModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="border-radius: 12px; border: none; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);">
            <div style="padding: 1.5rem; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: space-between;">
                <h5 style="margin: 0; font-size: 1.25rem; font-weight: 600; color: #111827;">Upload Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" style="font-size: 1.5rem;"></button>
            </div>
            <div style="padding: 1.5rem; max-height: 70vh; overflow-y: auto;">
                <div id="detailsContent">
                    <!-- Details will be loaded here -->
                </div>
            </div>
            <div style="padding: 1.5rem; background: #f9fafb; border-top: 1px solid #e5e7eb; display: flex; gap: 0.75rem; justify-content: flex-end; border-radius: 0 0 12px 12px;">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal" style="border: 1px solid #d1d5db; color: #374151; padding: 0.625rem 1.25rem; font-weight: 500;">
                    Tutup
                </button>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<style>
#databaseTable_wrapper {
    padding: 0;
}

#databaseTable thead th {
    white-space: nowrap;
}

#databaseTable tbody td {
    vertical-align: middle;
}

.page-item.active .page-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
}

.page-link {
    color: #667eea;
}

.page-link:hover {
    color: #764ba2;
}

.dataTables_length select,
.dataTables_filter input {
    border-radius: 6px;
    border: 1px solid #d1d5db;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.dataTables_filter input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

#databaseTable_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    margin-top: -20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: #667eea;
    font-weight: 500;
}

/* DataTables loading overlay */
.dt-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-radius: 12px;
}
.dt-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #667eea;
    border-radius: 50%;
    animation: dt-spin 1s linear infinite;
}
@keyframes dt-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

<script>
$(document).ready(function() {
    console.log('Page loaded, initializing DataTable...');
    let databaseTable;

    // Initialize DataTable
    try {
        databaseTable = $('#databaseTable').DataTable({
            processing: true,
            serverSide: true,
            pageLength: 10,
            lengthMenu: [[10, 25, 50, 100], [10, 25, 50, 100]],
            scrollX: false,
            responsive: true,
            autoWidth: false,
            dom: "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                 "<'row'<'col-sm-12'tr>>" +
                 "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
            ajax: {
                url: '{{ route("database.data") }}',
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: function(d) {
                    // Add any additional data if needed
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTable error:', xhr.status, xhr.responseText);
                    $('#tableLoading').fadeOut();
                    $('#databaseTable tbody').html(
                        '<tr><td colspan="8" style="text-align: center; padding: 2rem; color: #ef4444;">' +
                        '<div style="margin-bottom: 0.5rem;"><strong>Error loading data</strong></div>' +
                        '<div style="font-size: 0.875rem;">Please refresh the page or try again later.</div>' +
                        '</td></tr>'
                    );
                }
            },
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false, width: '50px' },
                { data: 'file_info', name: 'file_name', width: '250px' },
                { data: 'tables_count', name: 'tables_affected', orderable: false, searchable: false, width: '120px' },
                { data: 'tables_list', name: 'tables_processed', orderable: false, searchable: false, width: '300px' },
                { data: 'status_badge', name: 'status', orderable: false, searchable: false, width: '120px' },
                { data: 'executed_at', name: 'executed_at', width: '150px' },
                { data: 'uploaded_by', name: 'uploaded_by', width: '200px' },
                { data: 'action', orderable: false, searchable: false, className: 'text-end', width: '150px' }
            ],
            order: [[5, 'desc']],
            language: {
                sEmptyTable: "Tidak ada data tersedia",
                sInfo: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                sInfoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
                sInfoFiltered: "(difilter dari _MAX_ total data)",
                sInfoPostFix: "",
                sInfoThousands: ",",
                sLengthMenu: "Tampilkan _MENU_ data",
                sLoadingRecords: "Memuat...",
                sProcessing: "Memproses...",
                sSearch: "Cari:",
                sSearchPlaceholder: "Ketik untuk mencari...",
                sZeroRecords: "Tidak ditemukan data yang cocok",
                oPaginate: {
                    sFirst: "Pertama",
                    sLast: "Terakhir",
                    sNext: "Selanjutnya",
                    sPrevious: "Sebelumnya"
                }
            },
            drawCallback: function() {
                console.log('DataTable draw callback triggered');
                $('#tableLoading').fadeOut();
                // Update summary cards after table render
                updateSummaryCards();
            },
            initComplete: function() {
                console.log('DataTable init complete');
                $('#tableLoading').fadeOut();
                // Initial summary update
                updateSummaryCards();
            }
        });

        console.log('DataTable initialized successfully');
    } catch (e) {
        console.error('DataTable initialization error:', e);
        $('#tableLoading').fadeOut();
    }

    // File input change handler - preview tables
    $('#sql_file').on('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const content = e.target.result;
                const tables = parseTablesFromSQL(content);

                if (tables.length > 0) {
                    let html = '<div style="margin-bottom: 0.5rem; font-weight: 600; color: #374151;">Tables yang akan diproses:</div>';
                    html += '<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">';
                    tables.forEach(function(table) {
                        html += '<span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.25rem 0.75rem; border-radius: 6px; font-size: 0.875rem; font-family: monospace;">' + table + '</span>';
                    });
                    html += '</div>';
                    $('#previewTables').html(html);
                } else {
                    $('#previewTables').html('<small style="color: #9ca3af; display: block; text-align: center; padding: 1rem 0;">Tidak ada tabel yang terdeteksi dalam file SQL.</small>');
                }
            };
            reader.readAsText(file);
        }
    });

    // Form submit handler
    $('#uploadForm').on('submit', function(e) {
        e.preventDefault();

        const formData = new FormData(this);
        const submitBtn = $('#uploadBtn');
        const submitBtnText = $('#uploadBtnText');
        const submitBtnLoading = $('#uploadBtnLoading');

        submitBtn.prop('disabled', true);
        submitBtnText.css('display', 'none');
        submitBtnLoading.css('display', 'inline-block');

        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                submitBtn.prop('disabled', false);
                submitBtnText.css('display', 'inline');
                submitBtnLoading.css('display', 'none');

                if (response.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: response.message,
                        timer: 2000,
                        showConfirmButton: false,
                        customClass: {
                            popup: 'swal2-modern'
                        }
                    }).then(function() {
                        $('#uploadModal').modal('hide');
                        $('#uploadForm')[0].reset();
                        $('#previewTables').html('<small style="color: #9ca3af; display: block; text-align: center; padding: 1rem 0;">Upload file untuk melihat tabel yang akan diproses...</small>');
                        if (databaseTable) {
                            databaseTable.ajax.reload(null, false);
                        }
                        updateSummaryCards();
                    });
                }
            },
            error: function(xhr) {
                submitBtn.prop('disabled', false);
                submitBtnText.css('display', 'inline');
                submitBtnLoading.css('display', 'none');

                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: xhr.responseJSON?.message || 'Terjadi kesalahan saat upload file',
                    customClass: {
                        popup: 'swal2-modern'
                    }
                });
            }
        });
    });
});

function parseTablesFromSQL(sqlContent) {
    const tables = [];
    const patterns = [
        /CREATE TABLE[\s]+`?([a-z_]+)`?/gi,
        /INSERT INTO[\s]+`?([a-z_]+)`?/gi,
        /DROP TABLE[\s]+IF EXISTS[\s]+`?([a-z_]+)`?/gi,
        /ALTER TABLE[\s]+`?([a-z_]+)`?/gi,
    ];

    patterns.forEach(function(pattern) {
        const matches = sqlContent.matchAll(pattern);
        matches.forEach(function(match) {
            const table = match[1];
            if (table && !tables.includes(table)) {
                tables.push(table);
            }
        });
    });

    return tables;
}

function processUpload(id) {
    Swal.fire({
        title: 'Proses SQL',
        text: 'Apakah Anda yakin ingin memproses file SQL ini? Semua tabel dengan prefix "t" akan dihapus dan dibuat ulang.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, Proses!',
        cancelButtonText: 'Batal',
        customClass: {
            popup: 'swal2-modern'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '/database/process/' + id,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message,
                            timer: 3000,
                            showConfirmButton: false,
                            customClass: {
                                popup: 'swal2-modern'
                            }
                        }).then(function() {
                            $('#databaseTable').DataTable().ajax.reload(null, false);
                            updateSummaryCards();
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Terjadi kesalahan saat memproses SQL',
                        customClass: {
                            popup: 'swal2-modern'
                        }
                    });
                }
            });
        }
    });
}

function viewDetails(id) {
    $.ajax({
        url: '/database/' + id,
        type: 'GET',
        success: function(response) {
            if (response.success) {
                const upload = response.data;

                const statusColors = {
                    'pending': 'background: #fef3c7; color: #92400e; border: 1px solid #fcd34d;',
                    'processing': 'background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd;',
                    'completed': 'background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7;',
                    'failed': 'background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5;'
                };
                const statusStyle = statusColors[upload.status] || statusColors['pending'];

                let html = '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;">';

                html += '<div style="background: #f9fafb; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb;">';
                html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.5rem; font-weight: 600;">File Name</div>';
                html += '<div style="font-size: 1rem; color: #111827; font-weight: 500; word-break: break-all;">' + upload.file_name + '</div>';
                html += '</div>';

                html += '<div style="background: #f9fafb; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb;">';
                html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.5rem; font-weight: 600;">File Size</div>';
                html += '<div style="font-size: 1rem; color: #111827; font-weight: 500;">' + formatFileSize(upload.file_size) + '</div>';
                html += '</div>';

                html += '<div style="background: #f9fafb; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb;">';
                html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.5rem; font-weight: 600;">Status</div>';
                html += '<div style="padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.875rem; font-weight: 500; display: inline-block; ' + statusStyle + '">' + upload.status.charAt(0).toUpperCase() + upload.status.slice(1) + '</div>';
                html += '</div>';

                html += '<div style="background: #f9fafb; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb;">';
                html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.5rem; font-weight: 600;">Tables Affected</div>';
                html += '<div style="font-size: 1.5rem; color: #111827; font-weight: 700;">' + upload.tables_affected + '</div>';
                html += '</div>';

                html += '</div>';

                html += '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem;">';

                html += '<div style="background: #f9fafb; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb;">';
                html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.5rem; font-weight: 600;">Uploaded At</div>';
                html += '<div style="font-size: 0.95rem; color: #111827; font-weight: 500;">' + new Date(upload.created_at).toLocaleString('id-ID') + '</div>';
                html += '</div>';

                html += '<div style="background: #f9fafb; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb;">';
                html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.5rem; font-weight: 600;">Executed At</div>';
                html += '<div style="font-size: 0.95rem; color: #111827; font-weight: 500;">' + (upload.executed_at ? new Date(upload.executed_at).toLocaleString('id-ID') : '-') + '</div>';
                html += '</div>';

                html += '<div style="background: #f9fafb; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb;">';
                html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 0.5rem; font-weight: 600;">Uploaded By</div>';
                html += '<div style="font-size: 0.95rem; color: #111827; font-weight: 500;">' + (upload.uploaded_by ? upload.uploaded_by.name : '-') + '</div>';
                html += '</div>';

                html += '</div>';

                if (upload.tables_processed && upload.tables_processed.length > 0) {
                    html += '<div style="background: #f9fafb; padding: 1.25rem; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 1.5rem;">';
                    html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; margin-bottom: 1rem; font-weight: 600;">Tables Processed</div>';
                    html += '<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">';
                    upload.tables_processed.forEach(function(table) {
                        html += '<span style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.875rem; font-family: monospace;">' + table + '</span>';
                    });
                    html += '</div></div>';
                }

                if (upload.error_message) {
                    html += '<div style="background: #fee2e2; padding: 1.25rem; border-radius: 8px; border: 1px solid #fecaca; margin-bottom: 1.5rem;">';
                    html += '<div style="font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: #991b1b; margin-bottom: 0.5rem; font-weight: 600;">Error Message</div>';
                    html += '<div style="color: #7f1d1d; font-size: 0.95rem;">' + upload.error_message + '</div>';
                    html += '</div>';
                }

                $('#detailsContent').html(html);
                $('#detailsModal').modal('show');
            }
        },
        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Gagal',
                text: 'Gagal mengambil detail upload',
                customClass: {
                    popup: 'swal2-modern'
                }
            });
        }
    });
}

function deleteUpload(id) {
    Swal.fire({
        title: 'Hapus History Upload',
        text: 'Apakah Anda yakin ingin menghapus history upload ini?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Ya, Hapus!',
        cancelButtonText: 'Batal',
        customClass: {
            popup: 'swal2-modern'
        }
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: '/database/' + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message,
                            timer: 2000,
                            showConfirmButton: false,
                            customClass: {
                                popup: 'swal2-modern'
                            }
                        }).then(function() {
                            $('#databaseTable').DataTable().ajax.reload(null, false);
                            updateSummaryCards();
                        });
                    }
                },
                error: function(xhr) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Gagal menghapus history upload',
                        customClass: {
                            popup: 'swal2-modern'
                        }
                    });
                }
            });
        }
    });
}

function updateSummaryCards() {
    console.log('Updating summary cards...');
    $.ajax({
        url: '{{ route("database.data") }}',
        type: 'GET',
        data: {
            get_summary: 'true'
        },
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            console.log('Summary response:', response);
            let total = 0;
            let completed = 0;
            let pending = 0;

            if (response.success && response.data) {
                if (response.data.total !== undefined) {
                    total = response.data.total;
                    completed = response.data.completed || 0;
                    pending = response.data.pending || 0;
                } else if (Array.isArray(response.data) && response.data.length > 0) {
                    // Fallback for old format
                    total = response.data.length;
                    response.data.forEach(function(d) {
                        const status = d.status || d.status_badge;
                        if (status && (status.includes('completed') || status.includes('Completed'))) {
                            completed++;
                        }
                        if (status && (status.includes('pending') || status.includes('Pending') || status.includes('processing') || status.includes('Processing'))) {
                            pending++;
                        }
                    });
                }
            }

            console.log('Stats - Total:', total, 'Completed:', completed, 'Pending:', pending);

            // Animate the numbers
            animateValue('totalUploads', parseInt($('#totalUploads').text()) || 0, total, 500);
            animateValue('completedUploads', parseInt($('#completedUploads').text()) || 0, completed, 500);
            animateValue('pendingUploads', parseInt($('#pendingUploads').text()) || 0, pending, 500);
        },
        error: function(xhr, status, error) {
            console.error('Summary error:', xhr.status, xhr.responseText);
            // Set to 0 on error
            $('#totalUploads').text('0');
            $('#completedUploads').text('0');
            $('#pendingUploads').text('0');
        }
    });
}

function animateValue(id, start, end, duration) {
    if (start === end) return;
    const range = end - start;
    let current = start;
    const increment = end > start ? 1 : -1;
    const stepTime = Math.abs(Math.floor(duration / range));
    const obj = document.getElementById(id);
    const timer = setInterval(function() {
        current += increment;
        obj.innerHTML = current;
        if (current == end) {
            clearInterval(timer);
        }
    }, stepTime);
}

function formatFileSize(bytes) {
    if (bytes >= 1048576) {
        return (bytes / 1048576).toFixed(2) + ' MB';
    } else if (bytes >= 1024) {
        return (bytes / 1024).toFixed(2) + ' KB';
    } else {
        return bytes + ' bytes';
    }
}
</script>

<style>
.swal2-modern {
    border-radius: 12px !important;
}
</style>
@endsection