<x-app-layout>
    @push('styles')
        <style>
            .status-widget-dark {
                border-radius: 24px;
                background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
                padding: 1.5rem;
                color: white;
                margin-bottom: 1.5rem;
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
            }

            .btn-premium-action {
                border-radius: 100px;
                padding: 10px 24px;
                font-weight: 700;
                transition: all 0.3s ease;
            }

            .table-premium thead th {
                background: #f8fafc;
                text-transform: uppercase;
                font-size: 11px;
                letter-spacing: 0.05em;
                color: #64748b;
                padding: 1.25rem 1rem;
                border-bottom: 1px solid #f1f5f9;
            }

            .table-premium tbody td {
                padding: 1rem;
                border-bottom: 1px solid #f1f5f9;
            }

            .custom-switch-premium .form-check-input {
                width: 3rem;
                height: 1.5rem;
                cursor: pointer;
            }

            @keyframes pulse-danger {
                0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4); }
                70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); }
                100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); }
            }

            .pulse-danger {
                animation: pulse-danger 2s infinite;
            }

            .animate-spin {
                animation: spin 1s infinite linear;
            }

            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }
        </style>
    @endpush

    <div class="container-fluid pb-5">
        {{-- Premium Page Header --}}
        <div class="d-flex align-items-center justify-content-between mb-4 animate__animated animate__fadeIn">
            <div>
                <h4 class="fw-bold mb-1" style="font-family: 'Outfit', sans-serif; letter-spacing: -0.5px;">
                    {{ __('Backup & Storage') }}
                </h4>
                <p class="text-muted small mb-0">
                    {{ __('Securely manage your system archives and cloud synchronization.') }}
                </p>
            </div>
            <div class="d-flex gap-2">
                <button type="button"
                    class="btn btn-outline-dark btn-premium-action shadow-sm d-flex align-items-center gap-2"
                    data-bs-toggle="modal" data-bs-target="#backupDocsModal">
                    <i class="bi bi-book"></i> {{ __('Documentation') }}
                </button>
                @can('manage backup and storage')
                    <button type="button"
                        class="btn btn-primary btn-premium-action shadow-sm d-flex align-items-center gap-2"
                        id="btn-create-backup">
                        <i class="bi bi-plus-lg"></i> {{ __('Instant Backup') }}
                    </button>
                @endcan
            </div>
        </div>

        <div class="row gx-4">
            {{-- Left Side: Control Center --}}
            <div class="col-lg-4 animate__animated animate__fadeIn">

                {{-- Storage Health Widget (Dark Premium) --}}
                <div id="storage-health-widget" class="status-widget-dark" style="display:none;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="d-flex align-items-center gap-2">
                            <div class="bg-white bg-opacity-10 rounded-circle p-2">
                                <i class="bi bi-cloud-check text-info"></i>
                            </div>
                            <span class="small fw-bold opacity-75 text-uppercase tracking-wider"
                                id="health-label">Storage</span>
                        </div>
                        <span class="badge rounded-pill bg-info text-dark fw-bold px-3 py-2" id="health-status"
                            style="font-size: 10px;">Checking...</span>
                    </div>

                    <h2 class="mb-1 fw-bold" id="health-used" style="font-family: 'Outfit', sans-serif;">0</h2>
                    <p class="small opacity-50 mb-4" id="health-total-label">of <span id="health-total">0</span> used
                    </p>

                    <div class="progress bg-white bg-opacity-10 mb-2" style="height: 8px; border-radius: 10px;"
                        id="health-progress-wrapper">
                        <div class="progress-bar bg-info" id="health-progress-bar" role="progressbar"
                            style="width: 0%; border-radius: 10px;"></div>
                    </div>

                    {{-- Requirements Alert --}}
                    <div id="requirements-alert"
                        class="mt-3 p-2 rounded-3 bg-danger bg-opacity-25 border border-danger border-opacity-25 small"
                        style="display:none;">
                        <i class="bi bi-exclamation-triangle me-1"></i> <span id="req-msg">Check reqs</span>
                    </div>
                </div>

                <form id="backupConfigForm" action="{{ route('system-config.update') }}" method="POST"
                    autocomplete="off" class="ajax-form" data-reset="false">
                    @csrf
                    @method('PUT')

                    {{-- Automation Card --}}
                    <div class="card adminuiux-card mb-4">
                        <div class="card-body">
                            <h6 class="fw-bold mb-4 d-flex align-items-center gap-2">
                                <i class="bi bi-clock-history text-primary"></i>
                                {{ __('Automation Settings') }}
                            </h6>

                            <div
                                class="form-check form-switch custom-switch-premium mb-4 p-0 d-flex align-items-center justify-content-between">
                                <label class="form-check-label fw-semibold text-dark"
                                    for="backup_db_enabled">{{ __('AUTO BACKUP') }}</label>
                                <input class="form-check-input ms-0" type="checkbox" role="switch"
                                    id="backup_db_enabled" name="backup_db_enabled" value="1"
                                    @checked(old('backup_db_enabled', $settings['backup_db_enabled'] ?? true))>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-semibold">{{ __('Backup Frequency') }}</label>
                                <select class="form-select" name="backup_db_frequency">
                                    <option value="hourly" @selected(($settings['backup_db_frequency'] ?? '') == 'hourly')>{{ __('Hourly') }}</option>
                                    <option value="daily" @selected(($settings['backup_db_frequency'] ?? 'daily') == 'daily')>{{ __('Daily') }}</option>
                                    <option value="weekly" @selected(($settings['backup_db_frequency'] ?? '') == 'weekly')>{{ __('Weekly') }}</option>
                                    <option value="monthly" @selected(($settings['backup_db_frequency'] ?? '') == 'monthly')>{{ __('Monthly') }}</option>
                                </select>
                            </div>

                            <div class="row g-2">
                                <div class="col-6">
                                    <label class="form-label fw-semibold">{{ __('Execution Time') }}</label>
                                    <input type="time" class="form-control" name="backup_db_time"
                                        value="{{ $settings['backup_db_time'] ?? '02:00' }}">
                                </div>
                                <div class="col-6">
                                    <label class="form-label fw-semibold">{{ __('Retention (Days)') }}</label>
                                    <input type="number" class="form-control text-center" name="backup_db_retention"
                                        value="{{ $settings['backup_db_retention'] ?? 7 }}">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Storage Destination Card --}}
                    <div class="card adminuiux-card mb-4">
                        <div class="card-body">
                            <h6 class="fw-bold mb-4 d-flex align-items-center gap-2">
                                <i class="bi bi-hdd-network text-primary"></i>
                                {{ __('Storage Target') }}
                            </h6>

                            <div class="mb-4">
                                <label class="form-label fw-semibold mb-2">{{ __('Primary Driver') }}</label>
                                <select class="form-select" name="backup_db_driver" id="backup_db_driver">
                                    <option value="local" @selected(($settings['backup_db_driver'] ?? 'local') == 'local')>Local Filesystem</option>
                                    <option value="gdrive" @selected(($settings['backup_db_driver'] ?? '') == 'gdrive')>
                                        Google Drive</option>
                                </select>
                            </div>

                            {{-- Cloud Fields Wrapper --}}
                            <div id="cloud_config_wrapper"
                                style="display: {{ ($settings['backup_db_driver'] ?? '') == 'gdrive' ? 'block' : 'none' }}">
                                <div class="p-3 rounded-4 bg-light border border-opacity-10 mb-4">
                                    {{-- Google Drive --}}
                                    <div id="gdrive_fields"
                                        style="display: {{ ($settings['backup_db_driver'] ?? '') == 'gdrive' ? 'block' : 'none' }}">
                                        <div class="d-flex align-items-center gap-2 mb-3">
                                            <i class="bi bi-google text-primary"></i>
                                            <h6 class="fw-semibold mb-0 small">{{ __('Google Cloud Auth') }}</h6>
                                        </div>
                                        <div class="mb-2">
                                            <input type="text"
                                                class="form-control form-control-sm rounded-pill px-3 bg-white"
                                                name="gdrive_client_id"
                                                value="{{ $settings['gdrive_client_id'] ?? '' }}"
                                                placeholder="Client ID">
                                        </div>
                                        <div class="input-group input-group-sm mb-2">
                                            <input type="password"
                                                class="form-control border-end-0 rounded-start-pill px-3 bg-white"
                                                name="gdrive_client_secret"
                                                value="{{ $settings['gdrive_client_secret'] ?? '' }}"
                                                placeholder="Client Secret">
                                            <button
                                                class="btn btn-outline-secondary bg-white border-start-0 password-toggle rounded-end-pill pe-3"
                                                type="button" style="border-color: #dee2e6;">
                                                <i class="bi bi-eye text-secondary"></i>
                                            </button>
                                        </div>
                                        <div class="input-group input-group-sm mb-2">
                                            <input type="password"
                                                class="form-control border-0 rounded-start-pill px-3 bg-white"
                                                name="gdrive_refresh_token"
                                                value="{{ $settings['gdrive_refresh_token'] ?? '' }}"
                                                placeholder="Refresh Token">
                                            <button class="btn btn-outline-secondary bg-white border-0 password-toggle"
                                                type="button">
                                                <i class="bi bi-eye text-secondary"></i>
                                            </button>
                                            <a href="{{ route('backup-restore.google-auth') }}"
                                                class="btn btn-dark rounded-end-pill px-3" id="btn-gdrive-auth">
                                                <i class="bi bi-key"></i>
                                            </a>
                                        </div>
                                        <div class="input-group input-group-sm">
                                            <input type="text"
                                                class="form-control border-0 rounded-start-pill px-3 bg-white"
                                                name="gdrive_folder"
                                                value="{{ $settings['gdrive_folder'] ?? 'LaravelBackups' }}"
                                                placeholder="Folder Name">
                                            <button type="button"
                                                class="btn btn-primary rounded-end-pill px-3 btn-test-connection"
                                                data-driver="gdrive">
                                                <i class="bi bi-broadcast"></i>
                                            </button>
                                        </div>
                                    </div>


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

                    @can('manage backup and storage')
                        <div class="d-flex justify-content-end">
                            <button type="submit" class="btn btn-primary rounded-pill px-4 shadow-sm">
                                {{ __('Save Configuration') }}
                            </button>
                        </div>
                    @endcan
                </form>
            </div>

            {{-- Right Side: History (Col-8) --}}
            <div class="col-lg-8 animate__animated animate__fadeIn">
                <div class="card adminuiux-card h-100">
                    <div class="card-body p-0">
                        <div class="p-4 d-flex justify-content-between align-items-center border-bottom bg-white sticky-top"
                            style="z-index: 10; border-top-left-radius: 20px; border-top-right-radius: 20px;">
                            <h6 class="fw-bold mb-0 d-flex align-items-center gap-2">
                                <i class="bi bi-collection-play text-primary"></i>
                                {{ __('Archive Inventory') }}
                            </h6>
                            <button type="button" class="btn btn-sm btn-light rounded-pill px-3"
                                id="btn-refresh-backups">
                                <i class="bi bi-arrow-clockwise me-1"></i> {{ __('Refresh List') }}
                            </button>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-premium align-middle mb-0" id="backup-list-table">
                                <thead>
                                    <tr>
                                        <th class="ps-4">{{ __('Archive Name') }}</th>
                                        <th>{{ __('Status') }}</th>
                                        <th>{{ __('Timestamp') }}</th>
                                        <th class="text-end pe-4">{{ __('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr id="backup-loading">
                                        <td colspan="4" class="text-center py-5">
                                            <div class="spinner-grow spinner-grow-sm text-primary me-2"></div>
                                            <span
                                                class="text-muted small fw-bold">{{ __('Scanning Archives...') }}</span>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ====================================================================
             DOCUMENTATION (MODAL)
             ==================================================================== --}}
        <div class="modal fade" id="backupDocsModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-fullscreen-lg-down modal-dialog-scrollable modal-dialog-centered">
                <div class="modal-content rounded-4 border-0 shadow-lg overflow-hidden">
                    <div class="modal-header p-0 border-0" style="background:#0f172a;">
                        <div class="d-flex w-100 align-items-center justify-content-between p-4 p-lg-5 text-white">
                            <div>
                                <div class="extra-small opacity-50 fw-bold mb-2" style="letter-spacing:1.5px;">REFERENCE GUIDE</div>
                                <h3 class="fw-black mb-2" style="letter-spacing:-1px;">{{ __('Backup & Restore Documentation') }}</h3>
                                <p class="mb-0 opacity-75" style="font-size:.9rem;line-height:1.7;max-width:720px;">
                                    Everything you need to know about creating, scheduling, restoring, and securing your system archives.
                                    <span class="text-warning fw-bold">Read this first</span> — restoring overwrites your live data.
                                </p>
                            </div>
                            <div class="d-flex align-items-start gap-3">
                                <i class="bi bi-shield-fill-check display-3 opacity-25 d-none d-md-inline"></i>
                                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body p-0">
                        <div class="p-4 p-lg-5">

                        {{-- DANGER NOTICE --}}
                        <div class="d-flex align-items-start gap-3 p-3 rounded-4 mb-5" style="background:#fef2f2;border:2px solid #fecaca;">
                            <i class="bi bi-exclamation-triangle-fill text-danger fs-2"></i>
                            <div>
                                <div class="fw-black text-danger mb-1">CRITICAL — Restore is destructive</div>
                                <div class="small text-dark" style="line-height:1.7;">
                                    Restoring a backup <span class="fw-bold">overwrites every table</span> in your current database with the data from the archive.
                                    All records created since that backup was taken will be <span class="fw-bold text-danger">permanently lost</span>.
                                    Always create a fresh <span class="fw-bold">Instant Backup</span> immediately before restoring, so you have a return path.
                                </div>
                            </div>
                        </div>

                        {{-- WORKFLOW STEPS --}}
                        <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                            <i class="bi bi-diagram-3 text-primary me-1"></i>How a backup is created
                        </h6>
                        <div class="row g-3 mb-5">
                            @php
                                $steps = [
                                    ['icon'=>'bi-database',     'color'=>'#3b82f6', 'title'=>'1. Snapshot',  'desc'=>'A full SQL dump of every table is generated via <code>mysqldump</code> / <code>pg_dump</code> at the moment you click Instant Backup or when the scheduler fires.'],
                                    ['icon'=>'bi-file-zip',     'color'=>'#8b5cf6', 'title'=>'2. Compress',  'desc'=>'The SQL dump is gzip-compressed into a single <code>.sql.gz</code> archive named with timestamp + driver tag.'],
                                    ['icon'=>'bi-hdd-network', 'color'=>'#22c55e', 'title'=>'3. Transfer',   'desc'=>'Archive is written to the configured driver. <span class="fw-bold">Local</span> saves to <code>storage/app/backups/</code>. <span class="fw-bold">Google Drive</span> uploads via OAuth refresh token.'],
                                    ['icon'=>'bi-clipboard-check','color'=>'#f59e0b', 'title'=>'4. Verify',  'desc'=>'File size and SHA-256 checksum are recorded. The Archive Inventory table reflects the new row immediately.'],
                                    ['icon'=>'bi-trash3',       'color'=>'#ef4444', 'title'=>'5. Prune',     'desc'=>'Archives older than the configured retention (days) are auto-deleted on the next scheduled run. Local + cloud are pruned independently.'],
                                ];
                            @endphp
                            @foreach($steps as $s)
                                <div class="col-md-6 col-lg-4">
                                    <div class="p-3 rounded-4 h-100" style="background:#f8fafc;border:1px solid #e2e8f0;">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
                                                 style="background:{{ $s['color'] }}1a;color:{{ $s['color'] }};width:36px;height:36px;">
                                                <i class="{{ $s['icon'] }}"></i>
                                            </div>
                                            <div class="fw-bold text-dark">{{ $s['title'] }}</div>
                                        </div>
                                        <div class="small text-muted" style="line-height:1.6;">{!! $s['desc'] !!}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- STORAGE DRIVERS --}}
                        <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                            <i class="bi bi-hdd-stack text-info me-1"></i>Storage drivers comparison
                        </h6>
                        <div class="table-responsive mb-5">
                            <table class="table table-hover align-middle mb-0" style="background:#f8fafc;border-radius:12px;overflow:hidden;">
                                <thead style="background:#e2e8f0;">
                                    <tr>
                                        <th class="ps-3">DRIVER</th>
                                        <th>WHERE</th>
                                        <th>SETUP</th>
                                        <th>BEST FOR</th>
                                        <th>RISK IF SERVER DIES</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="ps-3 fw-bold text-dark">
                                            <i class="bi bi-hdd text-secondary me-1"></i>Local Filesystem
                                        </td>
                                        <td class="small text-muted"><code>storage/app/backups/</code></td>
                                        <td class="small"><span class="badge bg-success-subtle text-success rounded-pill">Zero config</span></td>
                                        <td class="small text-muted">Quick recovery, small datasets, dev environments</td>
                                        <td class="small text-danger fw-bold">Total loss — backups on same disk</td>
                                    </tr>
                                    <tr>
                                        <td class="ps-3 fw-bold text-dark">
                                            <i class="bi bi-google text-primary me-1"></i>Google Drive
                                        </td>
                                        <td class="small text-muted">OAuth folder (default: <code>LaravelBackups</code>)</td>
                                        <td class="small"><span class="badge bg-warning-subtle text-warning rounded-pill">Client ID + Secret + Refresh Token</span></td>
                                        <td class="small text-muted">Off-site redundancy, production, disaster recovery</td>
                                        <td class="small text-success fw-bold">Safe — off-server copy</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        {{-- GOOGLE DRIVE SETUP --}}
                        <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                            <i class="bi bi-google text-primary me-1"></i>Google Drive setup · Step-by-step
                        </h6>
                        <div class="row g-3 mb-5">
                            <div class="col-md-6">
                                <div class="p-3 rounded-4 h-100" style="background:#eff6ff;border:1px solid #bfdbfe;">
                                    <div class="fw-bold text-primary mb-2">1. Create OAuth client</div>
                                    <ol class="small text-muted mb-0" style="line-height:1.8;padding-left:1.2rem;">
                                        <li>Go to <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a></li>
                                        <li>Create a project → enable <span class="fw-bold">Google Drive API</span></li>
                                        <li>OAuth consent screen → External → fill app name</li>
                                        <li>Credentials → Create → OAuth client ID → Web application</li>
                                        <li>Add redirect URI: <code>{{ url('/backup-restore/google-callback') }}</code></li>
                                        <li>Copy <span class="fw-bold">Client ID</span> &amp; <span class="fw-bold">Client Secret</span></li>
                                    </ol>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 rounded-4 h-100" style="background:#eff6ff;border:1px solid #bfdbfe;">
                                    <div class="fw-bold text-primary mb-2">2. Link this app</div>
                                    <ol class="small text-muted mb-0" style="line-height:1.8;padding-left:1.2rem;">
                                        <li>Paste Client ID + Secret in the form on the left</li>
                                        <li>Click the <i class="bi bi-key"></i> key button next to Refresh Token</li>
                                        <li>Authorize on the Google consent screen</li>
                                        <li>Refresh token is auto-filled on return</li>
                                        <li>Click <i class="bi bi-broadcast"></i> to test connection</li>
                                        <li>Save configuration</li>
                                    </ol>
                                </div>
                            </div>
                        </div>

                        {{-- SCHEDULING --}}
                        <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                            <i class="bi bi-clock-history text-warning me-1"></i>Automation &amp; scheduling
                        </h6>
                        <div class="row g-3 mb-5">
                            <div class="col-md-3">
                                <div class="p-3 rounded-4 h-100" style="background:#fff;border:1px solid #e2e8f0;">
                                    <div class="fw-bold text-dark mb-1">Frequency</div>
                                    <div class="small text-muted">Hourly / Daily / Weekly / Monthly. The Laravel scheduler must be running (<code>cron</code> calling <code>php artisan schedule:run</code> every minute).</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-3 rounded-4 h-100" style="background:#fff;border:1px solid #e2e8f0;">
                                    <div class="fw-bold text-dark mb-1">Execution Time</div>
                                    <div class="small text-muted">24-hour format (default <code>02:00</code>). Pick low-traffic hours — backup briefly locks tables.</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-3 rounded-4 h-100" style="background:#fff;border:1px solid #e2e8f0;">
                                    <div class="fw-bold text-dark mb-1">Retention</div>
                                    <div class="small text-muted">Days to keep. Older archives auto-pruned. Default <code>7</code>. Set to <code>0</code> to keep forever (not recommended).</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="p-3 rounded-4 h-100" style="background:#fff;border:1px solid #e2e8f0;">
                                    <div class="fw-bold text-dark mb-1">Auto Backup toggle</div>
                                    <div class="small text-muted">Master switch. When OFF, only manual <span class="fw-bold">Instant Backup</span> runs.</div>
                                </div>
                            </div>
                        </div>

                        {{-- RESTORE PROCEDURE --}}
                        <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                            <i class="bi bi-arrow-counterclockwise text-danger me-1"></i>How to restore safely
                        </h6>
                        <div class="p-4 rounded-4 mb-5" style="background:#0f172a;color:#e2e8f0;">
                            <pre class="mb-0" style="font-family:'Fira Code',monospace;font-size:.78rem;line-height:2;white-space:pre-wrap;color:#cbd5e1;">
