@extends('layouts.admin')

@section('title', 'Database Backups')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Database Backups</h1>
            <p class="text-muted">Manage all database backups</p>
        </div>
        <div>
            <a href="{{ route('admin.database-backup.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>Create Backup
            </a>
            <a href="{{ route('admin.database-backup.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
            </a>
        </div>
    </div>

    <!-- Filters -->
    <div class="card shadow mb-4">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.database-backup.backups') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="search" class="form-label">Search</label>
                    <input type="text" class="form-control" id="search" name="search" 
                           value="{{ request('search') }}" placeholder="Search by name...">
                </div>
                <div class="col-md-2">
                    <label for="status" class="form-label">Status</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">All Statuses</option>
                        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="in_progress" {{ request('status') === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                        <option value="completed" {{ request('status') === 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>Failed</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="type" class="form-label">Type</label>
                    <select class="form-select" id="type" name="type">
                        <option value="">All Types</option>
                        <option value="manual" {{ request('type') === 'manual' ? 'selected' : '' }}>Manual</option>
                        <option value="automatic" {{ request('type') === 'automatic' ? 'selected' : '' }}>Automatic</option>
                        <option value="scheduled" {{ request('type') === 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-1"></i>Filter
                        </button>
                        <a href="{{ route('admin.database-backup.backups') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>Clear
                        </a>
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label">&nbsp;</label>
                    <button type="button" class="btn btn-outline-danger w-100" onclick="showBulkDeleteModal()" 
                            id="bulkDeleteBtn" style="display: none;">
                        <i class="fas fa-trash me-1"></i>Delete Selected
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Backups Table -->
    <div class="card shadow">
        <div class="card-header py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">
                    Backups ({{ $backups->total() }} total)
                </h6>
                <div>
                    <input type="checkbox" id="selectAll" onchange="toggleSelectAll()">
                    <label for="selectAll" class="ms-1">Select All</label>
                </div>
            </div>
        </div>
        <div class="card-body">
            @if($backups->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th width="40px">
                                    <input type="checkbox" id="selectAllTable" onchange="toggleSelectAll()">
                                </th>
                                <th>Name</th>
                                <th>Type</th>
                                <th>Status</th>
                                <th>Size</th>
                                <th>Duration</th>
                                <th>Created</th>
                                <th>Created By</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($backups as $backup)
                            <tr>
                                <td>
                                    <input type="checkbox" class="backup-checkbox" value="{{ $backup->id }}" 
                                           onchange="updateBulkDeleteButton()">
                                </td>
                                <td>
                                    <div class="fw-bold">{{ $backup->name }}</div>
                                    @if($backup->description)
                                        <small class="text-muted">{{ Str::limit($backup->description, 60) }}</small>
                                    @endif
                                    @if($backup->compressed)
                                        <span class="badge bg-info badge-sm ms-1">Compressed</span>
                                    @endif
                                </td>
                                <td>
                                    <span class="badge bg-{{ $backup->type_badge }}">
                                        {{ ucfirst($backup->type) }}
                                    </span>
                                </td>
                                <td>
                                    <span class="badge bg-{{ $backup->status_badge }}">
                                        {{ ucfirst(str_replace('_', ' ', $backup->status)) }}
                                    </span>
                                    @if($backup->status === 'failed' && $backup->error_message)
                                        <i class="fas fa-exclamation-triangle text-danger ms-1" 
                                           title="{{ $backup->error_message }}"></i>
                                    @endif
                                </td>
                                <td>
                                    @if($backup->status === 'completed')
                                        {{ $backup->formatted_file_size }}
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    @if($backup->duration)
                                        {{ $backup->duration }}
                                    @elseif($backup->status === 'in_progress')
                                        <span class="text-warning">In progress...</span>
                                    @else
                                        <span class="text-muted">-</span>
                                    @endif
                                </td>
                                <td>
                                    <div>{{ $backup->created_at->format('M d, Y') }}</div>
                                    <small class="text-muted">{{ $backup->created_at->format('H:i:s') }}</small>
                                </td>
                                <td>{{ $backup->creator->name ?? 'System' }}</td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{{ route('admin.database-backup.show', $backup) }}" 
                                           class="btn btn-sm btn-outline-primary" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        @if($backup->status === 'completed' && $backup->fileExists())
                                            <a href="{{ route('admin.database-backup.download', $backup) }}" 
                                               class="btn btn-sm btn-outline-success" title="Download">
                                                <i class="fas fa-download"></i>
                                            </a>
                                            <button type="button" class="btn btn-sm btn-outline-warning" 
                                                    onclick="testBackup({{ $backup->id }})" title="Test Backup">
                                                <i class="fas fa-vial"></i>
                                            </button>
                                        @endif
                                        <form method="POST" action="{{ route('admin.database-backup.destroy', $backup) }}" 
                                              class="d-inline" onsubmit="return confirm('Are you sure you want to delete this backup?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <div class="d-flex justify-content-center">
                    {{ $backups->appends(request()->query())->links() }}
                </div>
            @else
                <div class="text-center py-4">
                    <i class="fas fa-database fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No backups found</h5>
                    <p class="text-muted">No backups match your current filters.</p>
                    <a href="{{ route('admin.database-backup.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>Create First Backup
                    </a>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Bulk Delete Modal -->
<div class="modal fade" id="bulkDeleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('admin.database-backup.bulk-delete') }}" id="bulkDeleteForm">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title">Delete Selected Backups</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Are you sure you want to delete the selected backups? This action cannot be undone.
                    </div>
                    <div id="selectedBackupsCount"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete Backups</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Test Result Modal -->
<div class="modal fade" id="testResultModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Backup Test Result</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="testResultContent">
                <!-- Test result will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<script>
function toggleSelectAll() {
    const selectAllCheckbox = document.getElementById('selectAll') || document.getElementById('selectAllTable');
    const checkboxes = document.querySelectorAll('.backup-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAllCheckbox.checked;
    });
    
    updateBulkDeleteButton();
}

function updateBulkDeleteButton() {
    const checkedBoxes = document.querySelectorAll('.backup-checkbox:checked');
    const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
    
    if (checkedBoxes.length > 0) {
        bulkDeleteBtn.style.display = 'block';
        bulkDeleteBtn.textContent = `Delete Selected (${checkedBoxes.length})`;
    } else {
        bulkDeleteBtn.style.display = 'none';
    }
}

function showBulkDeleteModal() {
    const checkedBoxes = document.querySelectorAll('.backup-checkbox:checked');
    const form = document.getElementById('bulkDeleteForm');
    const countDiv = document.getElementById('selectedBackupsCount');
    
    // Clear existing hidden inputs
    form.querySelectorAll('input[name="backup_ids[]"]').forEach(input => input.remove());
    
    // Add selected backup IDs
    checkedBoxes.forEach(checkbox => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'backup_ids[]';
        input.value = checkbox.value;
        form.appendChild(input);
    });
    
    countDiv.innerHTML = `<strong>${checkedBoxes.length}</strong> backup(s) will be deleted.`;
    
    new bootstrap.Modal(document.getElementById('bulkDeleteModal')).show();
}

function testBackup(backupId) {
    const modal = new bootstrap.Modal(document.getElementById('testResultModal'));
    const content = document.getElementById('testResultContent');
    
    content.innerHTML = '<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Testing backup...</div>';
    modal.show();
    
    fetch(`/admin/database-backup/${backupId}/test`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                content.innerHTML = `
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>
                        ${data.message}
                    </div>
                    <div class="row">
                        <div class="col-sm-6"><strong>File Size:</strong></div>
                        <div class="col-sm-6">${data.file_size}</div>
                    </div>
                    <div class="row">
                        <div class="col-sm-6"><strong>Created:</strong></div>
                        <div class="col-sm-6">${data.created_at}</div>
                    </div>
                    ${data.tables_included ? `
                    <div class="row">
                        <div class="col-sm-6"><strong>Tables:</strong></div>
                        <div class="col-sm-6">${data.tables_included.length} tables</div>
                    </div>
                    ` : ''}
                `;
            } else {
                content.innerHTML = `
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        ${data.message}
                    </div>
                `;
            }
        })
        .catch(error => {
            content.innerHTML = `
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Error testing backup: ${error.message}
                </div>
            `;
        });
}

// Auto-refresh for in-progress backups
setInterval(function() {
    const inProgressRows = document.querySelectorAll('tr:has(.badge:contains("In Progress"))');
    if (inProgressRows.length > 0) {
        location.reload();
    }
}, 10000); // Refresh every 10 seconds if there are in-progress backups
</script>
@endsection