@extends('layouts.app')

@section('content')
<style>
    .backup-wrap { max-width: 1180px; }
    .page-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:18px; }
    .page-title { font-size:24px; font-weight:800; color:#26364f; }
    .page-subtitle { color:#697386; margin-top:4px; }
    .backup-grid { display:grid; grid-template-columns: 1fr 1.2fr; gap:16px; align-items:start; }
    .panel { background:#fff; border-radius:10px; padding:18px; box-shadow:0 4px 14px rgba(15,23,42,0.07); border:1px solid #edf0f5; }
    .panel h3 { margin:0 0 14px; color:#1f2937; font-size:18px; }
    .form-row { margin-bottom:12px; }
    .form-row label { display:block; font-weight:800; color:#344054; margin-bottom:6px; }
    .form-row input { width:100%; padding:10px 12px; border:1px solid #d7dce5; border-radius:8px; font-size:14px; }
    .hint { color:#667085; font-size:13px; line-height:1.45; }
    .actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
    .btn { border:0; border-radius:8px; padding:10px 14px; font-weight:800; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
    .btn-primary { background:#004AAD; color:#fff; }
    .btn-orange { background:#e84c0d; color:#fff; }
    .btn-light { background:#eef2f7; color:#26364f; }
    .btn-danger { background:#fee4e2; color:#b42318; }
    .notice { border-radius:8px; padding:12px; margin-bottom:14px; font-weight:700; }
    .notice.success { background:#e8f7ee; color:#166534; }
    .notice.error { background:#fdecec; color:#b42318; }
    .backup-table { width:100%; border-collapse:collapse; }
    .backup-table th { text-align:left; font-size:12px; text-transform:uppercase; color:#475467; background:#f7f9fc; padding:10px; }
    .backup-table td { padding:11px 10px; border-bottom:1px solid #eef1f5; color:#1d2939; }
    .backup-table td strong { color:#111827; }
    .inline-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .danger-zone { margin-top:16px; padding:12px; background:#fff7ed; border-radius:8px; color:#9a3412; font-size:13px; line-height:1.45; }
    @media(max-width:900px) { .backup-grid { grid-template-columns:1fr; } .page-head { flex-direction:column; align-items:flex-start; } }
</style>

<div class="backup-wrap">
    <div class="page-head">
        <div>
            <div class="page-title">Database Backups</div>
            <div class="page-subtitle">Save SQL backups outside XAMPP so the business data survives if XAMPP fails.</div>
        </div>
        <a class="btn btn-light" href="{{ url('/settings') }}">Back to Settings</a>
    </div>

    @if(session('success'))
        <div class="notice success">{{ session('success') }}</div>
    @endif

    @if(session('error'))
        <div class="notice error">{{ session('error') }}</div>
    @endif

    <div class="backup-grid">
        <div class="panel">
            <h3>Backup Setup</h3>
            <form method="POST" action="{{ url('/backups/settings') }}">
                @csrf
                <div class="form-row">
                    <label>Backup Folder</label>
                    <input type="text" name="backup_directory" value="{{ old('backup_directory', $backupDirectory) }}" required>
                    <div class="hint">Recommended local example: <strong>C:\JEVAPOS_BACKUPS</strong> or an external drive folder.</div>
                </div>

                <div class="form-row">
                    <label>mysqldump Path</label>
                    <input type="text" name="mysqldump_path" value="{{ old('mysqldump_path', $mysqldumpPath) }}" placeholder="Optional, e.g. E:\xampp\mysql\bin\mysqldump.exe">
                    <div class="hint">Leave blank if the system can find XAMPP automatically.</div>
                </div>

                <div class="form-row">
                    <label>Keep Backups For Days</label>
                    <input type="number" name="backup_retention_days" min="1" max="3650" value="{{ old('backup_retention_days', $backupRetentionDays) }}" required>
                </div>

                <div class="actions">
                    <button class="btn btn-primary">Save Backup Settings</button>
                </div>
            </form>

            <form method="POST" action="{{ url('/backups/create') }}">
                @csrf
                <div class="actions">
                    <button class="btn btn-orange">Create Backup Now</button>
                </div>
            </form>

            <div class="danger-zone">
                Do not store the only backup inside the XAMPP folder. If possible, use a different drive or copy the folder to an external disk/cloud account daily.
            </div>
        </div>

        <div class="panel">
            <h3>Recent Backups</h3>
            <table class="backup-table">
                <thead>
                    <tr>
                        <th>File</th>
                        <th>Size</th>
                        <th>Date</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($backupFiles as $file)
                        <tr>
                            <td><strong>{{ $file['name'] }}</strong></td>
                            <td>{{ $file['size'] }}</td>
                            <td>{{ $file['modified'] }}</td>
                            <td>
                                <div class="inline-actions">
                                    <a class="btn btn-light" href="{{ url('/backups/'.$file['name'].'/download') }}">Download</a>
                                    <form method="POST" action="{{ url('/backups/'.$file['name']) }}" onsubmit="return confirm('Delete this backup file?')">
                                        @csrf
                                        @method('DELETE')
                                        <button class="btn btn-danger">Delete</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="4">No backup has been created yet.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection