@extends('layouts.app')

@section('title', 'Database Backups')
@section('nav_backups', 'bg-teal-50 text-teal-700 font-semibold')

@section('content')
<div class="p-6 max-w-4xl mx-auto" x-data="backupRestore()">

    {{-- Header --}}
    <div class="flex items-start justify-between mb-6 gap-4">
        <div>
            <h1 class="text-xl font-bold text-gray-900">Database Backups</h1>
            <p class="text-gray-400 text-sm mt-0.5">Create and download full snapshots of the {{ config('database.connections.mysql.database') }} database.</p>
        </div>
        <form method="POST" action="{{ route('backups.store') }}" data-confirm="Create a new database backup now?">
            @csrf
            <button type="submit"
                class="inline-flex items-center gap-1.5 bg-teal-600 hover:bg-teal-700 text-white text-sm font-semibold px-4 py-2.5 rounded-lg transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 4v16m8-8H4"/>
                </svg>
                Create Backup
            </button>
        </form>
    </div>

    @if(session('success'))
    <div class="mb-5 px-4 py-3 bg-teal-50 border-[0.5px] border-teal-200 rounded-xl text-sm text-teal-700">{{ session('success') }}</div>
    @endif
    @if(session('error'))
    <div class="mb-5 px-4 py-3 bg-red-50 border-[0.5px] border-red-200 rounded-xl text-sm text-red-700">{{ session('error') }}</div>
    @endif

    {{-- Sensitive-data notice --}}
    <div class="mb-6 px-4 py-3 bg-amber-50 border-[0.5px] border-amber-200 rounded-xl text-sm text-amber-800 flex items-start gap-2.5">
        <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
        </svg>
        <span>Backups contain <strong>all guest data, payments, and staff logins</strong>. Store downloaded files securely and delete old copies you no longer need. They are kept in <code class="text-xs">storage/app/backups</code> (never web-accessible).</span>
    </div>

    {{-- Backup list --}}
    <div class="bg-white border-[0.5px] border-gray-200 rounded-xl overflow-hidden">
        <div class="px-5 py-3 border-b-[0.5px] border-gray-100 bg-gray-50/60 flex items-center justify-between">
            <h2 class="text-sm font-semibold text-gray-800">Saved Backups</h2>
            <span class="text-xs text-gray-400">{{ $backups->count() }} file{{ $backups->count() === 1 ? '' : 's' }} · {{ $totalSize }}</span>
        </div>

        @if($backups->isEmpty())
        <div class="px-5 py-10 text-center text-sm text-gray-400">No backups yet. Click <span class="font-medium text-gray-500">Create Backup</span> to make your first snapshot.</div>
        @else
        <div class="divide-y divide-gray-100">
            @foreach($backups as $b)
            <div class="px-5 py-3 flex items-center justify-between gap-4">
                <div class="min-w-0">
                    <div class="text-sm font-medium text-gray-800 truncate">{{ $b['name'] }}</div>
                    <div class="text-xs text-gray-400 mt-0.5">{{ $b['created_at']->format('M j, Y · g:i A') }} · {{ $b['size_human'] }}</div>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    <a href="{{ route('backups.download', $b['name']) }}"
                       class="inline-flex items-center gap-1 text-xs font-medium text-teal-700 border-[0.5px] border-teal-200 hover:bg-teal-50 px-2.5 py-1.5 rounded-lg transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/>
                        </svg>
                        Download
                    </a>
                    <button type="button" @click="open(@js($b['name']))"
                        class="inline-flex items-center gap-1 text-xs font-medium text-amber-700 border-[0.5px] border-amber-200 hover:bg-amber-50 px-2.5 py-1.5 rounded-lg transition-colors">
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                        Restore
                    </button>
                    <form method="POST" action="{{ route('backups.destroy', $b['name']) }}" data-confirm="Delete {{ $b['name'] }}? This cannot be undone." data-danger="true">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                            class="inline-flex items-center gap-1 text-xs font-medium text-red-600 border-[0.5px] border-red-200 hover:bg-red-50 px-2.5 py-1.5 rounded-lg transition-colors">
                            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                            Delete
                        </button>
                    </form>
                </div>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    <p class="text-xs text-gray-400 mt-4"><strong class="text-gray-500">Restore</strong> overwrites the live database with a saved snapshot. A fresh safety backup is taken automatically first, and you'll be signed out to log in again. You can also restore a downloaded file manually with <code>mysql -u root pvh_pms &lt; backup.sql</code>.</p>

    {{-- Type-to-confirm restore modal --}}
    <div x-show="showing" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4" style="display:none"
         @keydown.escape.window="close()">
        <div class="absolute inset-0 bg-black/40" @click="close()"></div>
        <div class="relative bg-white rounded-2xl border-[0.5px] border-gray-200 shadow-xl w-full max-w-md p-6">
            <div class="flex items-start gap-3">
                <div class="w-9 h-9 rounded-full bg-red-50 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                </div>
                <div class="min-w-0">
                    <h3 class="text-base font-bold text-gray-900">Restore this backup?</h3>
                    <p class="text-sm text-gray-500 mt-1">This <strong>replaces the entire live database</strong> with <span class="font-mono text-xs text-gray-700 break-all" x-text="file"></span>. Any data created since that snapshot will be lost.</p>
                </div>
            </div>

            <div class="mt-4 px-3 py-2.5 bg-amber-50 border-[0.5px] border-amber-200 rounded-lg text-xs text-amber-800">
                A safety backup of the current database is taken automatically first, so this can be undone. You'll be signed out and asked to log in again afterward.
            </div>

            <form method="POST" :action="actionUrl" class="mt-4">
                @csrf
                <label class="block text-xs font-medium text-gray-600 mb-1.5">Type <span class="font-mono font-bold text-gray-800">RESTORE</span> to confirm</label>
                <input type="text" name="confirm" x-model="typed" autocomplete="off" spellcheck="false" x-ref="confirmInput"
                    class="w-full border-[0.5px] border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500/20 focus:border-red-400"
                    placeholder="RESTORE">
                <div class="flex justify-end gap-2 mt-4">
                    <button type="button" @click="close()" class="text-sm font-medium text-gray-600 px-4 py-2 rounded-lg hover:bg-gray-50">Cancel</button>
                    <button type="submit" :disabled="typed.trim().toUpperCase() !== 'RESTORE'"
                        class="text-sm font-semibold text-white px-4 py-2 rounded-lg transition-colors"
                        :class="typed.trim().toUpperCase() === 'RESTORE' ? 'bg-red-600 hover:bg-red-700' : 'bg-red-300 cursor-not-allowed'">
                        Restore Database
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>

<script>
function backupRestore() {
    return {
        showing: false,
        file: '',
        typed: '',
        get actionUrl() { return '{{ url('/backups') }}/' + encodeURIComponent(this.file) + '/restore'; },
        open(name) {
            this.file = name;
            this.typed = '';
            this.showing = true;
            this.$nextTick(() => this.$refs.confirmInput && this.$refs.confirmInput.focus());
        },
        close() { this.showing = false; this.typed = ''; },
    };
}
</script>
@endsection