@extends('layouts.admin')

@section('styles')
<style>
/* INVOICES LIST STYLES */
.invoices-header {
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.invoices-header h1 {
    margin: 0;
    font-weight: 700;
    font-size: 28px;
    display: flex;
    align-items: center;
}

.invoices-header h1 i {
    margin-right: 10px;
}

.invoices-stats {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.stat-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    min-width: 100px;
}

.stat-number {
    font-size: 20px;
    font-weight: 700;
    display: block;
}

.stat-label {
    font-size: 12px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    overflow: hidden;
}

.filter-header {
    background: linear-gradient(135deg, #f8f9fc 0%, #e2e6ea 100%);
    padding: 15px 20px;
    border-bottom: 1px solid #e3e6f0;
    display: flex;
    justify-content: between;
    align-items: center;
}

.filter-title {
    font-weight: 600;
    margin: 0;
    color: #5a5c69;
    display: flex;
    align-items: center;
}

.filter-title i {
    margin-right: 8px;
    color: #1cc88a;
}

.filter-body {
    padding: 20px;
}

.search-box {
    position: relative;
    margin-bottom: 20px;
}

.search-box .form-control {
    padding-left: 45px;
    border-radius: 25px;
    border: 2px solid #e3e6f0;
    font-size: 14px;
    height: 45px;
}

.search-box .search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #858796;
    font-size: 16px;
}

.search-box .form-control:focus {
    border-color: #1cc88a;
    box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

.filter-row {
    display: flex;
    gap: 15px;
    align-items: end;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.filter-group {
    flex: 1;
    min-width: 150px;
}

.filter-group label {
    font-weight: 600;
    color: #5a5c69;
    margin-bottom: 5px;
    display: block;
    font-size: 13px;
}

.filter-actions {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
}

.btn-filter {
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-filter:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: white;
}

.btn-clear {
    background: linear-gradient(135deg, #858796 0%, #60616f 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-clear:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: white;
}

.btn-export {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-export:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    color: white;
}

.table-container {
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e8eef5;
}

.table-header {
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    color: white;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.table-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.table-title {
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 18px;
    position: relative;
    z-index: 1;
}

.table-title i {
    margin-right: 10px;
    font-size: 20px;
}

.table-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.table-responsive {
    position: relative;
    overflow: auto;
    max-height: none;
}

.modern-table {
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

.modern-table thead th {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: none;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 700;
    color: #2d3748;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 20px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    text-align: left;
}

.modern-table tbody td {
    padding: 18px 16px;
    vertical-align: middle;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    background: white;
    transition: all 0.2s ease;
}

.modern-table tbody tr {
    transition: all 0.3s ease;
}

.modern-table tbody tr:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.modern-table tbody tr:hover td {
    background: transparent;
}

.modern-table tbody tr:last-child td {
    border-bottom: none;
}

.invoice-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-draft {
    background: linear-gradient(135deg, #858796 0%, #60616f 100%);
    color: white;
}

.badge-sent {
    background: linear-gradient(135deg, #36b9cc 0%, #258391 100%);
    color: white;
}

.badge-paid {
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    color: white;
}

.badge-partial {
    background: linear-gradient(135deg, #f6c23e 0%, #dda20a 100%);
    color: white;
}

.badge-unpaid {
    background: linear-gradient(135deg, #e74a3b 0%, #c23321 100%);
    color: white;
}

.badge-overdue {
    background: linear-gradient(135deg, #e74a3b 0%, #c23321 100%);
    color: white;
}

.badge-cancelled {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
    color: white;
}

.action-buttons {
    display: flex;
    gap: 5px;
}

.btn-action {
    padding: 8px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.btn-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-view {
    background: #36b9cc;
    color: white;
}

.btn-edit {
    background: #4e73df;
    color: white;
}

.btn-pdf {
    background: #e74a3b;
    color: white;
}

.btn-receipt {
    background: #1cc88a;
    color: white;
}

.btn-delete {
    background: #e74a3b;
    color: white;
}

.pagination-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    padding: 25px;
    border-top: 2px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    position: relative;
}

.pagination-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #1cc88a 0%, #17a673 100%);
}

.pagination-info {
    color: #4a5568;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pagination-info .info-badge {
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.per-page-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 8px 16px;
    border-radius: 25px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.per-page-selector label {
    font-weight: 600;
    color: #4a5568;
    font-size: 13px;
    margin: 0;
}

.per-page-selector select {
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1cc88a;
    outline: none;
    cursor: pointer;
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.jump-to-page {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 8px 16px;
    border-radius: 25px;
    border: 2px solid #e2e8f0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.jump-to-page label {
    font-weight: 600;
    color: #4a5568;
    font-size: 13px;
    margin: 0;
    white-space: nowrap;
}

.jump-to-page input {
    border: none;
    background: transparent;
    width: 50px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #1cc88a;
    outline: none;
}

.jump-to-page button {
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    border: none;
    color: white;
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.jump-to-page button:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(28, 200, 138, 0.3);
}

.modern-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modern-pagination .page-item {
    margin: 0;
}

.modern-pagination .page-link {
    border: 2px solid #e2e8f0;
    color: #4a5568;
    padding: 10px 16px;
    margin: 0;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-weight: 600;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
}

.modern-pagination .page-link:hover {
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(28, 200, 138, 0.3);
}

.modern-pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 15px rgba(28, 200, 138, 0.4);
}

.modern-pagination .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f8fafc;
    color: #a0aec0;
}

.modern-pagination .page-item.disabled .page-link:hover {
    background: #f8fafc;
    color: #a0aec0;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.sort-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.3s;
}

.sort-header:hover {
    color: #1cc88a;
}

.sort-header.active {
    color: #1cc88a;
}

.sort-indicator {
    margin-left: 5px;
    font-size: 10px;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #858796;
}

.empty-state i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
}

.empty-state h3 {
    margin-bottom: 10px;
    color: #5a5c69;
}

.invoice-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1cc88a 0%, #17a673 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 12px;
}

.invoice-number {
    font-weight: 600;
    color: #5a5c69;
    margin-bottom: 3px;
}

.invoice-date {
    font-size: 12px;
    color: #858796;
}

.client-info {
    color: #5a5c69;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amount-display {
    font-weight: 600;
    color: #1cc88a;
    font-size: 16px;
}

.payment-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.amount-paid {
    font-size: 12px;
    color: #1cc88a;
    font-weight: 600;
}

.amount-balance {
    font-size: 12px;
    color: #e74a3b;
    font-weight: 600;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .invoices-stats {
        justify-content: center;
    }
    
    .filter-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .filter-group {
        min-width: auto;
    }
    
    .filter-actions {
        justify-content: center;
        width: 100%;
    }
    
    .table-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .table-actions {
        justify-content: center;
    }
    
    .pagination-container {
        flex-direction: column;
        text-align: center;
    }
    
    .pagination-controls {
        justify-content: center;
    }
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Invoices Header -->
    <div class="invoices-header">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <h1><i class="fas fa-file-invoice-dollar"></i> Invoices Management</h1>
                <div class="invoices-stats">
                    <div class="stat-item">
                        <span class="stat-number">{{ $statistics['total'] }}</span>
                        <span class="stat-label">Total</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ $statistics['draft'] }}</span>
                        <span class="stat-label">Draft</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ $statistics['sent'] }}</span>
                        <span class="stat-label">Sent</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ $statistics['paid'] }}</span>
                        <span class="stat-label">Paid</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ $statistics['overdue'] }}</span>
                        <span class="stat-label">Overdue</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">KES {{ number_format($statistics['total_value'], 0) }}</span>
                        <span class="stat-label">Total Value</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">KES {{ number_format($statistics['total_paid'], 0) }}</span>
                        <span class="stat-label">Total Paid</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">KES {{ number_format($statistics['total_balance'], 0) }}</span>
                        <span class="stat-label">Balance</span>
                    </div>
                </div>
            </div>
            <div>
                <a href="{{ route('invoices.create') }}" class="btn btn-light">
                    <i class="fas fa-plus"></i> Add New Invoice
                </a>
            </div>
        </div>
    </div>

    <!-- Alert Messages -->
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <!-- Advanced Filters -->
    <div class="filter-card">
        <div class="filter-header">
            <h6 class="filter-title">
                <i class="fas fa-filter"></i> Advanced Filters & Search
            </h6>
        </div>
        <div class="filter-body">
            <form method="GET" action="{{ route('invoices.index') }}" id="filterForm">
                <!-- Search Box -->
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" name="search" class="form-control" 
                           placeholder="Search invoices by number, client, event, notes..." 
                           value="{{ request('search') }}">
                </div>

                <!-- Quick Date Filters -->
                <div class="row mb-3">
                    <div class="col-12">
                        <label class="form-label fw-bold">Quick Date Filters (Creation Date):</label>
                        <div class="d-flex flex-wrap gap-2">
                            @foreach($quickDateFilters as $value => $label)
                                <button type="button" 
                                        class="btn btn-sm {{ request('quick_date') == $value ? 'btn-primary' : 'btn-outline-secondary' }}" 
                                        onclick="setQuickDate('{{ $value }}')">
                                    {{ $label }}
                                </button>
                            @endforeach
                            @if(request('quick_date'))
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearQuickDate()">
                                    <i class="fas fa-times"></i> Clear
                                </button>
                            @endif
                        </div>
                        <input type="hidden" name="quick_date" value="{{ request('quick_date') }}">
                    </div>
                </div>

                <!-- Filter Row 1 -->
                <div class="filter-row">
                    <div class="filter-group">
                        <label>Status</label>
                        <select name="status" class="form-select">
                            @foreach($statusOptions as $value => $label)
                                <option value="{{ $value }}" {{ request('status', 'all') == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Client</label>
                        <select name="client_id" class="form-select">
                            <option value="all">All Clients</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}" {{ request('client_id') == $client->id ? 'selected' : '' }}>
                                    {{ $client->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Event</label>
                        <select name="event_id" class="form-select">
                            <option value="all">All Events</option>
                            @foreach($events as $event)
                                <option value="{{ $event->id }}" {{ request('event_id') == $event->id ? 'selected' : '' }}>
                                    {{ $event->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Filter Row 2 -->
                <div class="filter-row">
                    <div class="filter-group">
                        <label>Created From</label>
                        <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}">
                    </div>
                    
                    <div class="filter-group">
                        <label>Created To</label>
                        <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}">
                    </div>
                    
                    <div class="filter-group">
                        <label>Issue From</label>
                        <input type="date" name="issue_from" class="form-control" value="{{ request('issue_from') }}">
                    </div>
                    
                    <div class="filter-group">
                        <label>Issue To</label>
                        <input type="date" name="issue_to" class="form-control" value="{{ request('issue_to') }}">
                    </div>
                </div>

                <!-- Filter Row 3 -->
                <div class="filter-row">
                    <div class="filter-group">
                        <label>Due From</label>
                        <input type="date" name="due_from" class="form-control" value="{{ request('due_from') }}">
                    </div>
                    
                    <div class="filter-group">
                        <label>Due To</label>
                        <input type="date" name="due_to" class="form-control" value="{{ request('due_to') }}">
                    </div>
                    
                    <div class="filter-group">
                        <label>Amount (Min)</label>
                        <input type="number" name="amount_min" class="form-control" placeholder="0" 
                               value="{{ request('amount_min') }}" step="0.01">
                    </div>
                    
                    <div class="filter-group">
                        <label>Amount (Max)</label>
                        <input type="number" name="amount_max" class="form-control" placeholder="999999" 
                               value="{{ request('amount_max') }}" step="0.01">
                    </div>
                </div>

                <!-- Filter Row 4 -->
                <div class="filter-row">
                    <div class="filter-group">
                        <label>Sort By</label>
                        <select name="sort_by" class="form-select">
                            <option value="created_at" {{ request('sort_by', 'created_at') == 'created_at' ? 'selected' : '' }}>Created Date</option>
                            <option value="invoice_no" {{ request('sort_by') == 'invoice_no' ? 'selected' : '' }}>Invoice No</option>
                            <option value="client_name" {{ request('sort_by') == 'client_name' ? 'selected' : '' }}>Client Name</option>
                            <option value="event_name" {{ request('sort_by') == 'event_name' ? 'selected' : '' }}>Event Name</option>
                            <option value="amount" {{ request('sort_by') == 'amount' ? 'selected' : '' }}>Amount</option>
                            <option value="status" {{ request('sort_by') == 'status' ? 'selected' : '' }}>Status</option>
                            <option value="issue_date" {{ request('sort_by') == 'issue_date' ? 'selected' : '' }}>Issue Date</option>
                            <option value="due_date" {{ request('sort_by') == 'due_date' ? 'selected' : '' }}>Due Date</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Direction</label>
                        <select name="sort_direction" class="form-select">
                            <option value="asc" {{ request('sort_direction', 'desc') == 'asc' ? 'selected' : '' }}>Ascending</option>
                            <option value="desc" {{ request('sort_direction', 'desc') == 'desc' ? 'selected' : '' }}>Descending</option>
                        </select>
                    </div>
                </div>

                <!-- Filter Actions -->
                <div class="filter-actions">
                    <button type="submit" class="btn-filter">
                        <i class="fas fa-search"></i> Apply Filters
                    </button>
                    <a href="{{ route('invoices.index') }}" class="btn-clear">
                        <i class="fas fa-times"></i> Clear All
                    </a>
                    <button type="button" class="btn-export" onclick="exportData()">
                        <i class="fas fa-download"></i> Export
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Invoices Table -->
    <div class="table-container">
        <div class="table-header">
            <h6 class="table-title">
                <i class="fas fa-table"></i> Invoices List 
                <span class="ms-2 opacity-75">({{ $invoices->total() }} total)</span>
            </h6>
            <div class="table-actions">
                <span class="text-white opacity-75">Showing {{ $invoices->firstItem() ?? 0 }} to {{ $invoices->lastItem() ?? 0 }} of {{ $invoices->total() }} results</span>
            </div>
        </div>

        <div class="table-responsive">
            <table class="modern-table table">
                <thead>
                    <tr>
                        <th class="sort-header" onclick="sortTable('invoice_no')">
                            Invoice #
                            @if(request('sort_by') == 'invoice_no')
                                <span class="sort-indicator">
                                    <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'asc' ? 'up' : 'down' }}"></i>
                                </span>
                            @endif
                        </th>
                        <th class="sort-header" onclick="sortTable('client_name')">
                            Client
                            @if(request('sort_by') == 'client_name')
                                <span class="sort-indicator">
                                    <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'asc' ? 'up' : 'down' }}"></i>
                                </span>
                            @endif
                        </th>
                        <th class="sort-header" onclick="sortTable('event_name')">
                            Event
                            @if(request('sort_by') == 'event_name')
                                <span class="sort-indicator">
                                    <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'asc' ? 'up' : 'down' }}"></i>
                                </span>
                            @endif
                        </th>
                        <th class="sort-header" onclick="sortTable('issue_date')">
                            Issue Date
                            @if(request('sort_by') == 'issue_date')
                                <span class="sort-indicator">
                                    <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'asc' ? 'up' : 'down' }}"></i>
                                </span>
                            @endif
                        </th>
                        <th class="sort-header" onclick="sortTable('due_date')">
                            Due Date
                            @if(request('sort_by') == 'due_date')
                                <span class="sort-indicator">
                                    <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'asc' ? 'up' : 'down' }}"></i>
                                </span>
                            @endif
                        </th>
                        <th class="sort-header" onclick="sortTable('amount')">
                            Amount
                            @if(request('sort_by') == 'amount')
                                <span class="sort-indicator">
                                    <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'asc' ? 'up' : 'down' }}"></i>
                                </span>
                            @endif
                        </th>
                        <th>Payment Info</th>
                        <th class="sort-header" onclick="sortTable('status')">
                            Status
                            @if(request('sort_by') == 'status')
                                <span class="sort-indicator">
                                    <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'asc' ? 'up' : 'down' }}"></i>
                                </span>
                            @endif
                        </th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($invoices as $invoice)
                        <tr>
                            <td>
                                <div class="invoice-info">
                                    <div class="invoice-avatar">
                                        {{ substr($invoice->invoice_no, -2) }}
                                    </div>
                                    <div>
                                        <div class="invoice-number">{{ $invoice->invoice_no }}</div>
                                        <div class="invoice-date">{{ $invoice->created_at->format('M d, Y') }}</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                @if($invoice->client)
                                    <a href="{{ route('clients.show', $invoice->client->id) }}" class="client-info">
                                        {{ $invoice->client->name }}
                                    </a>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>
                                @if($invoice->event)
                                    <a href="{{ route('events.show', $invoice->event->id) }}" class="client-info">
                                        {{ $invoice->event->name }}
                                    </a>
                                @else
                                    <span class="text-muted">N/A</span>
                                @endif
                            </td>
                            <td>{{ $invoice->issue_date ? $invoice->issue_date->format('M d, Y') : 'N/A' }}</td>
                            <td>{{ $invoice->due_date ? $invoice->due_date->format('M d, Y') : 'N/A' }}</td>
                            <td>
                                <span class="amount-display">KES {{ number_format($invoice->amount, 0) }}</span>
                            </td>
                            <td>
                                <div class="payment-info">
                                    <div class="amount-paid">Paid: KES {{ number_format($invoice->amount_paid, 0) }}</div>
                                    <div class="amount-balance">Balance: KES {{ number_format($invoice->balance, 0) }}</div>
                                </div>
                            </td>
                            <td>
                                <span class="invoice-badge badge-{{ $invoice->status }}">
                                    @if($invoice->status == 'draft')
                                        <i class="fas fa-edit"></i> Draft
                                    @elseif($invoice->status == 'sent')
                                        <i class="fas fa-paper-plane"></i> Sent
                                    @elseif($invoice->status == 'paid')
                                        <i class="fas fa-check"></i> Paid
                                    @elseif($invoice->status == 'partial')
                                        <i class="fas fa-adjust"></i> Partial
                                    @elseif($invoice->status == 'unpaid')
                                        <i class="fas fa-times"></i> Unpaid
                                    @elseif($invoice->status == 'overdue')
                                        <i class="fas fa-exclamation-triangle"></i> Overdue
                                    @elseif($invoice->status == 'cancelled')
                                        <i class="fas fa-ban"></i> Cancelled
                                    @endif
                                </span>
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <a href="{{ route('invoices.show', $invoice->id) }}" 
                                       class="btn-action btn-view" title="View Details">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    @if($invoice->status != 'cancelled')
                                        <a href="{{ route('invoices.edit', $invoice->id) }}" 
                                           class="btn-action btn-edit" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                    @endif
                                    <a href="{{ route('invoices.pdf', $invoice->id) }}" 
                                       class="btn-action btn-pdf" title="Download PDF" target="_blank">
                                        <i class="fas fa-file-pdf"></i>
                                    </a>
                                    @if(in_array($invoice->status, ['sent', 'overdue']))
                                        <a href="{{ route('receipts.create', ['invoice_id' => $invoice->id]) }}" 
                                           class="btn-action btn-receipt" title="Create Receipt">
                                            <i class="fas fa-receipt"></i>
                                        </a>
                                    @endif
                                    @if($invoice->status != 'cancelled' && $invoice->receipts->count() == 0)
                                        <form action="{{ route('invoices.destroy', $invoice->id) }}" 
                                              method="POST" class="d-inline"
                                              onsubmit="return confirm('Are you sure you want to delete this invoice?')">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-action btn-delete" title="Delete">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="empty-state">
                                    <i class="fas fa-file-invoice-dollar"></i>
                                    <h3>No Invoices Found</h3>
                                    <p>No invoices match your current search criteria.</p>
                                    <a href="{{ route('invoices.create') }}" class="btn btn-primary">
                                        <i class="fas fa-plus"></i> Create New Invoice
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="pagination-container">
            <div class="pagination-info">
                <span>Showing {{ $invoices->firstItem() ?? 0 }} to {{ $invoices->lastItem() ?? 0 }} of {{ $invoices->total() }} results</span>
                <span class="info-badge">{{ $invoices->count() }} on this page</span>
            </div>
            
            <div class="pagination-controls">
                <div class="per-page-selector">
                    <label>Show:</label>
                    <select onchange="changePerPage(this.value)">
                        @foreach([10, 15, 25, 50, 100] as $size)
                            <option value="{{ $size }}" {{ request('per_page', 15) == $size ? 'selected' : '' }}>
                                {{ $size }}
                            </option>
                        @endforeach
                    </select>
                    <span>per page</span>
                </div>
                
                <div class="pagination-wrapper">
                    @if($invoices->hasPages())
                        <div class="jump-to-page">
                            <label>Go to page:</label>
                            <input type="number" 
                                   min="1" 
                                   max="{{ $invoices->lastPage() }}" 
                                   value="{{ $invoices->currentPage() }}"
                                   id="jumpToPage">
                            <button onclick="jumpToPage()">Go</button>
                        </div>
                        
                        <nav aria-label="Invoices pagination">
                            <ul class="modern-pagination pagination">
                                {{-- Previous Page Link --}}
                                @if ($invoices->onFirstPage())
                                    <li class="page-item disabled">
                                        <span class="page-link"><i class="fas fa-chevron-left"></i></span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $invoices->previousPageUrl() }}" rel="prev">
                                            <i class="fas fa-chevron-left"></i>
                                        </a>
                                    </li>
                                @endif

                                {{-- Pagination Elements --}}
                                @php
                                    $start = max($invoices->currentPage() - 2, 1);
                                    $end = min($start + 4, $invoices->lastPage());
                                    $start = max($end - 4, 1);
                                @endphp

                                @if($start > 1)
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $invoices->url(1) }}">1</a>
                                    </li>
                                    @if($start > 2)
                                        <li class="page-item disabled">
                                            <span class="page-link">...</span>
                                        </li>
                                    @endif
                                @endif

                                @for ($i = $start; $i <= $end; $i++)
                                    @if ($i == $invoices->currentPage())
                                        <li class="page-item active">
                                            <span class="page-link">{{ $i }}</span>
                                        </li>
                                    @else
                                        <li class="page-item">
                                            <a class="page-link" href="{{ $invoices->url($i) }}">{{ $i }}</a>
                                        </li>
                                    @endif
                                @endfor

                                @if($end < $invoices->lastPage())
                                    @if($end < $invoices->lastPage() - 1)
                                        <li class="page-item disabled">
                                            <span class="page-link">...</span>
                                        </li>
                                    @endif
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $invoices->url($invoices->lastPage()) }}">{{ $invoices->lastPage() }}</a>
                                    </li>
                                @endif

                                {{-- Next Page Link --}}
                                @if ($invoices->hasMorePages())
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $invoices->nextPageUrl() }}" rel="next">
                                            <i class="fas fa-chevron-right"></i>
                                        </a>
                                    </li>
                                @else
                                    <li class="page-item disabled">
                                        <span class="page-link"><i class="fas fa-chevron-right"></i></span>
                                    </li>
                                @endif
                            </ul>
                        </nav>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script id="page-config" type="application/json">
{
    "maxPage": {{ $invoices->lastPage() ?? 1 }},
    "currentSort": {!! json_encode(request("sort_by")) !!},
    "currentDirection": {!! json_encode(request("sort_direction", "desc")) !!}
}
</script>
<script>
// Get configuration from JSON script tag
const pageConfig = JSON.parse(document.getElementById('page-config').textContent);
const maxPage = pageConfig.maxPage;
const currentSort = pageConfig.currentSort;
const currentDirection = pageConfig.currentDirection;

