@extends('layouts.app')
@section('title', 'Sales History')

@section('content')
<div class="container-fluid py-4 sales-modern">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
        <div>
            <h4 class="fw-bold mb-1">Sales History</h4>
            <p class="text-muted small mb-0">Monitor and manage all your transactions in one place.</p>
        </div>
        <div class="d-flex gap-2 flex-wrap">
            {{-- Print and Download use the PDF of the filters below (every matching sale), not the web page --}}
            @include('partials.pdf-button', [
                'class' => 'btn btn-danger rounded-pill px-3 shadow-sm',
                'printClass' => 'btn btn-white border rounded-pill px-3 shadow-sm',
            ])
            <button type="button" onclick="exportCSV()" class="btn btn-white border rounded-pill px-3 shadow-sm" title="This page of sales as a spreadsheet (CSV)">
                <i class="bi bi-filetype-csv me-1 text-success"></i> CSV
            </button>
            <a href="{{ route('pos.new') }}" class="btn btn-primary rounded-pill px-4 shadow-sm">
                <i class="bi bi-plus-lg me-1"></i> New Sale
            </a>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="card border-0 shadow-sm rounded-4 mb-4 theme-filter-card" id="filtersSection">
        <div class="card-body p-4">
            <form method="GET" action="{{ route('sales.index') }}" class="row g-3 align-items-end">
                <div class="col-12 col-md-3 col-lg-2">
                    <label class="form-label small fw-bold text-white-50">Time Period</label>
                    <select name="period" class="form-select border-0 bg-white-10 text-white custom-select-dark" id="periodSelect">
                        <option value="all" {{ request('period') == 'all' ? 'selected' : '' }}>All Sales</option>
                        <option value="today" {{ request('period', 'today') == 'today' ? 'selected' : '' }}>Today</option>
                        <option value="yesterday" {{ request('period') == 'yesterday' ? 'selected' : '' }}>Yesterday</option>
                        <option value="this_week" {{ request('period') == 'this_week' ? 'selected' : '' }}>This Week</option>
                        <option value="this_month" {{ request('period') == 'this_month' ? 'selected' : '' }}>This Month</option>
                        <option value="last_month" {{ request('period') == 'last_month' ? 'selected' : '' }}>Last Month</option>
                        <option value="this_year" {{ request('period') == 'this_year' ? 'selected' : '' }}>This Year</option>
                        <option value="last_year" {{ request('period') == 'last_year' ? 'selected' : '' }}>Last Year</option>
                    </select>
                </div>

                <div class="col-12 col-md-5 col-lg-3">
                    <label class="form-label small fw-bold text-white-50">Custom Range</label>
                    <div class="input-group">
                        <input type="date" name="start_date" class="form-control border-0 bg-white-10 text-white" value="{{ request('start_date') }}" title="Start Date">
                        <input type="date" name="end_date" class="form-control border-0 bg-white-10 text-white" value="{{ request('end_date') }}" title="End Date">
                    </div>
                </div>

                <div class="col-12 col-md-3 col-lg-2">
                    <label class="form-label small fw-bold text-white-50">Payment Method</label>
                    <select name="payment_method" class="form-select border-0 bg-white-10 text-white custom-select-dark">
                        <option value="">All Methods</option>
                        <option value="cash" {{ request('payment_method') == 'cash' ? 'selected' : '' }}>Cash</option>
                        <option value="card" {{ request('payment_method') == 'card' ? 'selected' : '' }}>Card</option>
                        <option value="cheque" {{ request('payment_method') == 'cheque' ? 'selected' : '' }}>Cheque</option>
                        <option value="bank_transfer" {{ request('payment_method') == 'bank_transfer' ? 'selected' : '' }}>Bank Transfer</option>
                        <option value="advance" {{ request('payment_method') == 'advance' ? 'selected' : '' }}>Advance</option>
                        <option value="airtel_money" {{ request('payment_method') == 'airtel_money' ? 'selected' : '' }}>Airtel Money</option>
                        <option value="mpamba" {{ request('payment_method') == 'mpamba' ? 'selected' : '' }}>TNM Mpamba</option>
                        <option value="national_bank" {{ request('payment_method') == 'national_bank' ? 'selected' : '' }}>National Bank</option>
                        <option value="standard_bank" {{ request('payment_method') == 'standard_bank' ? 'selected' : '' }}>Standard Bank</option>
                        <option value="other" {{ request('payment_method') == 'other' ? 'selected' : '' }}>Other</option>
                    </select>
                </div>

                <div class="col-12 col-md-4 col-lg-3">
                    <label class="form-label small fw-bold text-white-50">Search Records</label>
                    <div class="input-group">
                        <span class="input-group-text bg-white-10 border-0 text-white-50"><i class="bi bi-search small"></i></span>
                        <input type="text" name="search" class="form-control border-0 bg-white-10 text-white" placeholder="Invoice / Customer" value="{{ request('search') }}">
                    </div>
                </div>

                <div class="col-12 col-md-4 col-lg-2 d-flex gap-2">
                    <button type="submit" class="btn btn-accent w-100 shadow-sm">Apply</button>
                    <a href="{{ route('sales.index') }}" class="btn btn-outline-light border-0 bg-white-10 w-100 text-center">Reset</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Summary Section Header -->
    <div class="d-flex align-items-center mb-3 gap-2">
        <i class="bi bi-graph-up text-primary fs-4"></i>
        <h5 class="fw-bold mb-0">Sales Summary</h5>
    </div>

    <!-- Summary Statistics -->
    <div class="row g-2 mb-4" id="summarySection">
        @php
            $displayNames = \App\Helpers\PaymentMethods::getDisplayNames();
            $totalSalesAmount = collect($summary['payment_methods'] ?? [])->sum('total') ?? 0;
            $totalTransactions = collect($summary['payment_methods'] ?? [])->sum('count') ?? 0;
        @endphp
        
        <!-- Total Sales Card -->
        <div class="col-12 col-md-4 col-lg-2">
            <div class="summary-card-modern bg-primary text-white text-center p-3 rounded-3 shadow-sm h-100 d-flex flex-column justify-content-center">
                <div class="small fw-medium opacity-75 mb-1">Total Sales</div>
                <h4 class="fw-bold mb-1">MWK {{ number_format($totalSalesAmount, 0) }}</h4>
                <div class="small opacity-75">{{ $totalTransactions }} transactions</div>
            </div>
        </div>

        {{-- Only the payment methods used in this period --}}
        @php
            $usedMethods = collect($displayNames)->filter(fn ($name, $method) => ($summary['payment_methods'][$method]['count'] ?? 0) > 0);
        @endphp
        @forelse($usedMethods as $method => $displayName)
            @php
                $data = $summary['payment_methods'][$method];
            @endphp
            <div class="col-6 col-md-4 col-lg-2">
                <div class="summary-card-modern bg-white border text-center p-3 rounded-3 shadow-sm h-100 d-flex flex-column justify-content-center">
                    <div class="small fw-medium text-muted mb-1">{{ $displayName }}</div>
                    <div class="fw-bold text-success">MWK {{ number_format($data['total'], 0) }}</div>
                    <div class="small text-muted">{{ $data['count'] }} {{ $data['count'] == 1 ? 'sale' : 'sales' }}</div>
                </div>
            </div>
        @empty
            <div class="col-12 col-md-8 col-lg-10">
                <div class="summary-card-modern bg-white border text-center p-3 rounded-3 h-100 d-flex align-items-center justify-content-center text-muted">
                    No sales in this period
                </div>
            </div>
        @endforelse
    </div>

    @php
        $canEditSales = auth()->user()->hasPermission('edit_pos_sell');
        $canVoidSales = auth()->user()->hasPermission('delete_pos_sell');
    @endphp

    <!-- Main Table Card -->
    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="card-header bg-white border-0 py-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
            <h5 class="fw-bold mb-0">Transaction Records</h5>
            <span class="small text-muted">{{ $sales->total() }} {{ \Illuminate\Support\Str::plural('record', $sales->total()) }}</span>
        </div>

        {{-- Compact table: action icons always visible (no menu). Phones: one card per sale. --}}
        <div class="sh-wrap">
            <table class="sh-table" id="salesTable">
                <thead>
                    <tr>
                        <th>Invoice</th>
                        <th class="c-customer">Customer</th>
                        <th>Products</th>
                        <th>Payment</th>
                        <th class="text-end">Total</th>
                        <th class="text-end c-actions">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($sales as $s)
                    @php
                        $first = $s->items->first();
                        $more = $s->items->count() - 1;
                        $allNames = $s->items->map(fn ($i) => optional($i->product)->name ?? 'Deleted product')->implode(', ');
                        $methodLabel = $s->payment_method === 'split'
                            ? 'Split'
                            : ($displayNames[$s->payment_method] ?? ucwords(str_replace('_', ' ', (string) $s->payment_method)));
                        $cashier = $s->register->user->name ?? null;
                    @endphp
                    <tr>
                        <td class="c-invoice">
                            <a href="{{ route('sales.show', $s->id) }}" class="sh-invoice">{{ $s->invoice_no ?? 'INV-' . str_pad($s->id, 5, '0', STR_PAD_LEFT) }}</a>
                            <div class="sh-sub">{{ $s->created_at->format('d M Y, H:i') }}</div>
                        </td>
                        <td class="c-customer">
                            <div class="sh-ellipsis">{{ $s->customer_name ?: 'Walk-in' }}</div>
                            @if($cashier)<div class="sh-sub">by {{ $cashier }}</div>@endif
                        </td>
                        <td class="c-products" title="{{ $allNames }}">
                            @if($first)
                                <div class="sh-ellipsis">{{ optional($first->product)->name ?? 'Deleted product' }}@if($more > 0) <span class="sh-more">+{{ $more }}</span>@endif</div>
                            @else
                                <div class="text-muted">No items</div>
                            @endif
                            <div class="sh-sub">{{ rtrim(rtrim(number_format((float) $s->total_items, 2), '0'), '.') }} {{ \Illuminate\Support\Str::plural('item', (float) $s->total_items) }}</div>
                        </td>
                        <td class="c-payment">
                            <div>{{ $methodLabel }}</div>
                            <span class="sh-status {{ $s->payment_status === 'paid' ? 'paid' : 'due' }}">{{ ucfirst($s->payment_status) }}</span>
                        </td>
                        <td class="text-end c-total">MWK {{ number_format($s->total_amount, 2) }}</td>
                        <td class="c-actions">
                            <div class="sh-actions">
                                <a href="{{ route('sales.show', $s->id) }}" class="sh-btn view" title="View sale" aria-label="View sale {{ $s->invoice_no }}"><i class="bi bi-eye"></i></a>
                                @if($canEditSales)
                                    <a href="{{ route('sales.edit', $s->id) }}" class="sh-btn edit" title="Edit sale" aria-label="Edit sale {{ $s->invoice_no }}"><i class="bi bi-pencil"></i></a>
                                @endif
                                @if($canVoidSales)
                                    <form method="POST" action="{{ route('sales.destroy', $s->id) }}" class="m-0"
                                          onsubmit="if (!confirm(@js('Void sale ' . $s->invoice_no . ' of MWK ' . number_format($s->total_amount, 2) . '?' . chr(10) . chr(10) . 'The stock goes back into the batches it was sold from, the payment is removed and the void is recorded in Loss Prevention. This cannot be undone.'))) return false; this.querySelector('button').disabled = true;">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="sh-btn void" title="Void Sale" aria-label="Void sale {{ $s->invoice_no }}"><i class="bi bi-x-octagon"></i></button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="sh-empty">
                            <i class="bi bi-receipt"></i>
                            No sales match these filters.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($sales->hasPages())
        <div class="card-footer bg-white py-3 border-0">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                <p class="text-muted small mb-0">
                    Showing <strong>{{ $sales->firstItem() }}</strong> to <strong>{{ $sales->lastItem() }}</strong> of <strong>{{ $sales->total() }}</strong> records
                </p>
                <div>
                    {{ $sales->appends(request()->query())->links() }}
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<style>
.sales-modern {
    background-color: #f8f9fa;
}

