@{
    ViewData["Title"] = "Download Your Data";
    ViewData["PageIcon"] = "bi-download";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container py-5" style="max-width:680px">

    <p class="text-muted mb-4">
        Export a copy of your company's data. Select which data types to include, then choose a format.
        Your download will be generated immediately.
    </p>

    @if (TempData["Error"] != null)
    {
        <div class="alert alert-permanent alert-danger d-flex gap-2 mb-4" role="alert">
            <i class="bi bi-exclamation-triangle-fill flex-shrink-0 mt-1"></i>
            <div>@TempData["Error"]</div>
        </div>
    }

    <div class="card shadow-sm">
        <div class="card-body p-4">
            <form method="post" asp-action="Export" id="exportForm">
                @Html.AntiForgeryToken()

                <h6 class="fw-semibold text-uppercase text-muted small mb-3" style="letter-spacing:.05em">
                    Data to Include
                </h6>

                <div class="row g-2 mb-4">
                    @foreach (var item in new[]
                    {
                        ("Customers",   "people",              "Customers"),
                        ("Jobs",        "tools",               "Jobs"),
                        ("Quotes",      "file-earmark-text",   "Quotes"),
                        ("Invoices",    "receipt",             "Invoices"),
                        ("Inventory",   "boxes",               "Inventory Items"),
                        ("Equipment",   "gear",                "Equipment"),
                        ("Vendors",     "shop",                "Vendors"),
                        ("ShopWorkers", "person-badge",        "Shop Workers"),
                        ("Users",       "person-lock",         "Users / Logins"),
                    })
                    {
                        <div class="col-6">
                            <div class="form-check">
                                <input class="form-check-input sheet-check" type="checkbox"
                                       name="sheets" value="@item.Item1"
                                       id="sheet_@item.Item1" checked />
                                <label class="form-check-label" for="sheet_@item.Item1">
                                    <i class="bi bi-@item.Item2 me-1 text-secondary"></i>@item.Item3
                                </label>
                            </div>
                        </div>
                    }
                </div>

                <div class="d-flex gap-2 mb-1">
                    <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" id="selectAll">Select all</button>
                    <span class="text-muted small">·</span>
                    <button type="button" class="btn btn-link btn-sm p-0 text-decoration-none" id="selectNone">Deselect all</button>
                </div>

                <hr class="my-4" />

                <h6 class="fw-semibold text-uppercase text-muted small mb-3" style="letter-spacing:.05em">
                    Format
                </h6>

                <div class="d-flex gap-4 mb-4">
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="format" value="xlsx" id="fmt_xlsx" checked />
                        <label class="form-check-label" for="fmt_xlsx">
                            <i class="bi bi-file-earmark-spreadsheet me-1 text-success"></i>
                            Excel (.xlsx) &mdash; all sheets in one file
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="format" value="csv" id="fmt_csv" />
                        <label class="form-check-label" for="fmt_csv">
                            <i class="bi bi-file-zip me-1 text-warning"></i>
                            CSV (.zip) &mdash; one file per sheet
                        </label>
                    </div>
                </div>

                <div class="d-grid">
                    <button type="submit" class="btn btn-primary btn-lg" id="exportBtn">
                        <i class="bi bi-download me-1"></i>Generate Export
                    </button>
                </div>
            </form>
        </div>
    </div>

    <p class="text-muted small text-center mt-3">
        <i class="bi bi-shield-lock me-1"></i>
        Your export is generated on-demand and delivered directly to your browser. Nothing is stored.
    </p>

</div>

@section Scripts {
    <script>
        document.getElementById('selectAll').addEventListener('click', function () {
            document.querySelectorAll('.sheet-check').forEach(cb => cb.checked = true);
        });
        document.getElementById('selectNone').addEventListener('click', function () {
            document.querySelectorAll('.sheet-check').forEach(cb => cb.checked = false);
        });
        document.getElementById('exportForm').addEventListener('submit', function () {
            var btn = document.getElementById('exportBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Generating&hellip;';
            // Re-enable after 10s in case browser blocks the download dialog
            setTimeout(function () {
                btn.disabled = false;
                btn.innerHTML = '<i class="bi bi-download me-1"></i>Generate Export';
            }, 10000);
        });
    </script>
}