@extends('layouts.app')

@section('content')
<div class="container-fluid">
    {{-- Header Section --}}
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center flex-wrap">
                <h2 class="mb-3 mb-md-0">
                    <i class="fas fa-database me-2"></i>
                    النسخ الاحتياطية
                </h2>
                <div class="btn-group" role="group">
                    {{-- زر إنشاء نسخة احتياطية --}}
                    <form action="{{ route('backups.create') }}" method="POST" class="d-inline">
                        @csrf
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>
                            إنشاء نسخة احتياطية
                        </button>
                    </form>
                    
                    {{-- زر نقل إلى Public --}}
                    <form action="{{ route('backups.move-to-public') }}" method="POST" class="d-inline ms-2">
                        @csrf
                        <button type="submit" class="btn btn-info" 
                                onclick="return confirm('هل تريد نقل جميع النسخ الاحتياطية إلى مجلد public/backups؟');">
                            <i class="fas fa-folder-open me-2"></i>
                            نقل إلى Public
                        </button>
                    </form>
                    
                    {{-- زر تحديث --}}
                    <a href="{{ route('backups.index') }}" class="btn btn-secondary ms-2">
                        <i class="fas fa-sync-alt me-2"></i>
                        تحديث
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Success Message --}}
    @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    {{-- Error Message --}}
    @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle me-2"></i>
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    {{-- Info Message --}}
    @if(session('info'))
    <div class="alert alert-info alert-dismissible fade show" role="alert">
        <i class="fas fa-info-circle me-2"></i>
        {{ session('info') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    @endif

    {{-- Backups Table --}}
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">
                <i class="fas fa-list me-2"></i>
                قائمة النسخ الاحتياطية ({{ count($backups) }})
            </h5>
        </div>
        <div class="card-body">
            @if(count($backups) > 0)
            <div class="table-responsive">
                <table class="table table-striped table-hover align-middle">
                    <thead class="table-dark">
                        <tr>
                            <th width="5%">#</th>
                            <th width="35%">اسم الملف</th>
                            <th width="10%">الحجم</th>
                            <th width="20%">تاريخ الإنشاء</th>
                            <th width="10%">الموقع</th>
                            <th width="20%">العمليات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($backups as $index => $backup)
                        <tr>
                            {{-- الرقم --}}
                            <td>
                                <strong>{{ $index + 1 }}</strong>
                            </td>
                            
                            {{-- اسم الملف --}}
                            <td>
                                <code class="text-primary">{{ $backup['filename'] }}</code>
                            </td>
                            
                            {{-- الحجم --}}
                            <td>
                                @php
                                    $sizeInMB = $backup['size'] / 1024 / 1024;
                                @endphp
                                @if($sizeInMB >= 1)
                                    <span class="badge bg-info">{{ number_format($sizeInMB, 2) }} MB</span>
                                @else
                                    <span class="badge bg-secondary">{{ number_format($backup['size'] / 1024, 2) }} KB</span>
                                @endif
                            </td>
                            
                            {{-- تاريخ الإنشاء --}}
                            <td>
                                <i class="fas fa-calendar text-muted me-1"></i>
                                <small>{{ $backup['created_at']->format('Y-m-d') }}</small>
                                <br>
                                <i class="fas fa-clock text-muted me-1"></i>
                                <small>{{ $backup['created_at']->format('H:i:s') }}</small>
                                <br>
                                <small class="text-muted fst-italic">
                                    {{ $backup['created_at']->diffForHumans() }}
                                </small>
                            </td>
                            
                            {{-- الموقع --}}
                            <td>
                                @if($backup['in_public'])
                                    <span class="badge bg-success">
                                        <i class="fas fa-check-circle me-1"></i>
                                        Public
                                    </span>
                                @else
                                    <span class="badge bg-warning text-dark">
                                        <i class="fas fa-lock me-1"></i>
                                        Storage
                                    </span>
                                @endif
                            </td>
                            
                            {{-- العمليات --}}
                            <td>
                                <div class="btn-group btn-group-sm" role="group">
                               @if($backup['in_public'])
                                    {{-- إذا كان الملف موجود في public، استخدم صفحة PHP بسيطة --}}
                                    <a href="{{ url('backups/download.php?file=' . rawurlencode($backup['filename'])) }}" 
                                       class="btn btn-success btn-sm"
                                       title="تحميل من Public (PHP Script)">
                                        <i class="fas fa-download me-1"></i>
                                        تحميل
                                    </a>
                                    <a href="{{ url('backups/' . rawurlencode($backup['filename'])) }}" 
                                       class="btn btn-secondary btn-sm"
                                       title="تحميل مباشر من الملف"
                                       download="{{ $backup['filename'] }}">
                                        <i class="fas fa-file-download me-1"></i>
                                        مباشر
                                    </a>
                                @else
                                    {{-- إذا لم يكن موجود في public، استخدم route للتحميل من storage --}}
                                    <a href="{{ route('backups.download', ['filename' => rawurlencode($backup['filename'])]) }}" 
                                       class="btn btn-primary btn-sm"
                                       title="تحميل من Storage">
                                        <i class="fas fa-download me-1"></i>
                                        تحميل
                                    </a>
                                @endif
                                    
                                    {{-- زر استعادة --}}
                                    <form action="{{ route('backups.restore', ['filename' => rawurlencode($backup['filename'])]) }}" 
                                          method="POST" 
                                          class="d-inline restore-form"
                                          style="display: inline-block;"
                                          id="restore-form-{{ $index }}">
                                        @csrf
                                        <input type="hidden" name="_method" value="POST">
                                        <button type="submit" 
                                                class="btn btn-warning btn-sm restore-submit-btn" 
                                                title="استعادة النسخة الاحتياطية"
                                                data-filename="{{ $backup['filename'] }}">
                                            <i class="fas fa-undo me-1"></i>
                                            استعادة
                                        </button>
                                    </form>
                                    
                                    {{-- زر حذف --}}
                                    <form action="{{ route('backups.destroy', $backup['filename']) }}" 
                                          method="POST" 
                                          class="d-inline"
                                          onsubmit="return confirm('هل أنت متأكد من حذف النسخة الاحتياطية: {{ $backup['filename'] }}؟\n\nتحذير: لا يمكن التراجع عن هذا الإجراء!');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-sm" title="حذف">
                                            <i class="fas fa-trash me-1"></i>
                                            حذف
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <td colspan="2" class="text-end"><strong>الإجمالي:</strong></td>
                            <td colspan="4">
                                @php
                                    $totalSize = collect($backups)->sum('size');
                                    $totalSizeInMB = $totalSize / 1024 / 1024;
                                @endphp
                                <span class="badge bg-primary">
                                    {{ count($backups) }} ملف
                                </span>
                                <span class="badge bg-info">
                                    {{ number_format($totalSizeInMB, 2) }} MB
                                </span>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            @else
            {{-- لا توجد نسخ احتياطية --}}
            <div class="alert alert-info text-center mb-0">
                <i class="fas fa-info-circle fa-2x mb-3"></i>
                <h5>لا توجد نسخ احتياطية حالياً</h5>
                <p class="mb-0">يمكنك إنشاء نسخة احتياطية جديدة باستخدام الزر أعلاه</p>
            </div>
            @endif
        </div>
    </div>

    {{-- معلومات النسخ الاحتياطي --}}
    <div class="card mt-4 shadow-sm">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0">
                <i class="fas fa-info-circle me-2"></i>
                معلومات هامة
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6 class="text-primary">
                        <i class="fas fa-robot me-2"></i>
                        النسخ الاحتياطي التلقائي:
                    </h6>
                    <ul>
                        <li>يتم إنشاء نسخة احتياطية تلقائياً <strong>يومياً</strong></li>
                        <li>الموعد: الساعة <strong>2:00 صباحاً</strong></li>
                        <li>يتم حذف النسخ القديمة بعد <strong>30 يوم</strong></li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6 class="text-success">
                        <i class="fas fa-folder me-2"></i>
                        مواقع التخزين:
                    </h6>
                    <ul>
                        <li><code>storage/app/backups/</code> - التخزين الافتراضي (آمن)</li>
                        <li><code>public/backups/</code> - بعد النقل (للتحميل المباشر)</li>
                    </ul>
                </div>
            </div>
            
            <hr>
            
            <div class="alert alert-warning mb-0">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <strong>تنبيه:</strong> 
                النسخ الموجودة في <code>public/backups</code> يمكن الوصول إليها مباشرة عبر الويب. 
                تأكد من تأمين السيرفر بشكل صحيح.
            </div>
        </div>
    </div>

    {{-- شرح الأزرار --}}
    <div class="card mt-4 shadow-sm">
        <div class="card-header bg-secondary text-white">
            <h5 class="mb-0">
                <i class="fas fa-question-circle me-2"></i>
                شرح الأزرار
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <button class="btn btn-primary btn-sm w-100" disabled>
                        <i class="fas fa-plus me-2"></i>
                        إنشاء نسخة احتياطية
                    </button>
                    <small class="text-muted d-block mt-2">إنشاء نسخة احتياطية جديدة فوراً من قاعدة البيانات</small>
                </div>
                <div class="col-md-4 mb-3">
                    <button class="btn btn-info btn-sm w-100" disabled>
                        <i class="fas fa-folder-open me-2"></i>
                        نقل إلى Public
                    </button>
                    <small class="text-muted d-block mt-2">نقل جميع النسخ من Storage إلى Public للتحميل المباشر</small>
                </div>
                <div class="col-md-4 mb-3">
                    <button class="btn btn-success btn-sm w-100" disabled>
                        <i class="fas fa-download me-2"></i>
                        تحميل
                    </button>
                    <small class="text-muted d-block mt-2">تحميل النسخة الاحتياطية إلى جهازك</small>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Custom Styles --}}
