@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Create Backup</h4>
        <div class="text-secondary small mt-1">Configure and create a new backup</div>
    </div>
    <div class="mt-2 mt-md-0">
        <a href="{{ route('backup.index') }}" class="btn btn-outline-secondary">
            <i data-lucide="arrow-left" style="width:14px;height:14px;"></i> Back to Dashboard
        </a>
    </div>
</div>

<div class="card mb-4">
    <div class="card-body">
        <form method="POST" action="{{ route('backup.store') }}">
            @csrf
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Backup Name</label>
                    <input type="text" name="name" class="form-control" value="backup_{{ now()->format('Y_m_d_His') }}" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Backup Type</label>
                    <select name="type" class="form-select" required id="backupType">
                        <option value="configuration" selected>Configuration Snapshot — settings &amp; config files (recommended, fast)</option>
                        <option value="full">Full Backup — everything, including call history (CDR)</option>
                    </select>
                    <div class="form-text">A configuration snapshot is small and quick — ideal before making a change.</div>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label fw-semibold">What's included</label>
                <div class="alert alert-light border d-flex align-items-start gap-2 py-2">
                    <i data-lucide="database" style="width:16px;height:16px;margin-top:2px;"></i>
                    <div class="small">
                        <strong>Always backed up:</strong> the complete database — every PBX setting
                        (extensions, trunks, routing, dialplan, time conditions, blacklist, PINs, users,
                        roles, firewall) — plus the <code>/etc/asterisk</code> configuration files.
                        <div class="text-secondary mt-1">Use the options below only to add the large, optional data.</div>
                    </div>
                </div>
                <div class="row g-2 mt-1">
                    <div class="col-md-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="scope[]" value="cdr" id="optCdr">
                            <label class="form-check-label" for="optCdr">Call history (CDR) <span class="text-secondary small">— can be large</span></label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="scope[]" value="recordings" id="optRec">
                            <label class="form-check-label" for="optRec">Call recordings <span class="text-secondary small">— often many GB</span></label>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="scope[]" value="voicemail" id="optVm">
                            <label class="form-check-label" for="optVm">Voicemail messages</label>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label">Destination</label>
                    <select name="destination_id" class="form-select">
                        <option value="">Default (Local Storage)</option>
                        @foreach($destinations as $dest)
                            <option value="{{ $dest->id }}">{{ $dest->name }} ({{ strtoupper($dest->type) }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Encryption</label>
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" name="encrypt" value="1" id="encrypt">
                        <label class="form-check-label" for="encrypt">Encrypt backup with AES-256</label>
                    </div>
                </div>
            </div>

            <div class="alert alert-info d-flex align-items-start gap-2">
                <i data-lucide="shield-check" style="width:16px;height:16px;margin-top:2px;"></i>
                <div class="small">
                    The backup is a verified, self-contained archive (full database dump + Asterisk config).
                    Restoring it takes an automatic safety snapshot first, then reloads Asterisk — so the
                    restored settings go live immediately.
                </div>
            </div>

            <button type="submit" class="btn btn-primary">
                <i data-lucide="play" style="width:14px;height:14px;"></i> Start Backup
            </button>
        </form>
    </div>
</div>
@endsection