{{-- SUCCESS/ERROR handled by small toast events --}}
<div class="content-wrapper">
    <div class="container-full">

        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="d-flex align-items-center justify-content-between">
                <div class="me-auto">
                    <h3 class="page-title">Database Backup</h3>
                    <div class="d-inline-block align-items-center">
                        <nav>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#"><i class="bi bi-house-door"></i></a></li>
                                <li class="breadcrumb-item" aria-current="page">Backup & Restore</li>
                                <li class="breadcrumb-item active" aria-current="page">Restore System</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <!-- Back Button -->
                <button type="button" onclick="location.href='{{ url()->previous() }}'"
                    class="btn btn-xs btn-primary btn-outline">
                    <i class="fa fa-arrow-left"></i> Back
                </button>
            </div>
        </div>
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-12">
                    <div class="box">
                        <div class="box-header with-border bt-3 border-primary rounded">
                            <div class="d-flex justify-content-between align-items-start flex-wrap gap-3">
                                <div>
                                    <h4 class="box-title mb-1">
                                        <i class="bi bi-database-fill-down"></i> Backup & Restore (SQL)
                                    </h4>
                                    <small class="text-muted">
                                        Storage: <code>storage/app/backup-database</code>
                                    </small>
                                </div>

                                {{-- Actions --}}
                                <div class="d-flex flex-wrap gap-2">

                                    <!-- Create Backup -->
                                    <button wire:click="runDatabaseBackup" wire:loading.attr="disabled"
                                        wire:target="runDatabaseBackup"
                                        class="btn btn-success btn-sm d-flex align-items-center px-3">

                                        <span wire:loading.remove wire:target="runDatabaseBackup">
                                            <i class="bi bi-save me-1"></i> Create Backup
                                        </span>

                                        <span wire:loading wire:target="runDatabaseBackup">
                                            <i class="bi bi-arrow-repeat spin me-1"></i> Processing...
                                        </span>

                                    </button>

                                    <!-- File Picker -->
                                    <label class="btn btn-warning btn-sm d-flex align-items-center px-3 mb-0">
                                        <i class="bi bi-database-add"></i> Choose File
                                        <input type="file" wire:model="uploadFile" id="uploadInput" accept=".sql"
                                            hidden>
                                    </label>

                                    <!-- File Preview Chip -->
                                    @if ($uploadFile)
                                        <div class="row mgbt-xs-5">
                                            <div class="col-12">
                                                <div
                                                    class="d-inline-flex align-items-center btn-secondary border rounded px-2 py-1">

                                                    <!-- Icon -->
                                                    <i class="bi bi-filetype-sql text-primary me-1"
                                                        style="font-size:13px;"></i>

                                                    <!-- Filename -->
                                                    <span class="fw-semibold text-truncate"
                                                        style="max-width:80px; font-size:12px;">
                                                        {{ $uploadFile->getClientOriginalName() }}
                                                    </span>

                                                    <!-- Size -->
                                                    <span class="text-muted ms-1" style="font-size:11px;">
                                                        ({{ number_format($uploadFile->getSize() / 1024, 1) }} KB)
                                                    </span>

                                                    <!-- Remove -->
                                                    <button wire:click="removeSelectedFile" type="button"
                                                        class="btn btn-xs btn-secondary text-danger p-0 ms-2">
                                                        <i class="bi bi-x-lg" style="font-size:11px;"></i>
                                                    </button>

                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <button wire:click="runRestoreBackup" wire:loading.attr="disabled"
                                        wire:target="runRestoreBackup"
                                        class="btn btn-primary btn-sm d-flex align-items-center px-3">

                                        <span wire:loading.remove wire:target="runRestoreBackup">
                                            <i class="bi bi-cloud-arrow-up me-1"></i> Upload & Restore
                                        </span>

                                        <span wire:loading wire:target="runRestoreBackup">
                                            <i class="bi bi-arrow-repeat spin me-1"></i> Processing...
                                        </span>

                                    </button>

                                </div>
                            </div>
                        </div>

                        <div class="box-body">

                            @if ($isRestoreRunning)
                                <div wire:poll.1s="restoreProgress">

                                    <div class="d-flex justify-content-between mb-1">
                                        <small class="fw-semibold text-muted">
                                            {{ $restoreLabel }}
                                        </small>
                                        <small class="fw-bold">
                                            {{ $restorePercent }}%
                                        </small>
                                    </div>

                                    <div class="progress" style="height: 22px;">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                            role="progressbar" style="width: {{ $restorePercent }}%">
                                            {{ $restorePercent }}%
                                        </div>
                                    </div>

                                </div>
                            @endif

                            @if ($restoreSuccess)
                                <div
                                    class="alert alert-success alert-dismissible fade show mt-3 d-flex justify-content-between align-items-center">
                                    <i class="bi bi-check-circle-fill fs-4 me-2"></i>
                                    <div class="flex-grow-1">
                                        <strong>Restore Completed Successfully</strong><br>
                                        <small class="text-muted">{{ $restoreCompletedFile }}
                                            @if ($completedFileSize)
                                                <span class="badge bg-primary ms-2">
                                                    {{ $completedFileSize }}
                                                </span>
                                            @endif
                                        </small>
                                    </div>
                                    <button type="button" class="btn-close" wire:click="resetStatus"></button>
                                </div>
                            @endif

                            @if ($restoreError)
                                <div
                                    class="alert alert-danger alert-dismissible fade show mt-3 d-flex justify-content-between align-items-center">
                                    <i class="bi bi-exclamation-octagon-fill fs-4 me-2"></i>
                                    <div class="flex-grow-1">
                                        <strong>Restore Failed</strong><br>
                                        @if ($errorMessage)
                                            <small class="text-muted">Reason: {{ $errorMessage }}</small>
                                        @else
                                            <small class="text-muted">Unknown error occurred.</small>
                                        @endif
                                    </div>
                                    <button type="button" class="btn-close" wire:click="resetStatus"></button>
                                </div>
                            @endif

                            @if ($isBackupRunning)
                                <div wire:poll.1s="databaseProgress">

                                    <div class="d-flex justify-content-between mb-1">
                                        <small class="fw-semibold text-muted">
                                            {{ $backupLabel }}
                                        </small>
                                        <small class="fw-bold">
                                            {{ $backupPercent }}%
                                        </small>
                                    </div>

                                    <div class="progress" style="height: 22px;">
                                        <div class="progress-bar progress-bar-striped progress-bar-animated bg-success"
                                            role="progressbar" style="width: {{ $backupPercent }}%">
                                            {{ $backupPercent }}%
                                        </div>
                                    </div>

                                </div>
                            @endif


                            @if ($showSuccess)
                                <div
                                    class="alert alert-success alert-dismissible fade show mt-3 d-flex justify-content-between align-items-center">
                                    <i class="bi bi-check-circle-fill fs-4 me-2"></i>
                                    <div class="flex-grow-1">
                                        <strong>Database Backup Completed Successfully!</strong><br>
                                        <small class="text-muted">{{ $backupCompletedFile }}
                                            @if ($completedFileSize)
                                                <span class="badge bg-primary ms-2">
                                                    {{ $completedFileSize }}
                                                </span>
                                            @endif
                                        </small>
                                    </div>
                                    <button type="button" class="btn-close" wire:click="closeAlert">
                                    </button>
                                </div>
                            @endif

                            @if ($showError)
                                <div
                                    class="alert alert-danger alert-dismissible fade show mt-3 d-flex justify-content-between align-items-center">
                                    <i class="bi bi-exclamation-octagon-fill fs-4 me-2"></i>
                                    <div class="flex-grow-1">
                                        <strong>Database Backup Failed</strong><br>
                                        @if ($errorMessage)
                                            <small class="text-muted">Reason: {{ $errorMessage }}</small>
                                        @else
                                            <small class="text-muted">Unknown error occurred.</small>
                                        @endif
                                    </div>
                                    <button type="button" class="btn-close" wire:click="closeAlert">
                                    </button>
                                </div>
                            @endif

                            <form wire:submit.prevent="saveSettings">
                                <div class="row align-items-center mb-3">
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold"><i class="bi bi-clock-history me-1"></i>
                                            Automatic Daily
                                            Backup</label>
                                        <div class="form-check form-switch px-0">
                                            <input class="form-check-input" type="checkbox" id="daily"
                                                wire:model="daily_backup">
                                            <label class="form-check-label" for="daily">
                                                Enable daily automatic backups
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold"><i class="bi bi-calendar-week me-1"></i>
                                            Weekly
                                            Backup</label>
                                        <div class="form-check form-switch px-0">
                                            <input class="form-check-input" type="checkbox" id="weekly"
                                                wire:model="weekly_backup">
                                            <label class="form-check-label" for="weekly">
                                                Enable automatic weekly backup (every Sunday)
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold"><i class="bi bi-calendar-month me-1"></i>
                                            Monthly
                                            Backup</label>
                                        <div class="form-check form-switch px-0">
                                            <input class="form-check-input" type="checkbox" id="monthly"
                                                wire:model="monthly_backup">
                                            <label class="form-check-label" for="monthly">
                                                Enable automatic monthly backup (1st day of month)
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label fw-bold"><i class="bi bi-envelope-check me-1"></i>
                                            Email
                                            Notification</label>
                                        <div class="form-check form-switch px-0">
                                            <input class="form-check-input" type="checkbox" id="emailNotify"
                                                wire:model="email_notification">
                                            <label class="form-check-label" for="emailNotify">
                                                Send email notification after backup
                                            </label>
                                        </div>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label fw-bold"><i class="bi bi-arrow-repeat me-1"></i>
                                            Delete
                                            backups
                                            older than (days)</label>
                                        <input type="number" class="form-control" min="30"
                                            wire:model="delete_older_than_days">
                                    </div>
                                </div>

                                <!-- /.box-body -->
                                <div class="text-end mt-4">
                                    <button class="btn btn-primary btn-sm">
                                        <i class="bi bi-save me-1"></i> Update Settings
                                    </button>
                                </div>
                            </form>
                            <!-- /.box-footer-->
                        </div>
                    </div>
                </div>
        </section>

        <x-page-wrapper home-url="/administrator" heading="Backup & Restore List" contentWrapper="">

            <x-notifications :select-record="$selectRecord" :select-all="$selectAll" :checked="$checked" :rec-list="$recList" />
            <x-action-bar :checked-count="count($checked)" bulk :checked="$checked" export delete show-paginate :paginate="$paginate" refresh
                search filterRestoreBackup />

            <div class="table-responsive">
                <table class="table table-striped table-hover table-sm">
                    <thead class="bg-secondary">
                        <tr>
                            <th><input type="checkbox" wire:model.live="selectRecord" id="basic_checkbox"
                                    class="form-check-input"><label for="basic_checkbox" class="mb-0 h-15"></label>
                            </th>
                            <th>File</th>
                            <th>Action</th>
                            <th>Size</th>
                            <th>Created_At</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($this->recList as $recDetails)
                            <tr>
                                <td>
                                    <input type="checkbox" class="form-check-input" wire:model.live="checked"
                                        value="{{ $recDetails->id }}" id="basic_checkbox_{{ $recDetails->id }}">
                                    <label for="basic_checkbox_{{ $recDetails->id }}" class="mb-0 h-15"></label>
                                </td>
                                <td>{{ $recDetails->filename }}</td>
                                <td>{{ $recDetails->action }}</td>
                                <td>{{ $recDetails->size ? number_format($recDetails->size / 1024, 2) . ' KB' : '-' }}
                                </td>
                                <td>{{ $recDetails->created_at }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm" role="group">
                                        <button wire:click="DatabaseRestore('{{ $recDetails->filename }}')"
                                            class="btn btn-xs btn-success">
                                            <i class="bi bi-arrow-repeat"></i>
                                        </button>

                                        <button wire:click="downloadFile({{ $recDetails->id }})"
                                            class="btn btn-xs btn-primary">
                                            <i class="bi bi-download"></i>
                                        </button>

                                        <button wire:click="delSingleConfirm({{ $recDetails->id }})"
                                            class="btn btn-xs btn-danger">
                                            <i class="bi bi-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center">No backups</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                <div class="justify-content-center justify-content-md-end">{{ $this->recList->links() }}
                </div>
            </div>
        </x-page-wrapper>
    </div>
</div>