<style>
    .table code {
        background-color: #f8f9fa;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.875em;
        color: #0d6efd;
        border: 1px solid #dee2e6;
    }
    
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .card {
        border: none;
        border-radius: 10px;
    }
    
    .card-header {
        border-radius: 10px 10px 0 0 !important;
    }
    
    .table-responsive {
        border-radius: 8px;
        max-height: 600px;
    }
    
    .badge {
        font-size: 0.8rem;
        padding: 0.35em 0.65em;
    }
    
    @media (max-width: 768px) {
        .btn-group {
            flex-direction: column;
            width: 100%;
        }
        
        .btn-group .btn,
        .btn-group form {
            width: 100%;
            margin: 5px 0 !important;
        }
        
        .table-responsive {
            font-size: 0.85rem;
        }
    }
    
    .alert {
        border-left: 4px solid;
        border-radius: 8px;
    }
    
    .alert-success {
        border-left-color: #198754;
    }
    
    .alert-danger {
        border-left-color: #dc3545;
    }
    
    .alert-info {
        border-left-color: #0dcaf0;
    }
    
    .alert-warning {
        border-left-color: #ffc107;
    }
    
    tbody tr:hover {
        background-color: rgba(13, 110, 253, 0.05);
        transition: all 0.3s ease;
    }
