@extends('layouts.admin')

@section('title', 'Event Profit & Loss Reports')

@section('styles')
<link href="{{ asset('css/profit-loss.css') }}" rel="stylesheet">
<style>
/* PROFIT LOSS STYLES - Based on client styles */
.profit-loss-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;
}

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

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

.profit-loss-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: 120px;
}

.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;
}

.profit-positive {
    color: #1cc88a !important;
    font-weight: 600;
}

.profit-negative {
    color: #e74a3b !important;
    font-weight: 600;
}

.profit-zero {
    color: #f6c23e !important;
    font-weight: 600;
}

.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;
}

.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;
}

.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);
}

.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;
}

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

.event-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;
}

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

.event-venue {
    font-size: 12px;
    color: #858796;
}

/* Small badge styles for Margin and Status columns */
.small-badge {
    font-size: 11px !important;
    font-weight: 600;
    padding: 4px 8px !important;
    line-height: 1.2;
    border-radius: 4px;
}

.small-icon {
    font-size: 9px !important;
    margin-right: 3px !important;
}

.small-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
}
</style>
@endsection

@section('content')
<div class="container-fluid">
    <!-- Profit Loss Header -->
    <div class="profit-loss-header">
        <div class="d-flex justify-content-between align-items-start">
            <div>
                <h1><i class="fas fa-chart-line"></i> Event Profit & Loss Reports</h1>
                <div class="profit-loss-stats">
                    <div class="stat-item">
                        <span class="stat-number">{{ number_format($totalEvents) }}</span>
                        <span class="stat-label">Total Events</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">KSh {{ number_format($totalIncome, 0) }}</span>
                        <span class="stat-label">Total Income</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">KSh {{ number_format($totalExpenses, 0) }}</span>
                        <span class="stat-label">Total Expenses</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">KSh {{ number_format($totalProfit, 0) }}</span>
                        <span class="stat-label">Net Profit</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ $statistics['profitable'] }}</span>
                        <span class="stat-label">Profitable</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">{{ $statistics['loss_making'] }}</span>
                        <span class="stat-label">Loss Making</span>
                    </div>
                </div>
            </div>
            <div>
                <button class="btn btn-light" onclick="exportData()">
                    <i class="fas fa-download"></i> Export Report
                </button>
            </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

    <!-- 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('events.profit-loss.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 by event name, venue, manager, client name, event ID..." 
                           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 (Event 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>Event Status</label>
                        <select name="status" class="form-select">
                            <option value="all">All Statuses</option>
                            @foreach($statuses as $value => $label)
                                <option value="{{ $value }}" {{ request('status') == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Profitability</label>
                        <select name="profitability" class="form-select">
                            @foreach($profitabilityOptions as $value => $label)
                                <option value="{{ $value }}" {{ request('profitability') == $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 Type</label>
                        <select name="type" class="form-select">
                            <option value="all">All Types</option>
                            @foreach($eventTypes as $type)
                                <option value="{{ $type }}" {{ request('type') == $type ? 'selected' : '' }}>
                                    {{ $type }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <!-- Filter Row 2 -->
                <div class="filter-row">
                    <div class="filter-group" id="dateFromGroup">
                        <label>Event Date From</label>
                        <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}" {{ request('quick_date') ? 'disabled' : '' }}>
                    </div>
                    
                    <div class="filter-group" id="dateToGroup">
                        <label>Event Date To</label>
                        <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}" {{ request('quick_date') ? 'disabled' : '' }}>
                    </div>
                    
                    <div class="filter-group">
                        <label>Min Income (KSh)</label>
                        <input type="number" name="income_min" class="form-control" value="{{ request('income_min') }}" placeholder="0">
                    </div>
                    
                    <div class="filter-group">
                        <label>Max Income (KSh)</label>
                        <input type="number" name="income_max" class="form-control" value="{{ request('income_max') }}" placeholder="1000000">
                    </div>
                </div>

                <!-- Filter Row 3 -->
                <div class="filter-row">
                    <div class="filter-group">
                        <label>Sort By</label>
                        <select name="sort_by" class="form-select">
                            <option value="date" {{ request('sort_by', 'date') == 'date' ? 'selected' : '' }}>Event Date</option>
                            <option value="name" {{ request('sort_by') == 'name' ? 'selected' : '' }}>Event Name</option>
                            <option value="income" {{ request('sort_by') == 'income' ? 'selected' : '' }}>Income</option>
                            <option value="expenses" {{ request('sort_by') == 'expenses' ? 'selected' : '' }}>Expenses</option>
                            <option value="profit" {{ request('sort_by') == 'profit' ? 'selected' : '' }}>Profit/Loss</option>
                            <option value="venue" {{ request('sort_by') == 'venue' ? 'selected' : '' }}>Venue</option>
                            <option value="status" {{ request('sort_by') == 'status' ? 'selected' : '' }}>Status</option>
                            <option value="created_at" {{ request('sort_by') == 'created_at' ? 'selected' : '' }}>Created Date</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Sort Order</label>
                        <select name="sort_direction" class="form-select">
                            <option value="desc" {{ request('sort_direction', 'desc') == 'desc' ? 'selected' : '' }}>Descending</option>
                            <option value="asc" {{ request('sort_direction') == 'asc' ? 'selected' : '' }}>Ascending</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Results Per Page</label>
                        <select name="per_page" class="form-select">
                            <option value="10" {{ request('per_page', 15) == 10 ? 'selected' : '' }}>10 per page</option>
                            <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15 per page</option>
                            <option value="25" {{ request('per_page', 15) == 25 ? 'selected' : '' }}>25 per page</option>
                            <option value="50" {{ request('per_page', 15) == 50 ? 'selected' : '' }}>50 per page</option>
                            <option value="100" {{ request('per_page', 15) == 100 ? 'selected' : '' }}>100 per page</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label>&nbsp;</label>
                        <button type="button" class="btn btn-warning form-control" onclick="resetAllFilters()">
                            <i class="fas fa-undo"></i> Reset All
                        </button>
                    </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('events.profit-loss.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>

    <!-- Enhanced Financial Performance Table -->
    <div class="table-container">
        <div class="table-header">
            <h3 class="table-title">
                <i class="fas fa-chart-line"></i>Event Financial Performance
            </h3>
            <div class="table-actions">
                <button class="btn btn-light btn-sm" onclick="toggleFullscreen()">
                    <i class="fas fa-expand"></i> Fullscreen
                </button>
                <button class="btn btn-light btn-sm" onclick="exportData()">
                    <i class="fas fa-download"></i> Export
                </button>
            </div>
        </div>
        
        <div class="table-responsive" id="financial-table-container">
            <table class="modern-table" id="financial-performance-table">
                <thead>
                    <tr>
                        <th class="sort-header" data-sort="name" style="min-width: 220px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-calendar-alt me-2"></i>Event Details
                                <span class="sort-indicator">
                                    @if(request('sort_by', 'date') == 'name')
                                        <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'desc' ? 'down' : 'up' }}"></i>
                                    @else
                                        <i class="fas fa-sort"></i>
                                    @endif
                                </span>
                            </div>
                        </th>
                        <th class="sort-header" data-sort="date" style="min-width: 120px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-clock me-2"></i>Date
                                <span class="sort-indicator">
                                    @if(request('sort_by', 'date') == 'date')
                                        <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'desc' ? 'down' : 'up' }}"></i>
                                    @else
                                        <i class="fas fa-sort"></i>
                                    @endif
                                </span>
                            </div>
                        </th>
                        <th style="min-width: 160px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-user me-2"></i>Client
                            </div>
                        </th>
                        <th class="sort-header" data-sort="income" style="min-width: 130px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-arrow-up text-success me-2"></i>Income
                                <span class="sort-indicator">
                                    @if(request('sort_by') == 'income')
                                        <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'desc' ? 'down' : 'up' }}"></i>
                                    @else
                                        <i class="fas fa-sort"></i>
                                    @endif
                                </span>
                            </div>
                        </th>
                        <th class="sort-header" data-sort="expenses" style="min-width: 130px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-arrow-down text-danger me-2"></i>Expenses
                                <span class="sort-indicator">
                                    @if(request('sort_by') == 'expenses')
                                        <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'desc' ? 'down' : 'up' }}"></i>
                                    @else
                                        <i class="fas fa-sort"></i>
                                    @endif
                                </span>
                            </div>
                        </th>
                        <th class="sort-header" data-sort="profit" style="min-width: 140px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-chart-line me-2"></i>Profit/Loss
                                <span class="sort-indicator">
                                    @if(request('sort_by') == 'profit')
                                        <i class="fas fa-sort-{{ request('sort_direction', 'desc') == 'desc' ? 'down' : 'up' }}"></i>
                                    @else
                                        <i class="fas fa-sort"></i>
                                    @endif
                                </span>
                            </div>
                        </th>
                        <th style="min-width: 90px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-percentage me-2"></i>Margin
                            </div>
                        </th>
                        <th style="min-width: 120px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-flag me-2"></i>Status
                            </div>
                        </th>
                        <th style="min-width: 100px;">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-cogs me-2"></i>Actions
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($events as $event)
                        <tr>
                            <!-- Event Details -->
                            <td>
                                <div class="event-info">
                                    <div class="event-avatar">
                                        {{ substr($event->name, 0, 1) }}
                                    </div>
                                    <div>
                                        <div class="event-name">
                                            {{ Str::limit($event->name, 28) }}
                                        </div>
                                        <div class="event-venue">
                                            <i class="fas fa-map-marker-alt me-1"></i>{{ Str::limit($event->venue ?? 'No Venue', 22) }}
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <!-- Event Date -->
                            <td>
                                <div class="text-center">
                                    <div class="fw-bold text-dark">
                                        {{ $event->date ? $event->date->format('M d') : 'N/A' }}
                                    </div>
                                    <div class="text-muted small">
                                        {{ $event->date ? $event->date->format('Y') : '' }}
                                    </div>
                                </div>
                            </td>

                            <!-- Client -->
                            <td>
                                <div class="fw-medium text-dark">
                                    {{ $event->client ? Str::limit($event->client->name, 22) : 'No Client Assigned' }}
                                </div>
                                @if($event->client && $event->client->email)
                                    <div class="text-muted small">
                                        <i class="fas fa-envelope me-1"></i>{{ Str::limit($event->client->email, 20) }}
                                    </div>
                                @endif
                            </td>

                            <!-- Income -->
                            <td>
                                <div class="fw-bold text-success fs-6">
                                    KSh {{ number_format($event->income, 0) }}
                                </div>
                                @if($event->income > 0)
                                    <div class="text-muted small">
                                        <i class="fas fa-file-invoice me-1"></i>From Invoices
                                    </div>
                                @endif
                            </td>

                            <!-- Expenses -->
                            <td>
                                <div class="fw-bold text-danger fs-6">
                                    KSh {{ number_format($event->total_expenses, 0) }}
                                </div>
                                @if($event->total_expenses > 0)
                                    <div class="text-muted small">
                                        <i class="fas fa-receipt me-1"></i>Event Costs
                                    </div>
                                @endif
                            </td>

                            <!-- Profit/Loss -->
                            <td>
                                <div class="fw-bold fs-6 {{ $event->profit > 0 ? 'profit-positive' : ($event->profit < 0 ? 'profit-negative' : 'profit-zero') }}">
                                    KSh {{ number_format($event->profit, 0) }}
                                </div>
                                <div class="text-muted small">
                                    @if($event->profit > 0)
                                        <i class="fas fa-trending-up me-1"></i>Profitable
                                    @elseif($event->profit < 0)
                                        <i class="fas fa-trending-down me-1"></i>Loss Making
                                    @else
                                        <i class="fas fa-minus me-1"></i>Break Even
                                    @endif
                                </div>
                            </td>

                            <!-- Margin % -->
                            <td>
                                <div class="text-center">
                                    <span class="badge small-badge px-2 py-1 {{ $event->profit_margin > 20 ? 'bg-success' : ($event->profit_margin > 0 ? 'bg-warning text-dark' : 'bg-danger') }}">
                                        {{ number_format($event->profit_margin, 1) }}%
                                    </span>
                                </div>
                            </td>

                            <!-- Status -->
                            <td>
                                <div class="text-center">
                                    @if($event->profit > 0)
                                        <span class="badge bg-success small-badge px-2 py-1">
                                            <i class="fas fa-arrow-up small-icon me-1"></i><span class="small-text">Profitable</span>
                                        </span>
                                    @elseif($event->profit < 0)
                                        <span class="badge bg-danger small-badge px-2 py-1">
                                            <i class="fas fa-arrow-down small-icon me-1"></i><span class="small-text">Loss</span>
                                        </span>
                                    @else
                                        <span class="badge bg-warning text-dark small-badge px-2 py-1">
                                            <i class="fas fa-minus small-icon me-1"></i><span class="small-text">Break Even</span>
                                        </span>
                                    @endif
                                </div>
                            </td>

                            <!-- Actions -->
                            <td>
                                <div class="action-buttons">
                                    <a href="{{ route('events.profit-loss.show', $event) }}" 
                                       class="btn-action btn-view" 
                                       title="View Financial Report"
                                       data-bs-toggle="tooltip">
                                        <i class="fas fa-chart-bar"></i>
                                    </a>
                                    <a href="{{ route('events.show', $event) }}" 
                                       class="btn-action btn-edit" 
                                       title="View Event Details"
                                       data-bs-toggle="tooltip">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="empty-state">
                                    <i class="fas fa-chart-line"></i>
                                    <h3>No Financial Data Available</h3>
                                    <p>No events match your current filters or no financial data is available.</p>
                                    <a href="{{ route('events.create') }}" class="btn btn-primary">
                                        <i class="fas fa-plus me-2"></i>Create New Event
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        
        <!-- Enhanced Pagination -->
        <div class="pagination-container">
            <div class="pagination-info">
                <span class="info-badge">{{ $events->total() }}</span>
                Showing {{ $events->firstItem() ?? 0 }} to {{ $events->lastItem() ?? 0 }} of {{ $events->total() }} results
            </div>
            
            <div class="pagination-controls">
                <div class="per-page-selector">
                    <label>Show:</label>
                    <select name="per_page" onchange="changePerPage(this.value)">
                        <option value="10" {{ request('per_page', 15) == 10 ? 'selected' : '' }}>10</option>
                        <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15</option>
                        <option value="25" {{ request('per_page', 15) == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('per_page', 15) == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ request('per_page', 15) == 100 ? 'selected' : '' }}>100</option>
                    </select>
                </div>

                <div class="modern-pagination">
                    {{ $events->appends(request()->query())->onEachSide(2)->links('custom.pagination') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Quick date filter functions
function setQuickDate(value) {
    document.querySelector('input[name="quick_date"]').value = value;
    
    // Disable date range inputs when quick date is selected
    const dateFromInput = document.querySelector('input[name="date_from"]');
    const dateToInput = document.querySelector('input[name="date_to"]');
    
    if (dateFromInput) dateFromInput.disabled = true;
    if (dateToInput) dateToInput.disabled = true;
    
    // Clear date range values
    if (dateFromInput) dateFromInput.value = '';
    if (dateToInput) dateToInput.value = '';
    
    document.getElementById('filterForm').submit();
}

function clearQuickDate() {
    document.querySelector('input[name="quick_date"]').value = '';
    
    // Re-enable date range inputs
    const dateFromInput = document.querySelector('input[name="date_from"]');
    const dateToInput = document.querySelector('input[name="date_to"]');
    
    if (dateFromInput) dateFromInput.disabled = false;
    if (dateToInput) dateToInput.disabled = false;
    
    document.getElementById('filterForm').submit();
}

// Reset all filters
function resetAllFilters() {
    if (confirm('Are you sure you want to reset all filters?')) {
        window.location.href = '{{ route("events.profit-loss.index") }}';
    }
}

// Sort functionality
document.querySelectorAll('.sort-header').forEach(header => {
    header.addEventListener('click', function() {
        const sortBy = this.dataset.sort;
        const currentSort = new URLSearchParams(window.location.search).get('sort_by');
        const currentDirection = new URLSearchParams(window.location.search).get('sort_direction') || 'desc';
        
        let newDirection = 'desc';
        if (currentSort === sortBy && currentDirection === 'desc') {
            newDirection = 'asc';
        }
        
        const url = new URL(window.location);
        url.searchParams.set('sort_by', sortBy);
        url.searchParams.set('sort_direction', newDirection);
        
        window.location.href = url.toString();
    });
});

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

// Export functionality
function exportData() {
    const searchParams = new URLSearchParams(window.location.search);
    searchParams.set('export', '1');
    
    // Create a temporary link and trigger download
    const downloadUrl = `${window.location.pathname}?${searchParams.toString()}`;
    
    // For now, just show an alert - you can implement actual export functionality
    alert('Export functionality will be implemented. Current filters will be applied to the export.');
}

// Enhanced real-time search (debounced)
let searchTimeout;
const searchInput = document.querySelector('input[name="search"]');

if (searchInput) {
    searchInput.addEventListener('input', function() {
        clearTimeout(searchTimeout);
        
        // Show loading indicator
        const searchIcon = document.querySelector('.search-icon');
        searchIcon.classList.remove('fa-search');
        searchIcon.classList.add('fa-spinner', 'fa-spin');
        
        searchTimeout = setTimeout(() => {
            // Auto-submit after 500ms of no typing for searches 3+ chars or empty
            if (this.value.length >= 2 || this.value.length === 0) {
                document.getElementById('filterForm').submit();
            } else {
                // Reset search icon
                searchIcon.classList.remove('fa-spinner', 'fa-spin');
                searchIcon.classList.add('fa-search');
            }
        }, 500);
    });
    
    // Reset search icon on form submit
    document.getElementById('filterForm').addEventListener('submit', function() {
        const searchIcon = document.querySelector('.search-icon');
        searchIcon.classList.remove('fa-spinner', 'fa-spin');
        searchIcon.classList.add('fa-search');
    });
}

// Enhanced filter functionality with auto-submit
const autoSubmitFilters = document.querySelectorAll('select[name="status"], select[name="profitability"], select[name="client_id"], select[name="type"]');

autoSubmitFilters.forEach(select => {
    select.addEventListener('change', function() {
        // Add loading state
        this.style.opacity = '0.6';
        document.getElementById('filterForm').submit();
    });
});

// Date range validation and auto-submit
const dateFromInput = document.querySelector('input[name="date_from"]');
const dateToInput = document.querySelector('input[name="date_to"]');

if (dateFromInput && dateToInput) {
    dateFromInput.addEventListener('change', function() {
        if (dateToInput.value && this.value > dateToInput.value) {
            alert('Start date cannot be after end date');
            this.value = '';
            return;
        }
        
        // Auto-submit when date changes
        if (this.value) {
            document.getElementById('filterForm').submit();
        }
    });

    dateToInput.addEventListener('change', function() {
        if (dateFromInput.value && this.value < dateFromInput.value) {
            alert('End date cannot be before start date');
            this.value = '';
            return;
        }
        
        // Auto-submit when date changes
        if (this.value) {
            document.getElementById('filterForm').submit();
        }
    });
}

// Initialize statistics animation
document.addEventListener('DOMContentLoaded', function() {
    const statNumbers = document.querySelectorAll('.stat-number');
    statNumbers.forEach(stat => {
        const text = stat.textContent;
        // Extract number from text (remove KSh, commas, etc.)
        const numberMatch = text.match(/[\d,]+/);
        if (numberMatch) {
            const finalValue = parseInt(numberMatch[0].replace(/,/g, ''));
            if (!isNaN(finalValue) && finalValue > 0) {
                let currentValue = 0;
                const increment = Math.ceil(finalValue / 30);
                
                const timer = setInterval(() => {
                    currentValue += increment;
                    if (currentValue >= finalValue) {
                        currentValue = finalValue;
                        clearInterval(timer);
                    }
                    
                    // Update the text while preserving format
                    const formattedValue = currentValue.toLocaleString();
                    if (text.includes('KSh')) {
                        stat.textContent = 'KSh ' + formattedValue;
                    } else {
                        stat.textContent = formattedValue;
                    }
                }, 50);
            }
        }
    });
});

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

// Toggle fullscreen functionality
function toggleFullscreen() {
    const container = document.getElementById('financial-table-container');
    const table = document.getElementById('financial-performance-table');
    
    if (!document.fullscreenElement) {
        // Enter fullscreen
        if (container.requestFullscreen) {
            container.requestFullscreen();
        } else if (container.webkitRequestFullscreen) {
            container.webkitRequestFullscreen();
        } else if (container.msRequestFullscreen) {
            container.msRequestFullscreen();
        }
        
        // Add fullscreen styles
        container.style.position = 'fixed';
        container.style.top = '0';
        container.style.left = '0';
        container.style.width = '100vw';
        container.style.height = '100vh';
        container.style.zIndex = '9999';
        container.style.backgroundColor = 'white';
        container.style.overflow = 'auto';
        container.style.padding = '20px';
        
        // Update button text
        const btn = event.target.closest('button');
        btn.innerHTML = '<i class="fas fa-compress"></i> Exit Fullscreen';
        
    } else {
        // Exit fullscreen
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        
        // Remove fullscreen styles
        container.style.position = '';
        container.style.top = '';
        container.style.left = '';
        container.style.width = '';
        container.style.height = '';
        container.style.zIndex = '';
        container.style.backgroundColor = '';
        container.style.overflow = '';
        container.style.padding = '';
        
        // Update button text
        const btn = event.target.closest('button');
        btn.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
    }
}

// Listen for fullscreen changes
document.addEventListener('fullscreenchange', function() {
    const container = document.getElementById('financial-table-container');
    const btn = document.querySelector('button[onclick="toggleFullscreen()"]');
    
    if (!document.fullscreenElement) {
        // Reset styles when exiting fullscreen via ESC key
        container.style.position = '';
        container.style.top = '';
        container.style.left = '';
        container.style.width = '';
        container.style.height = '';
        container.style.zIndex = '';
        container.style.backgroundColor = '';
        container.style.overflow = '';
        container.style.padding = '';
        
        if (btn) {
            btn.innerHTML = '<i class="fas fa-expand"></i> Fullscreen';
        }
    }
});

// Enhanced tooltips initialization
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Bootstrap tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Add smooth scrolling for better UX
    document.documentElement.style.scrollBehavior = 'smooth';
    
    // Add loading animation for action buttons
    document.querySelectorAll('.btn-action').forEach(btn => {
        btn.addEventListener('click', function(e) {
            // Add loading state
            const icon = this.querySelector('i');
            const originalClass = icon.className;
            icon.className = 'fas fa-spinner fa-spin';
            
            // Reset after a short delay (in case navigation is slow)
            setTimeout(() => {
                icon.className = originalClass;
            }, 3000);
        });
    });
});

