@extends('layouts.app')

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

@push('styles')
<style>
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
    .btn-outline:hover { background: #F5F3F1; }
    .btn-danger { background: var(--danger); color: white; }
    .btn-danger:hover { background: #B91C1C; }
</style>
@endpush

@section('content')

<div style="max-width: 700px;">
    <div style="margin-bottom: 24px;">
        <h1 style="font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;">Database backup</h1>
        <p style="font-size: 13px; color: var(--text-muted);">Download a MySQL dump of the database</p>
    </div>

    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px;">
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 24px;">
            <div style="text-align: center;">
                <p style="font-size: 28px; font-weight: 700; color: var(--primary);">{{ number_format($size, 1) }} KB</p>
                <p style="font-size: 12px; color: var(--text-muted);">Database size</p>
            </div>
            <div style="text-align: center;">
                <p style="font-size: 28px; font-weight: 700; color: var(--primary);">{{ count($tables) }}</p>
                <p style="font-size: 12px; color: var(--text-muted);">Tables</p>
            </div>
            <div style="text-align: center;">
                <p style="font-size: 14px; font-weight: 600; color: var(--text-primary);">{{ date('d M Y, H:i') }}</p>
                <p style="font-size: 12px; color: var(--text-muted);">Last modified</p>
            </div>
        </div>

        <div style="background: #FFF7ED; border: 1px solid #FED7AA; border-radius: 6px; padding: 12px 16px; margin-bottom: 20px;">
            <p style="font-size: 13px; color: #9A3412; margin: 0;">
                <strong>Warning:</strong> This downloads the entire MySQL database as a SQL file. It may contain sensitive data. Handle with care.
            </p>
        </div>

        <a href="{{ route('backup.download') }}" class="btn btn-primary">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Download backup
        </a>
    </div>

    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;">
        <div style="padding: 16px 20px; border-bottom: 1px solid var(--card-border);">
            <h3 style="font-size: 15px; font-weight: 600;">Database tables</h3>
        </div>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                <thead>
                    <tr style="background: #FAFAF8;">
                        <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">#</th>
                        <th style="text-align: left; padding: 10px 20px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Table name</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($tables as $index => $table)
                        <tr style="border-top: 1px solid var(--card-border);">
                            <td style="padding: 10px 20px; color: var(--text-muted);">{{ $index + 1 }}</td>
                            <td style="padding: 10px 20px; font-weight: 500;">{{ $table->name }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2" style="padding: 24px 20px; text-align: center; color: var(--text-muted);">No tables found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection