@extends('layouts.main')

@section('content')
<div class="pagetitle">
    <h1>Import Database</h1>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ route('settings.general') }}">Pengaturan</a></li>
            <li class="breadcrumb-item active">Import Database</li>
        </ol>
    </nav>
</div>

<section class="section">
    @if (session()->has('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-1"></i>
            <pre class="mb-0" style="white-space: pre-wrap;">{{ session('success') }}</pre>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session()->has('warning'))
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-1"></i>
            <pre class="mb-0" style="white-space: pre-wrap;">{{ session('warning') }}</pre>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if (session()->has('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-octagon me-1"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-octagon me-1"></i>
            <strong>Terjadi kesalahan:</strong>
            <ul class="mb-0 mt-2">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Upload File SQL Backup</h5>

                    <form action="{{ route('database.import') }}" method="POST" enctype="multipart/form-data" id="importForm">
                        @csrf

                        <!-- File Upload -->
                        <div class="mb-4">
                            <label for="sql_file" class="form-label">
                                <i class="bi bi-file-earmark-code"></i> <strong>Pilih File SQL</strong>
                            </label>
                            <input 
                                type="file" 
                                class="form-control @error('sql_file') is-invalid @enderror" 
                                id="sql_file" 
                                name="sql_file"
                                accept=".sql,.txt"
                                required
                            >
                            <small class="text-muted">
                                File harus berformat .sql atau .txt (maksimal 100MB)
                            </small>
                            @error('sql_file')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Import Mode (Hidden - Only Replace mode available) -->
                        <input type="hidden" name="import_mode" value="replace">

                        <!-- Hidden modes for future use -->
                        <div class="d-none">
                            <div class="form-check mb-2">
                                <input 
                                    class="form-check-input" 
                                    type="radio" 
                                    name="import_mode_hidden" 
                                    id="mode_skip" 
                                    value="skip"
                                >
                                <label class="form-check-label" for="mode_skip">
                                    <strong>Skip Existing Data</strong> <span class="badge bg-success">Aman</span>
                                    <small class="d-block text-muted">
                                        Lewati data yang sudah ada (berdasarkan ID). Data lama tidak akan berubah.
                                        <br><em>⚡ ~1-2 menit untuk 8MB file</em>
                                    </small>
                                </label>
                            </div>

                            <div class="form-check mb-2">
                                <input 
                                    class="form-check-input" 
                                    type="radio" 
                                    name="import_mode_hidden" 
                                    id="mode_update" 
                                    value="update"
                                >
                                <label class="form-check-label" for="mode_update">
                                    <strong>Update Existing Data</strong> <span class="badge bg-warning text-dark">Sedang</span>
                                    <small class="d-block text-muted">
                                        Update data yang sudah ada (berdasarkan ID). Data lama akan di-overwrite.
                                        <br><em>⚡ ~2-3 menit untuk 8MB file</em>
                                    </small>
                                </label>
                            </div>
                        </div>

                        <!-- Warning -->
                        <div class="alert alert-warning">
                            <h6 class="alert-heading">
                                <i class="bi bi-exclamation-triangle"></i> Peringatan
                            </h6>
                            <ul class="mb-0">
                                <li><strong>Backup database terlebih dahulu</strong> sebelum import</li>
                                <li>Import akan menggantikan seluruh data yang ada</li>
                                <li>Jangan tutup browser selama proses import berlangsung</li>
                            </ul>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary" id="submitBtn">
                                <i class="bi bi-upload"></i> Mulai Import
                            </button>
                            <a href="{{ route('settings.general') }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle"></i> Batal
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Informasi</h5>
                    
                    <div class="mb-3">
                        <h6><i class="bi bi-info-circle text-info"></i> Cara Menggunakan:</h6>
                        <ol class="small">
                            <li>Pilih file SQL backup yang akan di-import</li>
                            <li>Klik "Mulai Import"</li>
                            <li>Konfirmasi dialog yang muncul</li>
                            <li>Tunggu hingga proses selesai</li>
                        </ol>
                    </div>

                    <hr>

                    <div class="mb-0">
                        <h6><i class="bi bi-exclamation-triangle text-warning"></i> Catatan Penting:</h6>
                        <ul class="small mb-0">
                            <li><strong>Backup dulu</strong> sebelum import</li>
                            <li>Import akan mengganti semua data yang ada</li>
                            <li>Jangan tutup browser saat proses berjalan</li>
                            <li>File maksimal 100MB</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">Export Database</h5>
                    <p class="small text-muted">
                        Sebelum import, disarankan untuk backup database terlebih dahulu.
                    </p>
                    <a href="{{ route('database.export') }}" class="btn btn-success btn-sm w-100">
                        <i class="bi bi-download"></i> Export Database
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center py-5">
                <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <h5 id="importStatus">
                    <i class="bi bi-database"></i> Sedang Import Database
                </h5>
                <p class="text-muted mb-0">Mohon tunggu, proses sedang berjalan...</p>
                <p class="text-danger"><small><i class="bi bi-exclamation-triangle"></i> Jangan tutup browser!</small></p>
                
                <div class="progress mt-3" style="height: 8px;">
                    <div class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 100%"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('importForm');
    const submitBtn = document.getElementById('submitBtn');
    const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));

    form.addEventListener('submit', function(e) {
        const fileInput = document.getElementById('sql_file');

        if (!fileInput.files.length) {
            e.preventDefault();
            alert('Silakan pilih file SQL terlebih dahulu!');
            return;
        }

        // Show confirmation for import
        if (!confirm('Import Database\n\nSemua data akan diganti dengan data dari file backup.\nPastikan Anda sudah backup database saat ini.\n\nLanjutkan?')) {
            e.preventDefault();
            return;
        }

        // Show loading modal
        loadingModal.show();
        submitBtn.disabled = true;
    });

    // File size validation
    const fileInput = document.getElementById('sql_file');
    fileInput.addEventListener('change', function() {
        const maxSize = 100 * 1024 * 1024; // 100MB
        if (this.files.length > 0) {
            const fileSize = this.files[0].size;
            if (fileSize > maxSize) {
                alert('File terlalu besar! Maksimal 100MB.');
                this.value = '';
            } else {
                const fileSizeMB = (fileSize / (1024 * 1024)).toFixed(2);
                console.log('File size: ' + fileSizeMB + ' MB');
            }
        }
    });
});
</script>
@endpush