@extends('layouts.app')

@section('content')
<div class="container py-4 d-print-none">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <a href="{{ route('admin.sales.index') }}" class="btn btn-outline-secondary rounded-3 btn-sm">
            <i class="bi bi-arrow-left me-1"></i> Back to Logs Registry
        </a>
        <button onclick="window.print()" class="btn btn-primary px-4 fw-bold shadow-sm rounded-3"
            style="background-color: #4f46e5; border: none;">
            <i class="bi bi-printer me-1"></i> Print Invoice
        </button>
    </div>
</div>

<div class="container mb-5">
    <div class="card border-0 shadow-sm rounded-4 p-5 mx-auto" style="max-width: 850px; background-color: #fff;">

        <div class="d-flex justify-content-between align-items-start border-bottom pb-4 mb-4 flex-wrap gap-3">
            <div>
                <h3 class="fw-bold text-dark mb-1 font-monospace tracking-tight" style="color: #4f46e5 !important;">
                    ANANT AVINASHI</h3>
                <span class="text-muted small d-block">Premium Handloom Hub</span>
                <small class="text-muted"><i class="bi bi-geo-alt me-1"></i>Nagpur Corporate Office, Maharashtra</small>
            </div>
            <div class="text-md-end">
                <span class="badge bg-indigo-subtle text-indigo-700 fw-bold mb-2 px-3 py-1.5"
                    style="background-color: #e0e7ff; color: #4338ca; font-size: 0.85rem;">RETAIL INVOICE</span>
                <h5 class="fw-bold text-secondary font-monospace mb-1">{{ $sale->invoice_no }}</h5>
                <small class="text-muted d-block">Date: <strong>{{ \Carbon\Carbon::parse($sale->sale_date)->format('d M,
                        Y') }}</strong></small>
            </div>
        </div>

        <div class="row g-4 mb-5">
            <div class="col-sm-6">
                <span class="text-muted small text-uppercase fw-bold d-block mb-2 font-monospace"
                    style="letter-spacing: 0.05em;">Point of Sale (Terminal)</span>
                <div class="p-3 rounded-3 border bg-light h-100">
                    <strong class="text-dark d-block mb-1">{{ $sale->exhibition->title ?? $sale->exhibition->name
                        }}</strong>
                    <small class="text-muted d-block"><i class="bi bi-building me-1"></i>City: {{
                        $sale->exhibition->city ?? 'On Field' }}</small>
                    <small class="text-muted d-block"><i class="bi bi-geo me-1"></i>Venue: {{
                        $sale->exhibition->location ?? 'Field Terminal' }}</small>
                </div>
            </div>
            <div class="col-sm-6">
                <span class="text-muted small text-uppercase fw-bold d-block mb-2 font-monospace"
                    style="letter-spacing: 0.05em;">Billed To (Customer)</span>
                <div class="p-3 rounded-3 border bg-light h-100">
                    <strong class="text-dark d-block mb-1">{{ $sale->customer_name ?? 'Walk-in Buyer' }}</strong>
                    <small class="text-muted d-block"><i class="bi bi-telephone me-1"></i>Contact: {{
                        $sale->customer_mobile ?? 'N/A' }}</small>
                    <small class="text-muted d-block"><i class="bi bi-credit-card me-1"></i>Payment Mode: <span
                            class="text-uppercase fw-bold">{{ $sale->payment_mode }}</span></small>
                </div>
            </div>
        </div>

        <div class="table-responsive mb-4">
            <table class="table table-bordered align-middle">
                <thead class="table-light">
                    <tr>
                        <th class="small fw-bold py-2 ps-3" style="width: 50px;">#</th>
                        <th class="small fw-bold py-2">Article Specification</th>
                        <th class="small fw-bold py-2 text-center" style="width: 120px;">Unit Rate</th>
                        <th class="small fw-bold py-2 text-center" style="width: 90px;">Qty</th>
                        <th class="small fw-bold py-2 text-end pe-3" style="width: 140px;">Gross Amount</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($sale->items as $index => $item)
                    <tr>
                        <td class="text-center font-monospace small">{{ $index + 1 }}</td>
                        <td class="ps-3">
                            <span class="fw-bold text-dark d-block small">{{ $item->product->name ?? 'Handloom Item'
                                }}</span>
                            <small class="badge bg-light text-secondary border font-monospace"
                                style="font-size: 10px;">{{ $item->product->product_code ?? 'N/A' }}</small>
                        </td>
                        <td class="text-center font-monospace small">₹{{ number_format($item->unit_price, 2) }}</td>
                        <td class="text-center fw-bold text-dark small">{{ $item->qty }}</td>
                        <td class="text-end font-monospace fw-bold text-dark pe-3">₹{{ number_format($item->total_price,
                            2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div class="row justify-content-end">
            <div class="col-md-5">
                <div class="d-flex justify-content-between py-2 border-bottom">
                    <span class="text-muted small">Subtotal:</span>
                    <span class="font-monospace text-dark small">₹{{ number_format($sale->subtotal, 2) }}</span>
                </div>
                <div class="d-flex justify-content-between py-2 border-bottom">
                    <span class="text-muted small">Taxes & CGST/SGST (0%):</span>
                    <span class="font-monospace text-muted small">₹0.00</span>
                </div>
                <div class="d-flex justify-content-between py-3 bg-light px-2 rounded-3 mt-2">
                    <strong class="text-dark small">Grand Total Settlement:</strong>
                    <strong class="font-monospace text-indigo-600" style="color: #4f46e5; font-size: 1.15rem;">₹{{
                        number_format($sale->final_total, 2) }}</strong>
                </div>
            </div>
        </div>

        <div class="border-top pt-4 mt-5 text-center">
            <p class="text-muted extra-small mb-1" style="font-size: 11px;">Thank you for supporting traditional Indian
                handloom craftsmanship.</p>
            <small class="text-muted font-monospace" style="font-size: 10px;">This is a computer-generated digital tax
                invoice sync registry record.</small>
        </div>

    </div>
</div>

<style>
    @media print {
        body {
            background-color: #ffffff !important;
        }

        .card {
            shadow: none !important;
            border: none !important;
            padding: 0 !important;
        }

        .d-print-none {
            display: none !important;
        }

        nav,
        .sidebar,
        .header-container {
            display: none !important;
        }

        /* Sidebar/Header Hide automatically */
        .main-content {
            margin-left: 0 !important;
            padding: 0 !important;
        }
    }

    </div>
</style>
@endsection