@extends('layout.app')

@section('title', 'Database Backup & Restore - Fleet SRP Desktop')

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ route('client.dashboard') }}"><i class="ri-home-line me-1"></i> Dashboard</a>
        </li>
        <li class="breadcrumb-item active" aria-current="page">
            Database Backup & Restore
        </li>
    </ol>
</div>

<div class="app-body">
    @if(session('success_msg'))
        <div class="alert alert-success alert-dismissible fade show d-flex align-items-center mb-3" role="alert">
            <i class="ri-checkbox-circle-fill fs-5 me-2"></i>
            <div>{{ session('success_msg') }}</div>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error_msg'))
        <div class="alert alert-danger alert-dismissible fade show d-flex align-items-center mb-3" role="alert">
            <i class="ri-error-warning-fill fs-5 me-2"></i>
            <div>{{ session('error_msg') }}</div>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Top Stats Row -->
    <div class="row g-3 mb-4">
        <!-- Auto Backup Card -->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card h-100 border-0 shadow-sm" style="border-left: 4px solid #10b981 !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="text-muted small fw-semibold text-uppercase">Auto Daily Backup</span>
                        <span class="badge {{ $hasTodayBackup ? 'bg-success' : 'bg-warning text-dark' }} px-2 py-1">
                            <i class="{{ $hasTodayBackup ? 'ri-check-line' : 'ri-time-line' }} me-1"></i>
                            {{ $hasTodayBackup ? 'Today Done' : 'Pending On Close' }}
                        </span>
                    </div>
                    <h5 class="fw-bold mb-1 text-dark">
                        {{ $hasTodayBackup ? 'Backup Active' : 'Auto Schedule' }}
                    </h5>
                    <p class="text-muted small mb-2">Runs automatically on software launch & close.</p>
                    <div class="p-2 bg-light rounded text-truncate border" title="{{ $backupDir }}">
                        <i class="ri-folder-shared-line me-1 text-primary"></i>
                        <span class="font-monospace small text-dark fw-semibold">{{ $backupDir }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Backups Summary Card -->
        <div class="col-lg-4 col-md-6 col-12">
            <div class="card h-100 border-0 shadow-sm" style="border-left: 4px solid #3b82f6 !important;">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="text-muted small fw-semibold text-uppercase">Saved Backups</span>
                        <span class="badge bg-primary px-2 py-1">{{ count($backups) }} Files</span>
                    </div>
                    <h5 class="fw-bold mb-1 text-dark">{{ $totalSizeFormatted }} Total Size</h5>
                    <p class="text-muted small mb-3">Stored locally on your disk for safety.</p>
                    <div class="d-flex align-items-center gap-2">
                        <span class="badge bg-light text-muted border px-2 py-1 small">
                            <i class="ri-shield-check-line text-success me-1"></i> PostgreSQL Safe
                        </span>
                        <span class="badge bg-light text-muted border px-2 py-1 small">
                            <i class="ri-hard-drive-line text-primary me-1"></i> Offline Local
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Quick 1-Click Action Card -->
        <div class="col-lg-4 col-12">
            <div class="card h-100 border-0 shadow-sm bg-primary text-white" style="background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;">
                <div class="card-body d-flex flex-column justify-content-between">
                    <div>
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="text-white-50 small fw-semibold text-uppercase">Immediate Action</span>
                            <i class="ri-download-cloud-2-line fs-4 text-warning"></i>
                        </div>
                        <h5 class="fw-bold text-white mb-1">Create & Download</h5>
                        <p class="text-white-50 small mb-3">Instantly snapshot your database and save or download a `.sql` copy.</p>
                    </div>
                    <form action="{{ route('desktop.backup.create') }}" method="POST" class="d-flex gap-2">
                        @csrf
                        <input type="hidden" name="download" value="1">
                        <button type="submit" class="btn btn-warning fw-semibold w-100 py-2">
                            <i class="ri-download-line me-1"></i> Download Backup Now
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions Row: Manual Save & Import Restore -->
    <div class="row g-3 mb-4">
        <!-- Manual Backup Creation -->
        <div class="col-lg-6 col-12">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-white py-3 border-bottom d-flex align-items-center">
                    <i class="ri-save-3-line text-primary me-2 fs-5"></i>
                    <h6 class="card-title mb-0 fw-bold">Create Local Backup File</h6>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">
                        Save a full database snapshot directly into your backup directory (<code>{{ $backupDir }}</code>).
                    </p>
                    <form action="{{ route('desktop.backup.create') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">Custom Note / Name (Optional)</label>
                            <input type="text" name="backup_name" class="form-control" placeholder="e.g. before_month_end_closing">
                            <small class="text-muted">A timestamp will automatically be added to the filename.</small>
                        </div>
                        <button type="submit" class="btn btn-primary px-4">
                            <i class="ri-save-line me-1"></i> Create Local Backup
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Import / Restore from File -->
        <div class="col-lg-6 col-12">
            <div class="card h-100 border-0 shadow-sm">
                <div class="card-header bg-white py-3 border-bottom d-flex align-items-center">
                    <i class="ri-upload-2-line text-danger me-2 fs-5"></i>
                    <h6 class="card-title mb-0 fw-bold">Restore / Import Database from File</h6>
                </div>
                <div class="card-body">
                    <div class="alert alert-warning py-2 px-3 small d-flex align-items-center mb-3">
                        <i class="ri-alert-line fs-5 me-2 text-warning"></i>
                        <div><strong>Caution:</strong> Restoring will overwrite the current database with the selected backup file data.</div>
                    </div>
                    <form action="{{ route('desktop.backup.import') }}" method="POST" enctype="multipart/form-data" id="importForm">
                        @csrf
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">Select Backup File (.sql or .backup) <span class="text-danger">*</span></label>
                            <input type="file" name="backup_file" class="form-control" accept=".sql,.backup" required>
                        </div>
                        <button type="button" class="btn btn-danger px-4" onclick="confirmImport()">
                            <i class="ri-refresh-line me-1"></i> Upload & Restore Database
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Saved Backups Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3 border-bottom d-flex align-items-center justify-content-between">
            <div class="d-flex align-items-center">
                <i class="ri-history-line text-primary me-2 fs-5"></i>
                <h6 class="card-title mb-0 fw-bold">Saved Local Backups History</h6>
            </div>
            <span class="text-muted small">Location: <code>{{ $backupDir }}</code></span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th style="width: 50px;" class="text-center">#</th>
                            <th>Backup Filename</th>
                            <th>Type</th>
                            <th>Created On</th>
                            <th>File Size</th>
                            <th class="text-end pe-3" style="width: 250px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($backups as $index => $b)
                            <tr>
                                <td class="text-center text-muted fw-semibold">{{ $index + 1 }}</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <i class="ri-file-code-line text-primary fs-4 me-2"></i>
                                        <div>
                                            <div class="fw-bold font-monospace text-dark" style="font-size: 13.5px;">{{ $b['filename'] }}</div>
                                            <small class="text-muted" style="font-size: 11px;">{{ $b['path'] }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    @if($b['is_auto'])
                                        <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1">
                                            <i class="ri-time-line me-1"></i> Daily Auto
                                        </span>
                                    @else
                                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle px-2 py-1">
                                            <i class="ri-user-line me-1"></i> Manual
                                        </span>
                                    @endif
                                </td>
                                <td class="text-muted small">
                                    <i class="ri-calendar-line me-1"></i> {{ $b['created_at'] }}
                                </td>
                                <td>
                                    <span class="badge bg-light text-dark border px-2 py-1 font-monospace">
                                        {{ $b['size'] }}
                                    </span>
                                </td>
                                <td class="text-end pe-3">
                                    <div class="btn-group btn-group-sm">
                                        <a href="{{ route('desktop.backup.download', ['filename' => $b['filename']]) }}" class="btn btn-outline-primary" title="Download to PC">
                                            <i class="ri-download-line"></i> Download
                                        </a>
                                        <button type="button" class="btn btn-outline-warning text-dark" title="Restore this backup" onclick="confirmRestore('{{ $b['filename'] }}')">
                                            <i class="ri-refresh-line"></i> Restore
                                        </button>
                                        <button type="button" class="btn btn-outline-danger" title="Delete backup" onclick="confirmDelete('{{ $b['filename'] }}')">
                                            <i class="ri-delete-bin-line"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">
                                    <i class="ri-folder-open-line fs-1 d-block mb-2 text-muted"></i>
                                    <h6>No backup files found yet</h6>
                                    <p class="small mb-3">Click <strong>"Download Backup Now"</strong> or <strong>"Create Local Backup"</strong> above to generate your first backup.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Restore Modal Form -->
<form id="restoreForm" action="{{ route('desktop.backup.restore') }}" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="filename" id="restoreFilename">
</form>

<!-- Delete Modal Form -->
<form id="deleteForm" action="" method="POST" style="display: none;">
    @csrf
    @method('DELETE')
</form>

<!-- Modal: Confirm Restore -->
<div class="modal fade" id="restoreModal" tabindex="-1" aria-labelledby="restoreModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark py-2">
                <h6 class="modal-title fw-bold" id="restoreModalLabel">
                    <i class="ri-alert-line me-1"></i> Confirm Database Restore
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p class="mb-2">You are about to restore the database from:</p>
                <div class="p-2 bg-light rounded font-monospace small fw-bold text-dark mb-3 border" id="modalRestoreFilename"></div>
                <div class="alert alert-danger py-2 px-3 small mb-0">
                    <strong>Warning:</strong> All current transactions, vehicles, and ledgers will be replaced with the contents of this backup file. This action cannot be undone!
                </div>
            </div>
            <div class="modal-footer py-2">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger btn-sm" onclick="submitRestore()">
                    <i class="ri-refresh-line me-1"></i> Yes, Restore Database
                </button>
            </div>
        </div>
    </div>
</div>

@push('footer_script')
<script>
    function confirmRestore(filename) {
        document.getElementById('restoreFilename').value = filename;
        document.getElementById('modalRestoreFilename').innerText = filename;
        var modal = new bootstrap.Modal(document.getElementById('restoreModal'));
        modal.show();
    }

    function submitRestore() {
        document.getElementById('restoreForm').submit();
    }

    function confirmImport() {
        var input = document.querySelector('input[name="backup_file"]');
        if (!input.files || input.files.length === 0) {
            alert('Please select a backup file (.sql) to import.');
            return;
        }
        var filename = input.files[0].name;
        if (confirm('Are you sure you want to restore database from "' + filename + '"? Current database data will be overwritten with the backup file data.')) {
            document.getElementById('importForm').submit();
        }
    }

    function confirmDelete(filename) {
        if (confirm('Are you sure you want to delete backup file: ' + filename + '?')) {
            var form = document.getElementById('deleteForm');
            form.action = "{{ url('desktop/backup/delete') }}/" + encodeURIComponent(filename);
            form.submit();
        }
    }
</script>
@endpush
@endsection