</style>

{{-- Custom Scripts --}}
<script>
    // Auto dismiss alerts after 5 seconds
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            let alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                let bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
    });
    
    // Handle restore form submission - يجب أن يكون قبل event listeners العامة
    document.addEventListener('DOMContentLoaded', function() {
        let restoreForms = document.querySelectorAll('.restore-form');
        
        restoreForms.forEach(function(form) {
            form.addEventListener('submit', function(e) {
                let submitBtn = this.querySelector('.restore-submit-btn');
                if (!submitBtn) return true;
                
                // التحقق إذا كان الزر معطل (يعني تم التأكيد مسبقاً)
                if (submitBtn.disabled) {
                    return true; // السماح بالإرسال
                }
                
                e.preventDefault(); // منع الإرسال الافتراضي مؤقتاً
                e.stopPropagation(); // منع انتشار الحدث
                
                let filename = submitBtn.getAttribute('data-filename');
                let originalBtn = submitBtn;
                let formElement = this;
                
                // التحقق من التأكيد
                let message = '⚠️ تحذير خطير ⚠️\n\n';
                message += 'أنت على وشك استعادة نسخة احتياطية: ' + filename + '\n\n';
                message += 'هذه العملية سوف:\n';
                message += '• تحذف جميع البيانات الحالية في قاعدة البيانات\n';
                message += '• تستبدلها بالبيانات من النسخة الاحتياطية\n';
                message += '• لا يمكن التراجع عن هذا الإجراء!\n\n';
                message += '⚠️ للتأكيد، اكتب الكلمة التالية في المربع:\n';
                message += '📝 اكتب: استعادة\n\n';
                message += '(يجب أن تطابق الكلمة بالضبط)';
                
                let confirmation = prompt(message, '');
                
                if (confirmation === null) {
                    return false; // User cancelled
                }
                
                if (confirmation.trim() !== 'استعادة') {
                    alert('❌ خطأ في التأكيد!\n\n' +
                          'لم تطابق الكلمة المطلوبة.\n' +
                          'يجب أن تكتب بالضبط: استعادة\n\n' +
                          'تم إلغاء العملية.');
                    return false;
                }
                
                // Final confirmation
                let finalConfirm = confirm('⚠️ تحذير نهائي ⚠️\n\n' +
                    'أنت على وشك استعادة النسخة الاحتياطية:\n' +
                    filename + '\n\n' +
                    '⚠️ جميع البيانات الحالية سوف تُحذف!\n' +
                    '⚠️ لا يمكن التراجع عن هذا الإجراء!\n\n' +
                    'هل أنت متأكد 100% من المتابعة؟');
                
                if (!finalConfirm) {
                    return false;
                }
                
                // تعطيل الزر
                originalBtn.disabled = true;
                originalBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>جاري الاستعادة...';
                
                // إنشاء form جديد وإرساله للتأكد من POST
                let newForm = document.createElement('form');
                newForm.method = 'POST';
                newForm.action = formElement.action;
                newForm.style.display = 'none';
                
                // نسخ جميع inputs من الـ form الأصلي
                let inputs = formElement.querySelectorAll('input, select, textarea');
                inputs.forEach(function(input) {
                    let newInput = input.cloneNode(true);
                    newForm.appendChild(newInput);
                });
                
                // إضافة form إلى body وإرساله
                document.body.appendChild(newForm);
                newForm.submit();
                
                return false;
            }, true); // استخدام capture phase
        });
    });
    
    // Confirm before leaving if form is being submitted (لجميع الـ forms الأخرى)
    document.addEventListener('DOMContentLoaded', function() {
        let forms = document.querySelectorAll('form:not(.restore-form)');
        forms.forEach(function(form) {
            form.addEventListener('submit', function() {
                // Show loading spinner or disable button
                let submitBtn = this.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>جاري المعالجة...';
                }
            });
        });
    });
</script>
@endsection