@extends('layouts.app')

@section('title', 'Sales')
@section('page', 'sales')
@section('salesNav', 'sales-list')

@php
    $statusVariant = fn($s) => match ($s) {
        'Completed', 'Paid' => 'success',
        'Refunded', 'Cancelled' => 'danger',
        default => 'neutral',
    };
    $paymentLabel = fn($p) => ucfirst((string) $p);
    $paymentVariant = fn($p) => match (strtolower((string) $p)) {
        'cash' => 'success',
        'bank' => 'info',
        'credit' => 'warning',
        'card' => 'primary',
        default => 'neutral',
    };
@endphp

@section('content')
    @include('partials.sales-nav')

    @if (session('success'))
        <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
    @endif

    @if ($errors->any())
        <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
    @endif

    <x-data-table id="sales-table" class="catalog-table sales-table" title="Sales"
        subtitle="POS sales from {{ $dateFrom }} to {{ $dateTo }}." search-placeholder="Search sales..." :selectable="false"
        :page-size="10">
        <x-slot:toolbarActions>
            <a href="{{ route('pos.index') }}" class="btn btn-primary" target="_blank" rel="noopener noreferrer">
                <i class="bi bi-plus-lg"></i> New Sale
            </a>
        </x-slot:toolbarActions>
        <x-slot:filters>
            <x-date-range-filter
                :action="route('sales.index')"
                :date-from="$dateFrom"
                :date-to="$dateTo"
                :filter-month="$filterMonth"
                :show-month="false"
                id="sales-filter-form"
            />
            <select class="form-select form-select-sm" data-edt-col-filter="type" aria-label="Payment">
                <option value="">All Payments</option>
                @foreach ($paymentMethods as $method)
                    <option>{{ $paymentLabel($method) }}</option>
                @endforeach
            </select>
            <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
                <option value="">All Statuses</option>
                <option>Completed</option>
                <option>Refunded</option>
                <option>Cancelled</option>
            </select>
        </x-slot:filters>
        <x-slot:afterToolbar>
            <div class="product-stats-panel">
                <div class="row g-3 product-stats product-stats--4 justify-content-start">
                    <div class="col-6 col-md-3 product-stat-col">
                        <div class="product-kpi product-kpi--primary">
                            <span class="product-kpi__icon" aria-hidden="true">
                                <span class="product-kpi__glyph"><i class="bi bi-receipt"></i></span>
                            </span>
                            <div class="product-kpi__body">
                                <p class="product-kpi__label">Total Sales</p>
                                <p class="product-kpi__value">{{ $totalSales }}</p>
                                <p class="product-kpi__meta">In selected dates</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 product-stat-col">
                        <div class="product-kpi product-kpi--success">
                            <span class="product-kpi__icon" aria-hidden="true">
                                <span class="product-kpi__glyph"><i class="bi bi-calendar-check"></i></span>
                            </span>
                            <div class="product-kpi__body">
                                <p class="product-kpi__label">Today</p>
                                <p class="product-kpi__value">{{ $todaySales }}</p>
                                <p class="product-kpi__meta">Within this range</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 product-stat-col">
                        <div class="product-kpi product-kpi--warning">
                            <span class="product-kpi__icon" aria-hidden="true">
                                <span class="product-kpi__glyph"><i class="bi bi-cash-stack"></i></span>
                            </span>
                            <div class="product-kpi__body">
                                <p class="product-kpi__label">Revenue</p>
                                <p class="product-kpi__value">{{ money($totalRevenue) }}</p>
                                <p class="product-kpi__meta">Selected period ({{ currency_code() }})</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-md-3 product-stat-col">
                        <div class="product-kpi product-kpi--inactive">
                            <span class="product-kpi__icon" aria-hidden="true">
                                <span class="product-kpi__glyph"><i class="bi bi-graph-up"></i></span>
                            </span>
                            <div class="product-kpi__body">
                                <p class="product-kpi__label">Avg Ticket</p>
                                <p class="product-kpi__value">{{ money($avgTicket) }}</p>
                                <p class="product-kpi__meta">Average sale total</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </x-slot:afterToolbar>
        <x-slot:head>
            <x-data-table-th label="Bill No." col="bill_no" />
            <x-data-table-th label="Date" col="date" />
            <x-data-table-th label="Customer" col="account" />
            <x-data-table-th label="Cashier" col="cashier" />
            <x-data-table-th label="Type" col="type" />
            <x-data-table-th label="Notes" col="notes" />
            <x-data-table-th label="Amount" col="amount" sort-type="number" />
            <x-data-table-th label="Status" col="status" />
        </x-slot:head>
        <x-slot:body>
            @forelse ($sales as $row)
                @php
                    $itemsPayload = $row->items
                        ->map(static function ($item) {
                            return [
                                'name' => $item->product_name,
                                'code' => $item->product_code,
                                'qty' => $item->qty,
                                'unit_price' => (float) $item->unit_price,
                                'line_total' => (float) $item->line_total,
                                'image' => $item->product?->imageUrl(),
                            ];
                        })
                        ->values();
                    $billLabel = $row->bill_no ? 'Bill No '.$row->bill_no : ($row->invoice_no ?: '—');
                @endphp
                <tr data-id="{{ $row->id }}">
                    <td data-col="bill_no" class="cell-primary">{{ $billLabel }}</td>
                    <td data-col="date">{{ $row->sale_date?->format('Y-m-d H:i') ?? '—' }}</td>
                    <td data-col="account">{{ $row->customer?->name ?? '—' }}</td>
                    <td data-col="cashier">{{ $row->user?->name ?? '—' }}</td>
                    <td data-col="type"><x-badge :variant="$paymentVariant($row->payment_method)">{{ $paymentLabel($row->payment_method) }}</x-badge></td>
                    <td data-col="notes">{{ $row->items_count }} items</td>
                    <td data-col="amount" data-sort-value="{{ $row->total }}" class="fw-semibold">{{ money((float) $row->total) }}</td>
                    <td data-col="status"><x-badge :variant="$statusVariant($row->status)">{{ $row->status }}</x-badge></td>
                    <td data-edt-actions>
                        <div class="edt-row-actions product-actions">
                            <button
                                type="button"
                                class="btn btn-sm btn-icon product-action product-action--edit"
                                title="View"
                                aria-label="View"
                                data-sale-view
                                data-invoice="{{ $billLabel }}"
                                data-invoice-no="{{ $row->invoice_no ?: '' }}"
                                data-bill-no="{{ $row->bill_no ?: '' }}"
                                data-date="{{ $row->sale_date?->format('Y-m-d H:i') }}"
                                data-customer="{{ $row->customer?->name ?? '—' }}"
                                data-table="{{ $row->diningTable?->name ?? '—' }}"
                                data-cashier="{{ $row->user?->name ?? '—' }}"
                                data-price-group="{{ $row->priceGroup?->name ?? '—' }}"
                                data-payment="{{ $paymentLabel($row->payment_method) }}"
                                data-status="{{ $row->status }}"
                                data-subtotal="{{ number_format((float) $row->subtotal, 2, '.', '') }}"
                                data-discount="{{ number_format((float) $row->discount_amount, 2, '.', '') }}"
                                data-tax="{{ number_format((float) $row->tax_amount, 2, '.', '') }}"
                                data-total="{{ number_format((float) $row->total, 2, '.', '') }}"
                                data-items='@json($itemsPayload)'
                            >
                                <i class="bi bi-eye" aria-hidden="true"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            @empty
                <tr data-edt-empty-row>
                    <td colspan="9" class="text-center text-muted py-4">No sales yet. Complete a sale from POS.</td>
                </tr>
            @endforelse
        </x-slot:body>
    </x-data-table>

    <div class="modal fade" id="saleViewModal" tabindex="-1" aria-labelledby="saleViewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content bill-detail-modal">
                <div class="bill-detail-modal__header">
                    <div class="bill-detail-modal__header-main">
                        <span class="bill-detail-modal__header-icon" aria-hidden="true">
                            <i class="bi bi-receipt"></i>
                        </span>
                        <div>
                            <h2 class="bill-detail-modal__title" id="saleViewModalLabel">Bill Details</h2>
                            <p class="bill-detail-modal__subtitle">View complete sale information</p>
                        </div>
                    </div>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body bill-detail-modal__body">
                    <div class="bill-detail-meta">
                        <div class="bill-detail-meta__card">
                            <span class="bill-detail-meta__icon bill-detail-meta__icon--violet" aria-hidden="true"><i class="bi bi-receipt"></i></span>
                            <div>
                                <div class="bill-detail-meta__label">Bill No</div>
                                <div class="bill-detail-meta__value" id="sale-view-invoice">—</div>
                            </div>
                        </div>
                        <div class="bill-detail-meta__card">
                            <span class="bill-detail-meta__icon bill-detail-meta__icon--green" aria-hidden="true"><i class="bi bi-calendar3"></i></span>
                            <div>
                                <div class="bill-detail-meta__label">Date</div>
                                <div class="bill-detail-meta__value" id="sale-view-date">—</div>
                            </div>
                        </div>
                        <div class="bill-detail-meta__card">
                            <span class="bill-detail-meta__icon bill-detail-meta__icon--blue" aria-hidden="true"><i class="bi bi-person"></i></span>
                            <div>
                                <div class="bill-detail-meta__label">Customer</div>
                                <div class="bill-detail-meta__value" id="sale-view-customer">—</div>
                            </div>
                        </div>
                        <div class="bill-detail-meta__card">
                            <span class="bill-detail-meta__icon bill-detail-meta__icon--green" aria-hidden="true"><i class="bi bi-person-badge"></i></span>
                            <div>
                                <div class="bill-detail-meta__label">Cashier</div>
                                <div class="bill-detail-meta__value" id="sale-view-cashier">—</div>
                            </div>
                        </div>
                        <div class="bill-detail-meta__card">
                            <span class="bill-detail-meta__icon bill-detail-meta__icon--violet" aria-hidden="true"><i class="bi bi-tags"></i></span>
                            <div>
                                <div class="bill-detail-meta__label">Price Group</div>
                                <div class="bill-detail-meta__value" id="sale-view-price-group">—</div>
                            </div>
                        </div>
                        <div class="bill-detail-meta__card">
                            <span class="bill-detail-meta__icon bill-detail-meta__icon--green" aria-hidden="true"><i class="bi bi-wallet2"></i></span>
                            <div>
                                <div class="bill-detail-meta__label">Payment</div>
                                <div class="bill-detail-meta__value" id="sale-view-payment">—</div>
                            </div>
                        </div>
                    </div>

                    <div class="bill-detail-items">
                        <table class="bill-detail-items__table">
                            <thead>
                                <tr>
                                    <th><i class="bi bi-list-ul" aria-hidden="true"></i> Item</th>
                                    <th>Code</th>
                                    <th class="text-center">Qty</th>
                                    <th class="text-end">Price</th>
                                    <th class="text-end">Total</th>
                                </tr>
                            </thead>
                            <tbody id="sale-view-items"></tbody>
                        </table>
                    </div>

                    <div class="bill-detail-summary">
                        <div class="bill-detail-summary__badges">
                            <div class="bill-detail-badge bill-detail-badge--payment">
                                <i class="bi bi-tag" aria-hidden="true"></i>
                                <div>
                                    <div class="bill-detail-badge__label">Payment Method</div>
                                    <div class="bill-detail-badge__value" id="sale-view-payment-method">—</div>
                                </div>
                            </div>
                            <div class="bill-detail-badge bill-detail-badge--status">
                                <i class="bi bi-check-circle" aria-hidden="true"></i>
                                <div>
                                    <div class="bill-detail-badge__label">Status</div>
                                    <div class="bill-detail-badge__value" id="sale-view-status">—</div>
                                </div>
                            </div>
                        </div>
                        <div class="bill-detail-summary__totals">
                            <div class="bill-detail-total-row">
                                <span>Subtotal</span>
                                <strong id="sale-view-subtotal">{{ money(0) }}</strong>
                            </div>
                            <div class="bill-detail-total-row">
                                <span>Discount</span>
                                <strong id="sale-view-discount">{{ money(0) }}</strong>
                            </div>
                            <div class="bill-detail-total-row">
                                <span>Service charge</span>
                                <strong id="sale-view-tax">{{ money(0) }}</strong>
                            </div>
                            <div class="bill-detail-total-row bill-detail-total-row--grand">
                                <span>Total Amount</span>
                                <strong id="sale-view-total">{{ money(0) }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bill-detail-modal__footer">
                    <p class="bill-detail-modal__thanks">
                        <i class="bi bi-receipt" aria-hidden="true"></i>
                        Thank you for your business! We hope to serve you again.
                    </p>
                    <div class="d-flex gap-2 flex-wrap justify-content-end">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" id="sale-view-reprint">
                            <i class="bi bi-printer" aria-hidden="true"></i> Reprint
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="saleReprintModal" tabindex="-1" aria-labelledby="saleReprintModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content edt-modal bill-reprint-modal">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="saleReprintModalLabel">Reprint receipt</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="sale-receipt" id="sale-receipt">
                        <div class="sale-receipt__header">
                            <div class="sale-receipt__logo-wrap">
                                @if (!empty($companyLogoUrl))
                                    <img src="{{ $companyLogoUrl }}" alt="{{ $companyName }}" class="sale-receipt__logo">
                                @else
                                    <span class="sale-receipt__logo-fallback">
                                        <i class="bi bi-egg-fried" aria-hidden="true"></i>
                                        <span>LOGO</span>
                                    </span>
                                @endif
                            </div>
                            <div class="sale-receipt__header-meta">
                                <div class="sale-receipt__brand-name">{{ $companyName ?? 'Nexus POS' }}</div>
                                <div class="sale-receipt__meta">
                                    <i class="bi bi-calculator" aria-hidden="true"></i>
                                    <span>Bill No: <strong id="sale-receipt-bill">—</strong></span>
                                </div>
                                <div class="sale-receipt__meta">
                                    <i class="bi bi-person" aria-hidden="true"></i>
                                    <span>Customer: <strong id="sale-receipt-customer">—</strong></span>
                                </div>
                                <div class="sale-receipt__meta">
                                    <i class="bi bi-bag" aria-hidden="true"></i>
                                    <span>Table: <strong id="sale-receipt-table">—</strong></span>
                                </div>
                            </div>
                        </div>

                        <div class="sale-receipt__dots" aria-hidden="true"></div>

                        <div class="sale-receipt__table-head" aria-hidden="true">
                            <span>Qty</span>
                            <span>Item</span>
                            <span>Amount</span>
                        </div>
                        <div id="sale-receipt-lines" class="sale-receipt__lines"></div>

                        <div class="sale-receipt__dots" aria-hidden="true"></div>

                        <div class="sale-receipt__totals">
                            <div class="sale-receipt__row">
                                <span><i class="bi bi-calculator" aria-hidden="true"></i> Subtotal</span>
                                <span id="sale-receipt-subtotal">{{ money(0) }}</span>
                            </div>
                            <div class="sale-receipt__row">
                                <span><i class="bi bi-tag" aria-hidden="true"></i> Discount</span>
                                <span id="sale-receipt-discount">{{ money(0) }}</span>
                            </div>
                            <div class="sale-receipt__row">
                                <span><i class="bi bi-cup-hot" aria-hidden="true"></i> Service charge</span>
                                <span id="sale-receipt-tax">{{ money(0) }}</span>
                            </div>
                            <div class="sale-receipt__total-box">
                                <span>Total</span>
                                <strong id="sale-receipt-total">{{ money(0) }}</strong>
                            </div>
                        </div>

                        <div class="sale-receipt__dots" aria-hidden="true"></div>

                        <div class="sale-receipt__thanks">
                            <i class="bi bi-heart-fill" aria-hidden="true"></i>
                            <span id="sale-receipt-footer">{{ $printFooterMsg ?? 'Thank you — please come again' }}</span>
                            <i class="bi bi-heart-fill" aria-hidden="true"></i>
                        </div>

                        <div class="sale-receipt__dots" aria-hidden="true"></div>

                        <div class="sale-receipt__datetime">
                            <i class="bi bi-calendar3" aria-hidden="true"></i>
                            <span id="sale-receipt-datetime">—</span>
                        </div>

                        <div class="sale-receipt__ornament" aria-hidden="true">
                            <span></span>
                            <i class="bi bi-flower1"></i>
                            <span></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="sale-print-receipt">
                        <i class="bi bi-printer" aria-hidden="true"></i> Print
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
    <link href="{{ asset('assets/css/pages/products.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/pages/sales.css') }}" rel="stylesheet">
@endpush

@push('scripts')
    <script src="{{ asset('assets/js/pages/sales.js') }}"></script>
@endpush