@extends('layout.app')

@section('content')
    <div class="row">
        {{-- Full backup --}}
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fa fa-database"></i> Database Backup</h3>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-2">
                        Download a complete <code>.sql</code> dump of the database (every table's structure and
                        data). The file downloads straight to your browser. Visible to the primary admin only.
                    </p>
                    <a href="{{ route('system.database-backup.full') }}" class="btn btn-success">
                        <i class="fa fa-download"></i> Download Full Database
                    </a>
                </div>
            </div>
        </div>

        {{-- Custom backup --}}
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="fa fa-sliders-h"></i> Custom Database Backup</h3>
                </div>
                <div class="card-body">
                    <p class="text-muted">
                        The whole database is exported, but for the tables you tick below only the
                        <strong>table structure</strong> is downloaded &mdash; their <strong>data is skipped</strong>.
                        Unticked tables are exported with full data. Useful for excluding large or sensitive tables
                        (logs, accounting, RADIUS records) while keeping their schema.
                    </p>

                    <form method="POST" action="{{ route('system.database-backup.custom') }}">
                        @csrf

                        <div class="form-group d-flex flex-wrap align-items-center" style="gap:10px;">
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="select-all-tables">
                                Select all
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" id="clear-all-tables">
                                Clear all
                            </button>
                            <input type="text" id="table-search" class="form-control form-control-sm"
                                placeholder="Filter tables..." style="max-width:260px;">
                            <span class="text-muted small">
                                <span id="selected-count">0</span> of {{ count($tables) }} selected (structure only)
                            </span>
                        </div>

                        <div class="row border rounded p-2 mb-3"
                            style="max-height:420px;overflow:auto;background:#fafafa;">
                            @forelse ($tables as $table)
                                <div class="col-md-4 col-sm-6 table-row">
                                    <div class="custom-control custom-checkbox mb-1">
                                        <input type="checkbox" class="custom-control-input table-checkbox"
                                            name="structure_only_tables[]" value="{{ $table }}"
                                            id="tbl-{{ $loop->index }}">
                                        <label class="custom-control-label text-monospace" for="tbl-{{ $loop->index }}">
                                            {{ $table }}
                                        </label>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12 text-muted">No tables found.</div>
                            @endforelse
                        </div>

                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-download"></i> Download Custom Backup
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('ajax')
    <script>
        (function () {
            const checkboxes = Array.prototype.slice.call(document.querySelectorAll('.table-checkbox'));
            const countEl = document.getElementById('selected-count');

            function updateCount() {
                countEl.textContent = checkboxes.filter(c => c.checked).length;
            }

            document.getElementById('select-all-tables').addEventListener('click', function () {
                checkboxes.forEach(function (c) {
                    if (c.closest('.table-row').style.display !== 'none') c.checked = true;
                });
                updateCount();
            });

            document.getElementById('clear-all-tables').addEventListener('click', function () {
                checkboxes.forEach(c => c.checked = false);
                updateCount();
            });

            document.getElementById('table-search').addEventListener('keyup', function () {
                const term = this.value.toLowerCase();
                document.querySelectorAll('.table-row').forEach(function (row) {
                    const text = row.textContent.toLowerCase();
                    row.style.display = text.indexOf(term) > -1 ? '' : 'none';
                });
            });

            checkboxes.forEach(c => c.addEventListener('change', updateCount));
            updateCount();
        })();
    </script>
@endsection