// Filter and Search Functions
function setQuickDate(value) {
    document.querySelector('input[name="quick_date"]').value = value;
    document.getElementById('filterForm').submit();
}

function clearQuickDate() {
    document.querySelector('input[name="quick_date"]').value = '';
    document.getElementById('filterForm').submit();
}

function sortTable(column) {
    let newDirection = 'asc';
    if (currentSort === column && currentDirection === 'asc') {
        newDirection = 'desc';
    }
    
    // Create URL with new sort parameters
    const url = new URL(window.location);
    url.searchParams.set('sort_by', column);
    url.searchParams.set('sort_direction', newDirection);
    
    window.location = url.toString();
}

function changePerPage(perPage) {
    const url = new URL(window.location);
    url.searchParams.set('per_page', perPage);
    url.searchParams.set('page', 1); // Reset to first page
    window.location = url.toString();
}

function jumpToPage() {
    const page = document.getElementById('jumpToPage').value;
    
    if (page >= 1 && page <= maxPage) {
        const url = new URL(window.location);
        url.searchParams.set('page', page);
        window.location = url.toString();
    } else {
        alert('Please enter a valid page number between 1 and ' + maxPage);
    }
}

function exportData() {
    // Get current filter parameters
    const form = document.getElementById('filterForm');
    const formData = new FormData(form);
    const params = new URLSearchParams(formData);
    
    // Show export options
    const options = [
        { label: 'Export as Excel', value: 'excel' },
        { label: 'Export as CSV', value: 'csv' },
        { label: 'Export as PDF', value: 'pdf' }
    ];
    
    let exportType = prompt('Choose export format:\n1. Excel\n2. CSV\n3. PDF\n\nEnter 1, 2, or 3:');
    
    if (exportType) {
        const formats = { '1': 'excel', '2': 'csv', '3': 'pdf' };
        const format = formats[exportType];
        
        if (format) {
            // Create export URL with current filters
            const exportUrl = `/invoices/export/${format}?${params.toString()}`;
            window.open(exportUrl, '_blank');
        } else {
            alert('Invalid selection. Please choose 1, 2, or 3.');
        }
    }
}

