PowderCoatingLogix/src/PowderCoating.Web/Views/QuoteApproval/ApprovalPage.cshtml

@model PowderCoating.Web.ViewModels.QuoteApprovalViewModel
@{
    Layout = "_QuoteApprovalLayout";
    ViewData["Title"] = $"Quote {Model.QuoteNumber}";
    ViewBag.CompanyName = Model.CompanyName;

    var daysUntilExpiry = Model.ExpirationDate.HasValue
        ? (Model.ExpirationDate.Value.Date - DateTime.UtcNow.Date).TotalDays
        : (double?)null;
    bool soonExpiry = daysUntilExpiry.HasValue && daysUntilExpiry.Value >= 0 && daysUntilExpiry.Value <= 3;
    bool expired = daysUntilExpiry.HasValue && daysUntilExpiry.Value < 0;
    bool showDeclinePanel = Model.DeclineError != null;
}

<!-- Quote Header -->
<div class="card mb-4">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
            <div>
                <h4 class="fw-bold mb-1">Quote <span class="text-primary">@Model.QuoteNumber</span></h4>
                <p class="text-muted mb-0">Prepared for <strong>@Model.CustomerName</strong></p>
            </div>
            <div class="text-end">
                @if (Model.ExpirationDate.HasValue)
                {
                    <small class="text-muted d-block">Valid until</small>
                    <strong class="@(soonExpiry ? "text-warning" : expired ? "text-danger" : "")">
                        @Model.ExpirationDate.Value.ToString("MMMM d, yyyy")
                    </strong>
                }
            </div>
        </div>

        @if (soonExpiry)
        {
            <div class="alert alert-warning mt-3 mb-0 py-2">
                <i class="bi bi-exclamation-triangle-fill me-1"></i>
                This quote expires in @((int)daysUntilExpiry!.Value) day(s). Please respond promptly.
            </div>
        }

        @if (!string.IsNullOrWhiteSpace(Model.Description))
        {
            <p class="mt-3 mb-0 text-muted">@Model.Description</p>
        }
    </div>
</div>