// Add dynamic row highlighting for better UX
document.addEventListener('DOMContentLoaded', function() {
    const tableRows = document.querySelectorAll('.modern-table tbody tr');
    
    tableRows.forEach(row => {
        row.addEventListener('mouseenter', function() {
            // Highlight profit/loss status
            const profitCell = this.querySelector('td:nth-child(6)'); // Profit/Loss column
            if (profitCell) {
                const value = profitCell.textContent.trim();
                if (value.includes('-') || value === 'KSh 0') {
                    this.style.borderLeft = '4px solid #e74a3b';
                } else {
                    this.style.borderLeft = '4px solid #1cc88a';
                }
            }
        });
        
        row.addEventListener('mouseleave', function() {
            this.style.borderLeft = '';
        });
    });
});

// Real-time table updates (optional enhancement)
function refreshTableData() {
    // This could be used for live updates if needed
    console.log('Refreshing table data...');
    // Implement AJAX refresh if required
}

// Print functionality
function printTable() {
    const printWindow = window.open('', '_blank');
    const tableHTML = document.getElementById('financial-performance-table').outerHTML;
    
    printWindow.document.write(`
        <html>
        <head>
            <title>Event Financial Performance Report</title>
            <style>
                body { font-family: Arial, sans-serif; margin: 20px; }
                table { width: 100%; border-collapse: collapse; }
                th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                th { background-color: #f2f2f2; }
                .profit-positive { color: #1cc88a; font-weight: bold; }
                .profit-negative { color: #e74a3b; font-weight: bold; }
                .profit-zero { color: #f6c23e; font-weight: bold; }
                @media print {
                    button { display: none; }
                }
            </style>
        </head>
        <body>
            <h1>Event Financial Performance Report</h1>
            <p>Generated on: ${new Date().toLocaleDateString()}</p>
            ${tableHTML}
        </body>
        </html>
    `);
    
    printWindow.document.close();
    printWindow.print();
}
</script>
@endsection