.summary-card-modern {
    transition: all 0.2s ease;
    min-height: 100px;
    border: 1px solid #dee2e6 !important;
}

.summary-card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

.text-success { color: #28a745 !important; }
.text-primary { color: #0d6efd !important; }

.bg-success-soft { background-color: rgba(25, 135, 84, 0.1); }
.bg-warning-soft { background-color: rgba(255, 193, 7, 0.1); }
.bg-primary-soft { background-color: rgba(0, 77, 61, 0.1); }

.btn-white {
    background-color: #fff;
    color: #333;
}

.btn-white:hover {
    background-color: #f8f9fa;
}

/* Sales table: compact rows, action icons always visible */
.sh-wrap { overflow-x: auto; }
.sh-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.sh-table thead th { background: var(--theme-primary); color: #fff; font-size: .72rem; font-weight: 600; text-transform: uppercase;
                     letter-spacing: .03em; padding: .6rem .75rem; white-space: nowrap; }
.sh-table tbody td { padding: .55rem .75rem; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.sh-table tbody tr:hover td { background: #f8fafc; }
.sh-invoice { font-weight: 600; color: var(--theme-primary); text-decoration: none; white-space: nowrap; }
.sh-invoice:hover { text-decoration: underline; }
.sh-sub { font-size: .75rem; color: #64748b; white-space: nowrap; }
.sh-ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-more { font-size: .72rem; color: #64748b; background: #f1f5f9; border-radius: 6px; padding: 0 .35rem; }
.sh-status { display: inline-block; font-size: .68rem; font-weight: 600; border-radius: 999px; padding: .05rem .5rem; margin-top: .1rem; }
.sh-status.paid { background: #dcfce7; color: #166534; }
.sh-status.due { background: #fef3c7; color: #92400e; }
.sh-table .c-total { font-weight: 700; white-space: nowrap; }
.sh-table .c-actions { position: sticky; right: 0; background: #fff; width: 1%; }
.sh-table th.c-actions { background: var(--theme-primary); }
.sh-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.sh-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
          border: 0; font-size: .9rem; text-decoration: none; transition: filter .15s; flex-shrink: 0; }
.sh-btn:hover { filter: brightness(.92); }
.sh-btn:disabled { opacity: .5; }
.sh-btn.view { color: #1e40af; background: #eff6ff; }
.sh-btn.edit { color: #b45309; background: #fef3c7; }
.sh-btn.void { color: #dc2626; background: #fee2e2; }
.sh-empty { text-align: center; color: #64748b; padding: 2.5rem 1rem !important; }
.sh-empty i { display: block; font-size: 2.2rem; color: #cbd5e1; margin-bottom: .4rem; }

/* Medium screens: the customer is on the sale's page */
@media (max-width: 1199.98px) {
    .sh-table .c-customer { display: none; }
    .sh-ellipsis { max-width: 170px; }
}

/* Phones: each sale as a compact card, actions on their own row */
@media (max-width: 767.98px) {
    .sh-table thead { display: none; }
    .sh-table, .sh-table tbody, .sh-table tr, .sh-table td { display: block; width: 100%; }
    /* invoice | total, then products, then payment | actions */
    .sh-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "inv total" "prod prod" "pay act";
                   gap: .2rem .75rem; padding: .7rem .9rem; border-bottom: 1px solid #f1f5f9; }
    .sh-table tbody td { padding: 0; border: 0; min-width: 0; width: auto; }
    .sh-table td.c-invoice { grid-area: inv; }
    .sh-table td.c-total { grid-area: total; align-self: start; }
    .sh-table td.c-products { grid-area: prod; }
    .sh-table td.c-payment { grid-area: pay; display: flex; gap: .5rem; align-items: center; }
    .sh-table td.c-actions { grid-area: act; position: static; background: transparent; justify-self: end; }
    .sh-table td.sh-empty { grid-column: 1 / -1; }
    .sh-table tr:has(.sh-empty) { display: block; }
    .sh-btn { width: 36px; height: 34px; }
    .sh-ellipsis { max-width: 100%; }
}

/* Pagination Overrides */
.pagination {
    margin-bottom: 0;
}

.page-link {
    border: none;
    padding: 0.5rem 0.8rem;
    margin: 0 2px;
    border-radius: 8px !important;
    color: #6c757d;
}

.page-item.active .page-link {
    background-color: var(--theme-primary);
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.theme-filter-card {
    background-color: var(--theme-primary) !important;
    background-image: linear-gradient(135deg, var(--theme-primary) 0%, rgba(0,0,0,0.1) 100%);
}

    .bg-white-10 {
        background-color: rgba(255, 255, 255, 0.1) !important;
    }

    .custom-select-dark {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff80' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }

    .custom-select-dark option {
        background-color: #004d3d;
        color: white;
    }

    .btn-accent {
        background-color: #22c55e;
        color: white;
        border: none;
        font-weight: 600;
    }

    .btn-accent:hover {
        background-color: #16a34a;
        color: white;
    }

    @media print {
        .app-sidebar, .app-topbar, .navbar, #filtersToggle, .btn-primary, .dropdown, .card-footer, .c-actions, .theme-filter-card {
            display: none !important;
        }
        .card {
            box-shadow: none !important;
        }
    }
</style>

@endsection

@section('scripts')
<script>
function exportCSV() {
    const table = document.getElementById('salesTable');
    let csv = [];
    const rows = table.querySelectorAll('tr');
    
    for (let i = 0; i < rows.length; i++) {
        let row = [], cols = rows[i].querySelectorAll('td, th');
        for (let j = 0; j < cols.length - 1; j++) { // Skip action column
            row.push('"' + cols[j].innerText.trim().replace(/"/g, '""') + '"');
        }
        csv.push(row.join(','));
    }
    
    const csvContent = "data:text/csv;charset=utf-8," + csv.join("\n");
    const encodedUri = encodeURI(csvContent);
    const link = document.createElement("a");
    link.setAttribute("href", encodedUri);
    link.setAttribute("download", "sales_history_" + new Date().toLocaleDateString() + ".csv");
    document.body.appendChild(link);
    link.click();
}

</script>
@endsection