@extends('layouts.admin')

@section('title', 'Create Database Backup')

@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">Create Database Backup</h1>
            <p class="text-muted">Create a new backup of the database</p>
        </div>
        <div>
            <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>

    <!-- Requirements Check -->
    @if(!empty($requirements))
        <div class="alert alert-danger mb-4">
            <h6 class="alert-heading"><i class="fas fa-exclamation-triangle me-2"></i>System Requirements</h6>
            <ul class="mb-0">
                @foreach($requirements as $requirement)
                    <li>{{ $requirement }}</li>
                @endforeach
            </ul>
            <hr>
            <p class="mb-0">Please resolve these issues before creating a backup.</p>
        </div>
    @endif

    <div class="row">
        <!-- Backup Form -->
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Backup Configuration</h6>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ route('admin.database-backup.store') }}" id="backupForm">
                        @csrf
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Backup Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                   id="name" name="name" value="{{ old('name', 'backup_' . date('Y-m-d_H-i-s')) }}" required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">A unique name for this backup</div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">Description</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" name="description" rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">Optional description for this backup</div>
                        </div>

                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="compress" name="compress" 
                                       value="1" {{ old('compress', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="compress">
                                    Compress backup file
                                </label>
                                <div class="form-text">Recommended to save storage space</div>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="form-label">Tables to Include</label>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="table_selection" 
                                       id="all_tables" value="all" checked onchange="toggleTableSelection()">
                                <label class="form-check-label" for="all_tables">
                                    <strong>All Tables</strong> (Recommended)
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="table_selection" 
                                       id="specific_tables" value="specific" onchange="toggleTableSelection()">
                                <label class="form-check-label" for="specific_tables">
                                    <strong>Specific Tables</strong>
                                </label>
                            </div>

                            <div id="tableSelectionContainer" style="display: none;">
                                <div class="border rounded p-3 bg-light">
                                    <div class="mb-2">
                                        <button type="button" class="btn btn-sm btn-outline-primary me-2" onclick="selectAllTables()">
                                            Select All
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="deselectAllTables()">
                                            Deselect All
                                        </button>
                                    </div>
                                    <div class="row">
                                        @foreach($tables as $table)
                                        <div class="col-md-6 col-lg-4">
                                            <div class="form-check">
                                                <input class="form-check-input table-checkbox" type="checkbox" 
                                                       name="tables[]" value="{{ $table }}" id="table_{{ $table }}">
                                                <label class="form-check-label" for="table_{{ $table }}">
                                                    {{ $table }}
                                                </label>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between">
                            <a href="{{ route('admin.database-backup.index') }}" class="btn btn-secondary">
                                Cancel
                            </a>
                            <button type="submit" class="btn btn-primary" id="createBackupBtn" 
                                    {{ !empty($requirements) ? 'disabled' : '' }}>
                                <i class="fas fa-database me-2"></i>Create Backup
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Database Information -->
        <div class="col-lg-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Database Information</h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Total Tables:</span>
                            <strong>{{ count($tables) }}</strong>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Database Size:</span>
                            <strong>{{ array_sum(array_column($tableSizes, 'size_mb')) }} MB</strong>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Total Rows:</span>
                            <strong>{{ number_format(array_sum(array_column($tableSizes, 'rows'))) }}</strong>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Largest Tables</h6>
                </div>
                <div class="card-body">
                    @foreach(array_slice($tableSizes, 0, 10) as $table)
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-truncate" style="max-width: 150px;" title="{{ $table['name'] }}">
                            {{ $table['name'] }}
                        </span>
                        <small class="text-muted">{{ $table['size_mb'] }} MB</small>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function toggleTableSelection() {
    const specificTablesRadio = document.getElementById('specific_tables');
    const tableContainer = document.getElementById('tableSelectionContainer');
    
    if (specificTablesRadio.checked) {
        tableContainer.style.display = 'block';
    } else {
        tableContainer.style.display = 'none';
    }
}

function selectAllTables() {
    const checkboxes = document.querySelectorAll('.table-checkbox');
    checkboxes.forEach(checkbox => checkbox.checked = true);
}

function deselectAllTables() {
    const checkboxes = document.querySelectorAll('.table-checkbox');
    checkboxes.forEach(checkbox => checkbox.checked = false);
}

// Form submission handling
document.getElementById('backupForm').addEventListener('submit', function(e) {
    const btn = document.getElementById('createBackupBtn');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Creating Backup...';
    
    // Show progress message
    const alert = document.createElement('div');
    alert.className = 'alert alert-info mt-3';
    alert.innerHTML = '<i class="fas fa-info-circle me-2"></i>Backup creation in progress. This may take several minutes depending on database size.';
    this.appendChild(alert);
});

// Estimate backup size
function estimateBackupSize() {
    const allTablesRadio = document.getElementById('all_tables');
    const specificTablesRadio = document.getElementById('specific_tables');
    const compressCheckbox = document.getElementById('compress');
    
    let totalSize = 0;
    
    if (allTablesRadio.checked) {
        totalSize = {{ array_sum(array_column($tableSizes, 'size_mb')) }};
    } else {
        const checkedTables = document.querySelectorAll('.table-checkbox:checked');
        const tableSizes = @json(array_column($tableSizes, 'size_mb', 'name'));
        
        checkedTables.forEach(checkbox => {
            totalSize += tableSizes[checkbox.value] || 0;
        });
    }
    
    // Estimate compression (typically 70-80% reduction for SQL dumps)
    if (compressCheckbox.checked) {
        totalSize *= 0.25; // Assume 75% compression
    }
    
    return totalSize;
}
</script>
@endsection