@extends('admin.layouts.app')

@section('title', 'Backup Manager')

@section('content')

<style>
    /* ============================================
       BACKUP MANAGER - CUSTOM STYLES
    ============================================ */

    .backup-wrapper {
        padding: 0 4px;
    }

    /* Action Cards */
    .action-card {
        background: #FFFFFF;
        border-radius: 14px;
        border: 1px solid #E8E8E8;
        padding: 24px;
        text-align: center;
        transition: all 0.3s ease;
        height: 100%;
        box-shadow: 0 2px 20px rgba(0, 0, 0, 0.02);
    }

    .action-card:hover {
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.04);
        border-color: rgba(193, 18, 31, 0.08);
        transform: translateY(-2px);
    }

    .action-card .action-icon {
        font-size: 48px;
        color: #22C55E;
        display: block;
        margin-bottom: 12px;
        opacity: 0.8;
    }

    .action-card .action-title {
        font-size: 16px;
        font-weight: 600;
        color: #1A1A2E;
        margin-bottom: 6px;
    }

    .action-card .action-desc {
        font-size: 13px;
        color: #6B7280;
        margin-bottom: 16px;
    }

    .action-card .btn-create-backup {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 24px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background: linear-gradient(135deg, #C1121F, #780000);
        border: none;
        color: #FFFFFF;
        box-shadow: 0 4px 16px rgba(193, 18, 31, 0.25);
        width: 100%;
        justify-content: center;
        text-decoration: none;
    }

    .action-card .btn-create-backup:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 28px rgba(193, 18, 31, 0.35);
        color: #FFFFFF;
    }

    /* Stat Cards */
    .stat-card-small {
        background: #FFFFFF;
        border-radius: 12px;
        border: 1px solid #E8E8E8;
        padding: 16px 20px;
        display: flex;
        align-items: center;
        gap: 14px;
        transition: all 0.3s ease;
        height: 100%;
    }

    .stat-card-small:hover {
        border-color: rgba(193, 18, 31, 0.08);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }

    .stat-card-small .stat-icon {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .stat-card-small .stat-icon.info {
        background: rgba(59, 130, 246, 0.08);
        color: #3B82F6;
    }

    .stat-card-small .stat-icon.danger {
        background: rgba(220, 38, 38, 0.08);
        color: #DC2626;
    }

    .stat-card-small .stat-content .stat-label {
        font-size: 12px;
        color: #6B7280;
        font-weight: 400;
    }

    .stat-card-small .stat-content .stat-value {
        font-size: 18px;
        font-weight: 700;
        color: #1A1A2E;
        display: block;
        margin-top: 2px;
    }

    .alert-warning-custom {
        background: #FFFBEB;
        border: 1px solid #FDE68A;
        color: #F59E0B;
        padding: 12px 18px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 12px;
    }

    .alert-warning-custom i {
        font-size: 18px;
    }

    /* Alert */
    .alert-custom {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        border-radius: 12px;
        margin-bottom: 20px;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        animation: slideDown 0.4s ease;
    }

    .alert-custom .alert-close {
        margin-left: auto;
        background: none;
        border: none;
        color: inherit;
        opacity: 0.5;
        cursor: pointer;
        font-size: 18px;
        padding: 4px;
        transition: all 0.3s ease;
    }

    .alert-custom .alert-close:hover {
        opacity: 1;
        transform: rotate(90deg);
    }

    .alert-success-custom {
        background: #F0FDF4;
        border: 1px solid #BBF7D0;
        color: #16A34A;
    }

    .alert-error-custom {
        background: #FEF2F2;
        border: 1px solid #FECACA;
        color: #DC2626;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-12px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Table row actions */
    .action-buttons-sm {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .action-btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: 1px solid #E8E8E8;
        background: #FFFFFF;
        color: #6B7280;
        transition: all 0.3s ease;
        cursor: pointer;
        text-decoration: none;
        font-size: 13px;
    }

    .action-btn-sm:hover {
        transform: translateY(-2px);
    }

    .action-btn-sm.download:hover {
        background: rgba(34, 197, 94, 0.08);
        border-color: #22C55E;
        color: #22C55E;
    }

    .action-btn-sm.restore:hover {
        background: rgba(245, 158, 11, 0.08);
        border-color: #F59E0B;
        color: #F59E0B;
    }

    .action-btn-sm.delete:hover {
        background: rgba(220, 38, 38, 0.08);
        border-color: #DC2626;
        color: #DC2626;
    }

    /* Modal Custom */
    .modal-content-custom {
        background: #FFFFFF;
        border-radius: 16px;
        border: 1px solid #E8E8E8;
        padding: 0;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .modal-header-custom {
        padding: 16px 24px;
        border-bottom: 1px solid #F0F0F0;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .modal-header-custom.warning {
        background: #FFFBEB;
    }

    .modal-header-custom.danger {
        background: #FEF2F2;
    }

    .modal-header-custom .modal-icon {
        font-size: 22px;
    }

    .modal-header-custom .modal-icon.warning {
        color: #F59E0B;
    }

    .modal-header-custom .modal-icon.danger {
        color: #DC2626;
    }

    .modal-header-custom h5 {
        font-size: 16px;
        font-weight: 600;
        color: #1A1A2E;
        margin: 0;
        flex: 1;
    }

    .modal-header-custom .modal-close {
        background: none;
        border: none;
        color: #6B7280;
        font-size: 20px;
        cursor: pointer;
        padding: 4px;
        transition: all 0.3s ease;
    }

    .modal-header-custom .modal-close:hover {
        color: #1A1A2E;
        transform: rotate(90deg);
    }

    .modal-body-custom {
        padding: 20px 24px;
    }

    .modal-body-custom p {
        font-size: 14px;
        color: #4A5568;
        margin: 0 0 6px;
    }

    .modal-body-custom .text-danger {
        color: #DC2626;
    }

    .modal-body-custom .filename-highlight {
        display: inline-block;
        padding: 4px 12px;
        background: #F8F9FA;
        border-radius: 6px;
        font-family: 'Courier New', monospace;
        font-size: 13px;
        color: #1A1A2E;
        border: 1px solid #E8E8E8;
        margin-top: 6px;
    }

    .modal-footer-custom {
        padding: 14px 24px;
        border-top: 1px solid #F0F0F0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
    }

    .btn-cancel-modal {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 500;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #F8F9FA;
        border: 1px solid #E8E8E8;
        color: #4A5568;
    }

    .btn-cancel-modal:hover {
        background: #E8E8E8;
    }

    .btn-restore-modal {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #F59E0B;
        border: none;
        color: #FFFFFF;
    }

    .btn-restore-modal:hover {
        background: #D97706;
        transform: translateY(-2px);
    }

    .btn-delete-modal {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 20px;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        transition: all 0.3s ease;
        background: #DC2626;
        border: none;
        color: #FFFFFF;
    }

    .btn-delete-modal:hover {
        background: #B91C1C;
        transform: translateY(-2px);
    }

    .empty-state-backup {
        text-align: center;
        padding: 50px 20px;
    }

    .empty-state-backup i {
        font-size: 48px;
        color: #D1D5DB;
        opacity: 0.5;
        display: block;
        margin-bottom: 12px;
    }

    .empty-state-backup h5 {
        color: #1A1A2E;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 4px;
    }

    .empty-state-backup p {
        color: #6B7280;
        font-size: 14px;
        margin: 0;
    }

    @media (max-width: 768px) {
        .action-card {
            padding: 18px;
        }

        .stat-card-small {
            padding: 12px 16px;
        }

        .stat-card-small .stat-content .stat-value {
            font-size: 16px;
        }

        .action-buttons-sm {
            flex-wrap: wrap;
            gap: 4px;
        }

        .modal-body-custom {
            padding: 16px 18px;
        }

        .modal-footer-custom {
            flex-direction: column;
        }

        .modal-footer-custom .btn-cancel-modal,
        .modal-footer-custom .btn-restore-modal,
        .modal-footer-custom .btn-delete-modal {
            width: 100%;
            justify-content: center;
        }
    }

    @media (max-width: 576px) {
        .action-card .action-icon {
            font-size: 36px;
        }

        .stat-card-small .stat-icon {
            width: 36px;
            height: 36px;
            font-size: 16px;
        }

        .stat-card-small .stat-content .stat-value {
            font-size: 14px;
        }

        .table-custom {
            min-width: 600px;
        }
    }
</style>

<!-- ============================================
   BACKUP MANAGER - REDSPIDER THEME
============================================ -->

<div class="backup-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li>
                <a href="{{ route('admin.dashboard') }}">
                    <i class="bi bi-house-door"></i> Dashboard
                </a>
            </li>
            <li class="active">Backup Manager</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Backup Manager</h1>
            <p>
                <i class="bi bi-database"></i> Create and manage database backups
            </p>
        </div>
    </div>

    <!-- ===== ALERTS ===== -->
    @if (session('success'))
    <div class="alert-custom alert-success-custom">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ session('success') }}</span>
        <button type="button" class="alert-close" onclick="this.closest('.alert-custom').remove()">
            <i class="bi bi-x"></i>
        </button>
    </div>
    @endif

    @if (session('error'))
    <div class="alert-custom alert-error-custom">
        <i class="bi bi-exclamation-circle-fill"></i>
        <span>{{ session('error') }}</span>
        <button type="button" class="alert-close" onclick="this.closest('.alert-custom').remove()">
            <i class="bi bi-x"></i>
        </button>
    </div>
    @endif

    <!-- ===== ACTION & STATS ROW ===== -->
    <div class="row g-4 mb-4">

        <!-- Create Backup -->
        <div class="col-md-4">
            <div class="action-card">
                <span class="action-icon"><i class="bi bi-database-add"></i></span>
                <div class="action-title">Create Backup</div>
                <div class="action-desc">Create a full database backup of your application</div>
                <form action="{{ route('admin.backups.create') }}" method="POST">
                    @csrf
                    <button type="submit" class="btn-create-backup" onclick="return confirm('Are you sure you want to create a backup? This may take a few moments.');">
                        <i class="bi bi-plus-circle"></i> Create Backup Now
                    </button>
                </form>
            </div>
        </div>

        <!-- Stats -->
        <div class="col-md-8">
            <div class="row g-3">
                <div class="col-md-6">
                    <div class="stat-card-small">
                        <div class="stat-icon info">
                           <!-- Folder -->
<i class="bi bi-folder"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-label">Total Backups</span>
                            <span class="stat-value">{{ count($backups) }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="stat-card-small">
                        <div class="stat-icon danger">
                            <i class="bi bi-hdd"></i>
                        </div>
                        <div class="stat-content">
                            <span class="stat-label">Total Size</span>
                            <span class="stat-value">{{ $totalSize }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Warning Alert -->
            <div class="alert-warning-custom" style="margin-top: 12px;">
                <i class="bi bi-exclamation-triangle"></i>
                <span>
                    <strong>Important:</strong> Backups are stored locally. Please download and store them securely.
                </span>
            </div>
        </div>
    </div>

    <!-- ===== BACKUP LIST ===== -->
    <div class="table-card-main">

        <div class="table-header-main">
            <h6>
                <i class="bi bi-list-ul"></i>
                Backup Files
                <span class="total-badge">{{ count($backups) }} Total</span>
            </h6>
        </div>

        <div class="table-responsive-wrapper">
            @if(count($backups) > 0)
            <table class="table-custom">
                <thead>
                    <tr>
                        <th width="50">#</th>
                        <th>Filename</th>
                        <th>Size</th>
                        <th>Created At</th>
                        <th width="150">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($backups as $index => $backup)
                    <tr>
                        <td>{{ $loop->iteration }}</td>
                        <td>
                            <div style="display: flex; align-items: center; gap: 8px;">
                                <i class="bi bi-file-archive" style="color: #3B82F6;"></i>
                                <span style="font-family: 'Courier New', monospace; font-size: 13px; color: #1A1A2E;">
                                    {{ $backup['filename'] }}
                                </span>
                            </div>
                        </td>
                        <td>{{ $backup['size_formatted'] }}</td>
                        <td>
                            <span class="date-cell">
                                <i class="bi bi-calendar3"></i>
                                {{ $backup['created_at_formatted'] }}
                            </span>
                        </td>
                        <td>
                            <div class="action-buttons-sm">
                                <!-- Download -->
                                <a href="{{ route('admin.backups.download', $backup['filename']) }}"
                                   class="action-btn-sm download"
                                   title="Download">
                                    <i class="bi bi-download"></i>
                                </a>

                               
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @else
            <div class="empty-state-backup">
                <i class="bi bi-database"></i>
                <h5>No Backups Found</h5>
                <p>Click "Create Backup Now" to create your first backup.</p>
            </div>
            @endif
        </div>

        @if(count($backups) > 0)
        <div class="table-footer-main">
            <div class="table-info">
                Showing <strong>{{ count($backups) }}</strong> backup files
            </div>
        </div>
        @endif

    </div>
</div>

<!-- ===== RESTORE MODAL ===== -->
<div class="modal fade" id="restoreModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content-custom">
            <div class="modal-header-custom warning">
                <span class="modal-icon warning"><i class="bi bi-exclamation-triangle"></i></span>
                <h5>Restore Database</h5>
                <button type="button" class="modal-close" data-bs-dismiss="modal">
                    <i class="bi bi-x"></i>
                </button>
            </div>
            <div class="modal-body-custom">
                <p><strong>Are you sure you want to restore this backup?</strong></p>
                <p class="text-danger"><i class="bi bi-exclamation-circle"></i> This will overwrite your current database. This action cannot be undone!</p>
                <span class="filename-highlight" id="restoreFilename"></span>
            </div>
            <div class="modal-footer-custom">
                <button type="button" class="btn-cancel-modal" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Cancel
                </button>
                <form id="restoreForm" method="POST">
                    @csrf
                    <button type="submit" class="btn-restore-modal">
                        <i class="bi bi-arrow-counterclockwise"></i> Restore Database
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- ===== DELETE MODAL ===== -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content-custom">
            <div class="modal-header-custom danger">
                <span class="modal-icon danger"><i class="bi bi-trash"></i></span>
                <h5>Delete Backup</h5>
                <button type="button" class="modal-close" data-bs-dismiss="modal">
                    <i class="bi bi-x"></i>
                </button>
            </div>
            <div class="modal-body-custom">
                <p><strong>Are you sure you want to delete this backup?</strong></p>
                <p class="text-danger"><i class="bi bi-exclamation-circle"></i> This action cannot be undone!</p>
                <span class="filename-highlight" id="deleteFilename"></span>
            </div>
            <div class="modal-footer-custom">
                <button type="button" class="btn-cancel-modal" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> Cancel
                </button>
                <form id="deleteForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn-delete-modal">
                        <i class="bi bi-trash3"></i> Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // RESTORE BACKUP
        // ============================================
        window.restoreBackup = function(filename) {
            document.getElementById('restoreFilename').textContent = filename;
            document.getElementById('restoreForm').action = '/admin/backups/' + filename + '/restore';
            const modal = new bootstrap.Modal(document.getElementById('restoreModal'));
            modal.show();
        };

        // ============================================
        // DELETE BACKUP
        // ============================================
        window.deleteBackup = function(filename) {
            document.getElementById('deleteFilename').textContent = filename;
            document.getElementById('deleteForm').action = '/admin/backups/' + filename + '/delete';
            const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
            modal.show();
        };

        // ============================================
        // CONFIRM CREATE BACKUP
        // ============================================
        document.querySelector('.btn-create-backup')?.addEventListener('click', function(e) {
            if (!confirm('Are you sure you want to create a backup? This may take a few moments.')) {
                e.preventDefault();
            }
        });

        console.log('✅ Backup Manager loaded successfully!');
    });
</script>

@endsection