<!-- Line Items -->
<div class="card mb-4">
    <div class="card-header bg-transparent fw-semibold">
        <i class="bi bi-list-ul me-1"></i>Quote Items
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="ps-3">Description</th>
                        <th class="text-center" style="width:70px;">Qty</th>
                        <th class="text-end" style="width:110px;">Unit Price</th>
                        <th class="text-end pe-3" style="width:110px;">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model.Items)
                    {
                        <tr>
                            <td class="ps-3">@item.Description</td>
                            <td class="text-center">@item.Quantity</td>
                            <td class="text-end">@item.UnitPrice.ToString("C")</td>
                            <td class="text-end pe-3">@item.TotalPrice.ToString("C")</td>
                        </tr>
                    }
                    @if (!Model.Items.Any())
                    {
                        <tr>
                            <td colspan="4" class="text-center text-muted py-3">No line items</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Totals -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row justify-content-end">
            <div class="col-sm-6 col-md-5">
                <div class="d-flex justify-content-between mb-1">
                    <span class="text-muted">Items Subtotal</span>
                    <span>@Model.ItemsSubtotal.ToString("C")</span>
                </div>
                @if (Model.OvenBatchCost > 0)
                {
                    <div class="d-flex justify-content-between mb-1">
                        <span class="text-muted">Oven Processing</span>
                        <span>@Model.OvenBatchCost.ToString("C")</span>
                    </div>
                }
                @if (Model.ShopSuppliesAmount > 0)
                {
                    <div class="d-flex justify-content-between mb-1">
                        <span class="text-muted">Shop Supplies (@(Model.ShopSuppliesPercent.ToString("0.##"))%)</span>
                        <span>@Model.ShopSuppliesAmount.ToString("C")</span>
                    </div>
                }
                @if (Model.OvenBatchCost > 0 || Model.ShopSuppliesAmount > 0)
                {
                    <div class="d-flex justify-content-between mb-1 fw-semibold">
                        <span>Subtotal</span>
                        <span>@Model.SubTotal.ToString("C")</span>
                    </div>
                }
                @if (Model.DiscountAmount > 0 && !Model.HideDiscountFromCustomer)
                {
                    <div class="d-flex justify-content-between mb-1 text-success">
                        <span>Discount</span>
                        <span>-@Model.DiscountAmount.ToString("C")</span>
                    </div>
                }
                @if (Model.RushFee > 0)
                {
                    <div class="d-flex justify-content-between mb-1 text-warning">
                        <span><i class="bi bi-lightning-fill me-1"></i>Rush Fee</span>
                        <span>@Model.RushFee.ToString("C")</span>
                    </div>
                }
                @if (Model.TaxAmount > 0)
                {
                    <div class="d-flex justify-content-between mb-1 text-muted">
                        <span>Tax</span>
                        <span>@Model.TaxAmount.ToString("C")</span>
                    </div>
                }
                <hr class="my-2" />
                <div class="d-flex justify-content-between fw-bold fs-5">
                    <span>Total</span>
                    <span>@Model.Total.ToString("C")</span>
                </div>
            </div>
        </div>
    </div>
</div>

@if (!string.IsNullOrWhiteSpace(Model.Terms))
{
    <div class="card mb-4">
        <div class="card-header bg-transparent fw-semibold">
            <i class="bi bi-file-text me-1"></i>Terms &amp; Conditions
        </div>
        <div class="card-body text-muted" style="white-space:pre-wrap;">@Model.Terms</div>
    </div>
}

@if (!string.IsNullOrWhiteSpace(Model.SpecialInstructions))
{
    <div class="card mb-4">
        <div class="card-header bg-transparent fw-semibold">
            <i class="bi bi-info-circle me-1"></i>Special Instructions
        </div>
        <div class="card-body text-muted">@Model.SpecialInstructions</div>
    </div>
}

<!-- Decline error alert -->
@if (!string.IsNullOrWhiteSpace(Model.DeclineError))
{
    <div class="alert alert-danger">
        <i class="bi bi-exclamation-circle me-1"></i>@Model.DeclineError
    </div>
}

<!-- Action Section -->
<div class="card mb-4">
    <div class="card-body">
        <h6 class="fw-semibold mb-3">Please review and respond to this quote</h6>

        <!-- Approve form -->
        <form method="post" action="/quote-approval/@Model.Token/approve">
            @Html.AntiForgeryToken()
            <button type="submit" class="btn btn-success btn-lg w-100 mb-3">
                <i class="bi bi-check-circle me-2"></i>Approve this Quote
            </button>
        </form>

        <!-- Decline toggle button -->
        <button type="button" class="btn btn-outline-danger w-100" id="declineToggle">
            <i class="bi bi-x-circle me-2"></i>Decline this Quote
        </button>

        <!-- Decline form (hidden initially unless there was a validation error) -->
        <div id="declinePanel" style="display:@(showDeclinePanel ? "block" : "none");" class="mt-3 p-3 border border-danger rounded">
            <form method="post" action="/quote-approval/@Model.Token/decline">
                @Html.AntiForgeryToken()
                <label class="form-label fw-semibold">
                    Please tell us why you're declining <span class="text-danger">*</span>
                </label>
                <textarea name="reason"
                          class="form-control mb-3"
                          rows="4"
                          maxlength="1000"
                          placeholder="Please share your reason so we can improve our service..."
                          required></textarea>
                <button type="submit" class="btn btn-danger w-100">
                    <i class="bi bi-x-circle me-2"></i>Submit Decline
                </button>
            </form>
        </div>
    </div>
</div>

@if (!string.IsNullOrWhiteSpace(Model.CompanyPhone) || !string.IsNullOrWhiteSpace(Model.CompanyEmail))
{
    <div class="text-center text-muted small mb-3">
        <p class="mb-1">Questions? Contact us:</p>
        @if (!string.IsNullOrWhiteSpace(Model.CompanyPhone))
        {
            <a href="tel:@Model.CompanyPhone" class="text-muted me-3">
                <i class="bi bi-telephone me-1"></i>@Model.CompanyPhone
            </a>
        }
        @if (!string.IsNullOrWhiteSpace(Model.CompanyEmail))
        {
            <a href="mailto:@Model.CompanyEmail" class="text-muted">
                <i class="bi bi-envelope me-1"></i>@Model.CompanyEmail
            </a>
        }
    </div>
}

@section Scripts {
<script>
    (function () {
        var toggle = document.getElementById('declineToggle');
        var panel = document.getElementById('declinePanel');

        // If panel is already visible (validation error), update button label
        if (panel.style.display !== 'none') {
            toggle.innerHTML = '<i class="bi bi-x me-2"></i>Cancel';
            panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }

        toggle.addEventListener('click', function () {
            if (panel.style.display === 'none') {
                panel.style.display = 'block';
                toggle.innerHTML = '<i class="bi bi-x me-2"></i>Cancel';
                panel.scrollIntoView({ behavior: 'smooth', block: 'center' });
            } else {
                panel.style.display = 'none';
                toggle.innerHTML = '<i class="bi bi-x-circle me-2"></i>Decline this Quote';
            }
        });
    })();
</script>
}