<span style="color:#22c55e;">RECOMMENDED RESTORE SEQUENCE:</span>

<span style="color:#fbbf24;">[1]</span> Click <span style="color:#22c55e;">Instant Backup</span> NOW — creates a return path
<span style="color:#fbbf24;">[2]</span> Enable Maintenance Mode (so users can't write data mid-restore)
<span style="color:#fbbf24;">[3]</span> Open Archive Inventory → identify the archive you want
<span style="color:#fbbf24;">[4]</span> Click the row action menu → <span style="color:#ef4444;">Restore</span>
<span style="color:#fbbf24;">[5]</span> Confirm the dialog (read it carefully — points of no return)
<span style="color:#fbbf24;">[6]</span> Wait for the success toast (do NOT navigate away)
<span style="color:#fbbf24;">[7]</span> Verify data integrity on a couple of critical tables
<span style="color:#fbbf24;">[8]</span> Disable Maintenance Mode

<span style="color:#94a3b8;"># If something looks wrong after restore:
#   → Use the safety backup from step [1] to roll back</span></pre>
                        </div>

                        {{-- TROUBLESHOOTING --}}
                        <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                            <i class="bi bi-wrench-adjustable-circle text-secondary me-1"></i>Troubleshooting
                        </h6>
                        <div class="table-responsive mb-5">
                            <table class="table table-hover align-middle mb-0" style="background:#f8fafc;border-radius:12px;overflow:hidden;">
                                <thead style="background:#e2e8f0;">
                                    <tr>
                                        <th class="ps-3">SYMPTOM</th>
                                        <th>LIKELY CAUSE</th>
                                        <th>FIX</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="ps-3 fw-bold text-dark">Backup button does nothing</td>
                                        <td class="small text-muted"><code>storage/app/backups/</code> not writable</td>
                                        <td class="small text-muted"><code>chmod -R 775 storage/</code></td>
                                    </tr>
                                    <tr>
                                        <td class="ps-3 fw-bold text-dark">"Requirements not met" alert</td>
                                        <td class="small text-muted"><code>mysqldump</code> / <code>pg_dump</code> not in PATH</td>
                                        <td class="small text-muted">Install DB client tools on the server</td>
                                    </tr>
                                    <tr>
                                        <td class="ps-3 fw-bold text-dark">Scheduled backup never runs</td>
                                        <td class="small text-muted">Laravel scheduler cron not registered</td>
                                        <td class="small text-muted">Add <code>* * * * * php artisan schedule:run</code> to crontab</td>
                                    </tr>
                                    <tr>
                                        <td class="ps-3 fw-bold text-dark">Google Drive upload fails</td>
                                        <td class="small text-muted">Refresh token expired or revoked</td>
                                        <td class="small text-muted">Re-authorize via the <i class="bi bi-key"></i> key button</td>
                                    </tr>
                                    <tr>
                                        <td class="ps-3 fw-bold text-dark">Disk fills up rapidly</td>
                                        <td class="small text-muted">Retention too high or hourly schedule on large DB</td>
                                        <td class="small text-muted">Lower retention, switch to daily, prune old archives manually</td>
                                    </tr>
                                    <tr>
                                        <td class="ps-3 fw-bold text-dark">Restore hangs / times out</td>
                                        <td class="small text-muted">Large archive, low PHP <code>max_execution_time</code></td>
                                        <td class="small text-muted">Run restore via CLI: <code>php artisan backup:restore {file}</code></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        {{-- BEST PRACTICES --}}
                        <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                            <i class="bi bi-stars text-success me-1"></i>Best practices
                        </h6>
                        <div class="row g-2 mb-5">
                            @php
                                $tips = [
                                    ['icon'=>'bi-cloud-arrow-up',     'title'=>'Use 3-2-1 rule',           'desc'=>'<span class="fw-bold">3</span> copies of data, on <span class="fw-bold">2</span> different storage types, with <span class="fw-bold">1</span> off-site (Google Drive).'],
                                    ['icon'=>'bi-check2-circle',      'title'=>'Test your restores',       'desc'=>'A backup you have never restored is just hope, not insurance. Test in staging every quarter.'],
                                    ['icon'=>'bi-clock',              'title'=>'Off-hours schedule',       'desc'=>'Pick a time when traffic is lowest (typically 02:00–04:00 local) to minimise lock contention.'],
                                    ['icon'=>'bi-shield-lock',        'title'=>'Restrict access',          'desc'=>'Only grant <code>manage backup and storage</code> to senior admins. Restore is one click away from catastrophe.'],
                                    ['icon'=>'bi-bar-chart-line',     'title'=>'Monitor storage health',   'desc'=>'Watch the dark widget in the sidebar — when it turns red, prune or expand storage.'],
                                    ['icon'=>'bi-clipboard-pulse',    'title'=>'Document recovery plan',   'desc'=>'Write down (outside this system) the exact steps to restore + who has the Google account credentials.'],
                                ];
                            @endphp
                            @foreach($tips as $tip)
                                <div class="col-md-6">
                                    <div class="d-flex align-items-start gap-2 p-3 rounded-3" style="background:#f0fdf4;border:1px solid #bbf7d0;">
                                        <i class="{{ $tip['icon'] }} text-success fs-5 mt-1"></i>
                                        <div>
                                            <div class="fw-bold text-dark mb-1" style="font-size:.85rem;">{{ $tip['title'] }}</div>
                                            <div class="small text-muted" style="line-height:1.6;">{!! $tip['desc'] !!}</div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- PERMISSIONS --}}
                        <h6 class="fw-bold text-uppercase mb-3" style="letter-spacing:.5px;">
                            <i class="bi bi-person-badge text-secondary me-1"></i>Permissions
                        </h6>
                        <div class="row g-2 mb-4">
                            <div class="col-md-6">
                                <div class="p-3 rounded-4" style="background:#f0fdf4;border:1px solid #bbf7d0;">
                                    <div class="fw-bold text-success mb-1"><code class="text-success">view backup and storage</code></div>
                                    <div class="small text-muted">Read-only access. Can see archive list and storage health but cannot create / restore / delete.</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-3 rounded-4" style="background:#fef2f2;border:1px solid #fecaca;">
                                    <div class="fw-bold text-danger mb-1"><code class="text-danger">manage backup and storage</code></div>
                                    <div class="small text-muted">Full control: create, restore, delete archives + change driver config + edit retention. <span class="fw-bold">Restrict tightly.</span></div>
                                </div>
                            </div>
                        </div>

                        {{-- FOOTER NOTE --}}
                        <div class="d-flex align-items-center gap-3 p-3 rounded-4" style="background:#fef3c7;border:1px solid #fde68a;">
                            <i class="bi bi-info-circle-fill text-warning fs-3"></i>
                            <div>
                                <div class="fw-bold text-dark mb-1" style="font-size:.85rem;">Where archives are stored on this server</div>
                                <div class="small text-muted">
                                    Local backups live at <code>storage/app/backups/</code>. They are <span class="fw-bold">excluded from your code repository</span> by <code>.gitignore</code>. To migrate archives to a new server, copy this directory (and the Google Drive token from Global Settings → Backup).
                                </div>
                            </div>
                        </div>

                        </div> {{-- closes p-4 p-lg-5 --}}
                    </div> {{-- closes modal-body --}}
                </div> {{-- closes modal-content --}}
            </div> {{-- closes modal-dialog --}}
        </div> {{-- closes modal --}}

        @push('scripts')
            <script>
                $(document).ready(function () {
                    function renderBackups(backups) {
                        const $tbody = $('#backup-list-table tbody');
                        $tbody.empty();

                        if (!backups || backups.length === 0) {
                            $tbody.append('<tr><td colspan="4" class="text-center py-5 text-muted small fw-bold">{{ __("No system archives found.") }}</td></tr>');
                            return;
                        }

                        backups.forEach(function (item) {
                            let storageIcon = 'bi-hdd text-secondary';
                            let storageClass = 'bg-secondary-subtle text-secondary';

                            if (item.storage === 'gdrive') {
                                storageIcon = 'bi-google text-primary';
                                storageClass = 'bg-primary-subtle text-primary';
                            } else if (item.storage === 's3') {
                                storageIcon = 'bi-clouds text-warning';
                                storageClass = 'bg-warning-subtle text-warning-emphasis';
                            }

                            $tbody.append(`
                                <tr>
                                    <td class="ps-4">
                                        <div class="d-flex align-items-center">
                                            <div class="avatar avatar-35 bg-light rounded-circle d-flex align-items-center justify-content-center me-3 border">
                                                <i class="bi ${storageIcon}"></i>
                                            </div>
                                            <div>
                                                <div class="fw-bold text-dark" style="font-size: 0.85rem; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${item.name}">${item.name.split('/').pop()}</div>
                                                <div class="d-flex align-items-center gap-2">
                                                    <span class="text-muted" style="font-size: 10px;">${item.size}</span>
                                                    <span class="badge ${storageClass} border-0 rounded-pill text-uppercase" style="font-size: 8px; padding: 2px 6px;">${item.storage}</span>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge bg-success-subtle text-success border border-success-subtle rounded-pill px-3 py-1" style="font-size: 10px;">
                                            ${item.status}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="text-muted small">${item.date}</span>
                                    </td>
                                    <td class="text-end pe-4">
                                        <div class="d-flex justify-content-end gap-1">
                                            <a href="{{ route('backup-restore.download') }}?disk=${item.storage}&path=${item.name}" class="btn btn-icon btn-sm btn-light rounded-circle" title="Download">
                                                <i class="bi bi-download"></i>
                                            </a>
                                            @can('manage backup and storage')
                                                <button type="button" class="btn btn-icon btn-sm btn-outline-primary rounded-circle btn-restore-backup" data-disk="${item.storage}" data-path="${item.name}" title="Restore">
                                                    <i class="bi bi-arrow-counterclockwise"></i>
                                                </button>
                                                <button type="button" class="btn btn-icon btn-sm btn-outline-danger rounded-circle btn-delete-backup" data-disk="${item.storage}" data-path="${item.name}" title="Delete">
                                                    <i class="bi bi-trash"></i>
                                                </button>
                                            @endcan
                                        </div>
                                    </td>
                                </tr>
                            `);
                        });
                    }

                    function loadBackups(driver = null) {
                        const $tbody = $('#backup-list-table tbody');
                        $tbody.html('<tr id="backup-loading"><td colspan="4" class="text-center py-5"><div class="spinner-border spinner-border-sm text-primary me-2"></div><span class="small fw-bold">{{ __("Refreshing inventory...") }}</span></td></tr>');

                        const url = new URL("{{ route('backup-restore.index') }}", window.location.origin);
                        if (driver) url.searchParams.append('driver', driver);

                        $.get(url.toString(), function (response) {
                            if (response.success) {
                                renderBackups(response.backups);
                                if (response.stats) {
                                    const stats = response.stats;
                                    $('#storage-health-widget').fadeIn();
                                    $('#health-label').text(stats.label + " Usage");
                                    $('#health-used').text(stats.used);

                                    $('#health-total').text(stats.total);
                                    $('#health-progress-bar').css('width', stats.percentage + '%');
                                    $('#health-progress-bar').removeClass('bg-success bg-warning bg-danger').addClass('bg-' + stats.health);
                                    $('#health-status').text(stats.percentage + '% Cap').removeClass('text-success text-warning text-danger bg-success-subtle bg-warning-subtle bg-danger-subtle').addClass('text-' + stats.health + ' bg-' + stats.health + '-subtle');

                                    if (stats.health === 'danger') {
                                        $('#storage-health-widget').addClass('pulse-danger border border-danger border-opacity-50');
                                    } else {
                                        $('#storage-health-widget').removeClass('pulse-danger border border-danger border-opacity-50');
                                    }

                                    $('#health-total-label').show();
                                    $('#health-progress-wrapper').show();

                                    if (stats.requirements && !stats.requirements.status) {
                                        $('#requirements-alert').fadeIn();
                                        $('#req-msg').text(stats.requirements.message);
                                    } else {
                                        $('#requirements-alert').hide();
                                    }
                                }
                            } else {
                                $tbody.html(`<tr><td colspan="4" class="text-center py-5 text-danger small fw-bold">${response.message || '{{ __("Failed to load inventory.") }}'}</td></tr>`);
                            }
                        });
                    }

                    loadBackups($('#backup_db_driver').val());

                    $('#btn-refresh-backups').on('click', function () {
                        const $icon = $(this).find('i');
                        $icon.addClass('animate-spin');
                        loadBackups($('#backup_db_driver').val());
                        setTimeout(() => $icon.removeClass('animate-spin'), 1000);
                    });

                    $('#backup_db_driver').on('change', function () {
                        const driver = $(this).val();

                        // UI Toggle
                        if (driver === 'gdrive') {
                            $('#cloud_config_wrapper').slideDown();
                            $('#gdrive_fields').fadeIn();
                        } else {
                            $('#cloud_config_wrapper').slideUp();
                        }

                        // Dynamic Usage Update
                        loadBackups(driver);
                    });

                    $('#btn-create-backup').on('click', function () {
                        const $btn = $(this);
                        const original = $btn.html();
                        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Preparing...');

                        $.post("{{ route('backup-restore.create') }}", { _token: "{{ csrf_token() }}" }, function (response) {
                            if (response.success) {
                                renderBackups(response.backups || []);
                                StandardSwal.fire({ title: "Backup Started", text: response.message, icon: 'success', timer: 2000, showConfirmButton: false });
                            } else {
                                StandardSwal.fire({ title: 'Error', text: response.message, icon: 'error' });
                            }
                        }).always(() => $btn.prop('disabled', false).html(original));
                    });

                    $(document).on('click', '.btn-delete-backup', function () {
                        const $btn = $(this);
                        StandardSwal.fire({
                            title: "Delete Archive?",
                            text: "This file will be permanently removed from storage.",
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: "Delete Now"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                $.post("{{ route('backup-restore.delete') }}", {
                                    _token: "{{ csrf_token() }}",
                                    disk: $btn.data('disk'),
                                    path: $btn.data('path')
                                }, function (response) {
                                    if (response.success) {
                                        renderBackups(response.backups);
                                        StandardSwal.fire({ title: "Deleted", text: response.message, icon: 'success', timer: 1500, showConfirmButton: false });
                                    }
                                });
                            }
                        });
                    });

                    $(document).on('click', '.btn-restore-backup', function () {
                        const $btn = $(this);
                        StandardSwal.fire({
                            title: "{{ __('Restore System?') }}",
                            html: `
                                <div class="text-start small">
                                    <p class="mb-3">{{ __('This will replace your current database with the selected archive. The system will enter Maintenance Mode during the process.') }}</p>
                                    <div class="alert alert-danger border-0 shadow-sm d-flex align-items-center gap-3 mb-0">
                                        <i class="bi bi-exclamation-octagon display-6"></i>
                                        <div>
                                            <strong class="d-block">{{ __('CRITICAL ACTION') }}</strong>
                                            {{ __('All current unsaved data will be lost permanently.') }}
                                        </div>
                                    </div>
                                </div>
                            `,
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonText: "{{ __('I Understand, Restore Now') }}",
                            confirmButtonColor: '#dc3545',
                            cancelButtonText: "{{ __('Cancel') }}"
                        }).then((result) => {
                            if (result.isConfirmed) {
                                StandardSwal.fire({ 
                                    title: "{{ __('System Restoration In Progress') }}", 
                                    html: "{{ __('Please wait, do not close this window. The system is currently in Maintenance Mode.') }}",
                                    allowOutsideClick: false, 
                                    didOpen: () => StandardSwal.showLoading() 
                                });
                                
                                $.post("{{ route('backup-restore.restore') }}", {
                                    _token: "{{ csrf_token() }}",
                                    disk: $btn.data('disk'),
                                    path: $btn.data('path')
                                }, function (response) {
                                    StandardSwal.fire({ title: "{{ __('Restored Successfully') }}", text: response.message, icon: 'success', timer: 3000 });
                                    setTimeout(() => location.reload(), 3000);
                                }).fail(function(xhr) {
                                    const msg = xhr.responseJSON?.message || '{{ __("Restoration failed. System is back online.") }}';
                                    StandardSwal.fire({ title: "{{ __('Restoration Failed') }}", text: msg, icon: 'error' });
                                });
                            }
                        });
                    });

                    $('.btn-test-connection').on('click', function () {
                        const $btn = $(this);
                        const original = $btn.html();
                        $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');
                        $.post("{{ route('backup-restore.test-connection') }}", {
                            _token: "{{ csrf_token() }}",
                            driver: $btn.data('driver')
                        }, function (response) {
                            StandardSwal.fire({ title: response.success ? "Success" : "Failed", text: response.message, icon: response.success ? 'success' : 'error' });
                        }).always(() => $btn.prop('disabled', false).html(original));
                    });

                    $('#btn-gdrive-auth').on('click', function (e) {
                        const clientId = $('input[name="gdrive_client_id"]').val();
                        const clientSecret = $('input[name="gdrive_client_secret"]').val();
                        if (!clientId || !clientSecret) {
                            e.preventDefault();
                            StandardSwal.fire({ title: "Auth Failed", text: "Save Client ID & Secret first.", icon: 'warning' });
                        }
                    });
                });
            </script>
        @endpush
</x-app-layout>