// Auto-submit form when filters change (optional)
document.addEventListener('DOMContentLoaded', function() {
    const filterSelects = document.querySelectorAll('#filterForm select:not([onchange])');
    const filterInputs = document.querySelectorAll('#filterForm input[type="date"], #filterForm input[type="number"]');
    
    // Add change listeners to auto-submit form
    [...filterSelects, ...filterInputs].forEach(element => {
        element.addEventListener('change', function() {
            // Small delay to allow for multiple rapid changes
            clearTimeout(window.filterTimeout);
            window.filterTimeout = setTimeout(() => {
                document.getElementById('filterForm').submit();
            }, 500);
        });
    });
    
    // Search input with debounce
    const searchInput = document.querySelector('input[name="search"]');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            clearTimeout(window.searchTimeout);
            window.searchTimeout = setTimeout(() => {
                document.getElementById('filterForm').submit();
            }, 1000); // 1 second delay for search
        });
    }
});

// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
    // Ctrl/Cmd + K to focus search
    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        document.querySelector('input[name="search"]').focus();
    }
    
    // Escape to clear search
    if (e.key === 'Escape') {
        const searchInput = document.querySelector('input[name="search"]');
        if (searchInput === document.activeElement) {
            searchInput.value = '';
            document.getElementById('filterForm').submit();
        }
    }
});

// Initialize tooltips if Bootstrap is available
document.addEventListener('DOMContentLoaded', function() {
    if (typeof bootstrap !== 'undefined') {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[title]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});
</script>
@endsection