@model List<PowderCoating.Core.Entities.GiftCertificate>
@using PowderCoating.Core.Enums

@{
    ViewData["Title"] = "Batch Gift Certificates";
    ViewData["PageIcon"] = "bi-gift";
    var batchId = Model.FirstOrDefault()?.BatchId ?? Guid.Empty;
    var count = Model.Count;
    var amount = Model.FirstOrDefault()?.OriginalAmount ?? 0m;
}

<div class="alert alert-success alert-permanent mb-4">
    <i class="bi bi-check-circle-fill me-2"></i>
    <strong>@count gift certificates created</strong> &mdash; each worth @amount.ToString("C").
    Download the PDF below to print the full batch. This page is bookmarkable &mdash; you can return here any time to re-download.
</div>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
        <h5 class="mb-0">
            <i class="bi bi-collection me-2 text-primary"></i>Batch Certificates (@count)
            <span class="text-muted small fw-normal ms-2 font-monospace">@batchId.ToString("N")[..8]&hellip;</span>
        </h5>
        <a asp-action="BatchDownloadPdf" asp-route-batchId="@batchId" class="btn btn-primary">
            <i class="bi bi-file-pdf me-2"></i>Download All as PDF
        </a>
    </div>
    <div class="card-body p-0">
        <div class="mobile-card-view">
            <div class="mobile-card-list">
                @foreach (var cert in Model)
                {
                    <div class="mobile-data-card">
                        <div class="mobile-card-header">
                            <div class="mobile-card-icon" style="background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                                <i class="bi bi-gift"></i>
                            </div>
                            <div class="mobile-card-title">
                                <h6 class="font-monospace">@cert.CertificateCode</h6>
                                <small>@cert.OriginalAmount.ToString("C")</small>
                            </div>
                        </div>
                        <div class="mobile-card-body">
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">Issued</span>
                                <span class="mobile-card-value">@cert.IssueDate.ToLocalTime().ToString("MMM d, yyyy")</span>
                            </div>
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">Expiry</span>
                                <span class="mobile-card-value">
                                    @if (cert.ExpiryDate.HasValue) { @cert.ExpiryDate.Value.ToLocalTime().ToString("MMM d, yyyy") } else { <span class="text-muted">&mdash;</span> }
                                </span>
                            </div>
                            <div class="mobile-card-row">
                                <span class="mobile-card-label">Status</span>
                                <span class="mobile-card-value"><span class="badge bg-success">Active</span></span>
                            </div>
                        </div>
                        <div class="mobile-card-footer">
                            <a asp-action="Details" asp-route-id="@cert.Id" class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-eye me-1"></i>View
                            </a>
                            <a asp-action="DownloadPdf" asp-route-id="@cert.Id" class="btn btn-sm btn-outline-secondary">
                                <i class="bi bi-file-pdf me-1"></i>PDF
                            </a>
                        </div>
                    </div>
                }
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">Certificate Code</th>
                        <th>Face Value</th>
                        <th>Issued</th>
                        <th>Expiry</th>
                        <th>Status</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var cert in Model)
                    {
                        <tr>
                            <td class="ps-3 fw-semibold font-monospace">@cert.CertificateCode</td>
                            <td>@cert.OriginalAmount.ToString("C")</td>
                            <td>@cert.IssueDate.ToLocalTime().ToString("MMM d, yyyy")</td>
                            <td>
                                @Html.Raw(cert.ExpiryDate.HasValue
                                    ? cert.ExpiryDate.Value.ToLocalTime().ToString("MMM d, yyyy")
                                    : "&mdash;")
                            </td>
                            <td><span class="badge bg-success">Active</span></td>
                            <td class="text-end">
                                <a asp-action="Details" asp-route-id="@cert.Id" class="btn btn-sm btn-outline-secondary" title="View details">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a asp-action="DownloadPdf" asp-route-id="@cert.Id" class="btn btn-sm btn-outline-secondary" title="Download single PDF">
                                    <i class="bi bi-file-pdf"></i>
                                </a>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
    <div class="card-footer bg-white border-top d-flex justify-content-between align-items-center py-3">
        <a asp-action="Index" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-1"></i>Back to Gift Certificates
        </a>
        <a asp-action="BatchDownloadPdf" asp-route-batchId="@batchId" class="btn btn-primary">
            <i class="bi bi-printer me-2"></i>Print Batch PDF (@count pages)
        </a>
    </div>
</div>