@extends('layouts.app')
@section('title', __('dashboard.stats_transactions_title'))
@section('page_heading', __('dashboard.stats_transactions_title'))

@section('styles')
<style>
.tx-page { display: grid; gap: 1.25rem; }
.tx-filter,
.tx-card,
.tx-kpi {
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
.tx-filter { border-radius: var(--radius-xl); padding: 1rem; }
.tx-filter__form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .75rem; align-items: end; }
.tx-filter__group { display: flex; flex-direction: column; gap: .28rem; grid-column: span 2; min-width: 0; }
.tx-filter__group--wide { grid-column: span 3; }
.tx-filter__actions { grid-column: span 3; display: flex; align-items: end; gap: .45rem; flex-wrap: wrap; }
.tx-label { font-size: .7rem; font-weight: 800; color: var(--text-muted); }
.tx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.tx-kpi { border-radius: 18px; padding: 1rem; display: flex; gap: .85rem; align-items: center; min-width: 0; }
.tx-kpi__icon { width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--tx-bg); color: var(--tx-color); }
.tx-kpi__value { font-size: 1.2rem; font-weight: 900; color: var(--text-primary); line-height: 1.1; overflow-wrap: anywhere; }
.tx-kpi__label { margin-top: .15rem; font-size: .74rem; font-weight: 800; color: var(--text-secondary); }
.tx-kpi__meta { margin-top: .1rem; font-size: .68rem; font-weight: 700; color: var(--text-muted); }
.tx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.tx-card { border-radius: var(--radius-xl); overflow: hidden; }
.tx-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.15rem; border-bottom: 1px solid var(--border-subtle); background: linear-gradient(180deg, var(--surface-50), var(--bg-card)); }
.tx-card__title { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-primary); font-size: .88rem; font-weight: 900; }
.tx-card__title i { color: var(--c-primary); }
.tx-card__badge,
.tx-pill { display: inline-flex; align-items: center; border-radius: 999px; background: var(--c-primary-bg); color: var(--c-primary); font-size: .7rem; font-weight: 800; white-space: nowrap; }
.tx-card__badge { padding: .15rem .55rem; }
.tx-card__total { color: #16a34a; font-size: .86rem; font-weight: 900; white-space: nowrap; }
.tx-list-row { padding: .8rem 1.15rem; border-bottom: 1px solid var(--border-subtle); }
.tx-list-row:last-child { border-bottom: 0; }
.tx-pay-head,
.tx-quick-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tx-pay-method,
.tx-quick-value { color: var(--text-primary); font-size: .84rem; font-weight: 900; }
.tx-pay-amount { color: var(--c-primary); font-size: .84rem; font-weight: 900; }
.tx-quick-label { color: var(--text-secondary); font-size: .84rem; font-weight: 800; }
.tx-pay-bar { height: 6px; border-radius: 999px; overflow: hidden; background: var(--border-subtle); margin-top: .45rem; }
.tx-pay-bar__fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--c-primary), #38bdf8); }
.tx-table-wrap { overflow-x: auto; }
.tx-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.tx-table thead tr { background: var(--surface-50); }
.tx-table th { padding: .68rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: .68rem; font-weight: 900; letter-spacing: .04em; text-align: start; text-transform: uppercase; white-space: nowrap; }
.tx-table td { padding: .75rem 1rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; white-space: nowrap; }
.tx-table tbody tr:last-child td { border-bottom: 0; }
.tx-table tbody tr:hover { background: var(--surface-50); }
.tx-link { color: var(--c-primary); font-weight: 900; text-decoration: none; }
.tx-link:hover { text-decoration: underline; }
.tx-amount { color: var(--text-primary); font-weight: 900; }
.tx-muted { color: var(--text-muted); font-size: .78rem; }
.tx-pill { padding: .22rem .6rem; }
.tx-empty { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); font-size: .85rem; font-weight: 800; }
.dark .tx-card__head { background: var(--bg-card); }
@media (max-width: 1100px) {
    .tx-filter__group,
    .tx-filter__group--wide,
    .tx-filter__actions { grid-column: span 6; }
    .tx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .tx-filter__form,
    .tx-kpis,
    .tx-grid { grid-template-columns: 1fr; }
    .tx-filter__group,
    .tx-filter__group--wide,
    .tx-filter__actions { grid-column: auto; }
    .tx-filter__actions .app-btn { flex: 1 1 auto; justify-content: center; }
}
</style>
@endsection

@section('content')
@include('dashboard.statistics.partials.nav')

@php
    $salesCollection = collect($sales);
    $depositsCollection = collect($reservationsDeposits);
    $finalPaymentsCollection = collect($reservationsFinalPayments);

    $salesTotal = $salesCollection->sum('final_total');
    $depositsTotal = $depositsCollection->sum('deposit');
    $finalPaymentsTotal = $finalPaymentsCollection->sum(fn ($reservation) => $reservation->price - $reservation->deposit);
    $treasuryTotal = $salesTotal + $depositsTotal + $finalPaymentsTotal;
    $operationsCount = $salesCollection->count() + $depositsCollection->count() + $finalPaymentsCollection->count();

    $paymentSummary = [];
    foreach ($salesCollection as $sale) {
        $method = __('dashboard.' . ($sale->payment_method ?: 'none'));
        $paymentSummary[$method] = ($paymentSummary[$method] ?? 0) + $sale->final_total;
    }
    foreach ($depositsCollection as $reservation) {
        $method = __('dashboard.' . ($reservation->payment_method ?: 'none'));
        $paymentSummary[$method] = ($paymentSummary[$method] ?? 0) + $reservation->deposit;
    }
    foreach ($finalPaymentsCollection as $reservation) {
        $method = __('dashboard.' . ($reservation->final_payment_method ?: 'none'));
        $paymentSummary[$method] = ($paymentSummary[$method] ?? 0) + ($reservation->price - $reservation->deposit);
    }
    arsort($paymentSummary);
    $maxPayment = $paymentSummary ? max(array_values($paymentSummary)) : 1;

    $dateValue = request()->filled('start_date') || request()->filled('end_date')
        ? request('date')
        : request('date', $startDate->format('Y-m-d'));

    $selectedAdmin = $admins->firstWhere('id', $adminId);
    $periodLabel = $startDate->format('Y-m-d') . ' - ' . $endDate->format('Y-m-d');
@endphp

<div class="tx-page">
    <section class="tx-filter">
        <form class="tx-filter__form" action="{{ route('dashboard.statistics.transactions') }}" method="GET" autocomplete="off">
            <label class="tx-filter__group">
                <span class="tx-label">{{ __('dashboard.Date') }}</span>
                <input type="date" name="date" id="tx_date" value="{{ $dateValue }}" class="app-input app-input--sm">
            </label>
            <label class="tx-filter__group" id="tx_start_wrap">
                <span class="tx-label">{{ __('dashboard.Start Date') }}</span>
                <input type="date" name="start_date" value="{{ request('start_date') }}" class="app-input app-input--sm">
            </label>
            <label class="tx-filter__group" id="tx_end_wrap">
                <span class="tx-label">{{ __('dashboard.End Date') }}</span>
                <input type="date" name="end_date" value="{{ request('end_date') }}" class="app-input app-input--sm">
            </label>
            <label class="tx-filter__group">
                <span class="tx-label">{{ __('dashboard.Type') }}</span>
                <select name="transaction_type" class="app-input app-input--sm app-select">
                    <option value="all" @selected($transactionType === 'all')>{{ __('dashboard.All') }}</option>
                    <option value="sales" @selected($transactionType === 'sales')>{{ __('dashboard.Sales') }}</option>
                    <option value="reservations" @selected($transactionType === 'reservations')>{{ __('dashboard.Reservations') }}</option>
                </select>
            </label>
            <label class="tx-filter__group tx-filter__group--wide">
                <span class="tx-label">{{ __('dashboard.All Moderators') }}</span>
                <select name="admin_id" class="app-input app-input--sm app-select">
                    <option value="">{{ __('dashboard.All Moderators') }}</option>
                    @foreach($admins as $admin)
                        <option value="{{ $admin->id }}" @selected((string) $adminId === (string) $admin->id)>{{ $admin->name }}</option>
                    @endforeach
                </select>
            </label>
            <div class="tx-filter__actions">
                <button type="submit" class="app-btn app-btn--primary app-btn--sm">
                    <i class="fa-solid fa-filter"></i>
                    {{ __('dashboard.filter') }}
                </button>
                <a href="{{ route('dashboard.statistics.transactions') }}" class="app-btn app-btn--secondary app-btn--sm" title="{{ __('dashboard.Reset') }}">
                    <i class="fa-solid fa-xmark"></i>
                </a>
                <a href="{{ route('dashboard.statistics.transactions.export', request()->all()) }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-file-csv"></i>
                    CSV
                </a>
                <a href="{{ route('dashboard.statistics.transactions.export', array_merge(request()->all(), ['format' => 'xls'])) }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-file-excel"></i>
                    Excel
                </a>
            </div>
        </form>
    </section>

    <section class="tx-kpis">
        @foreach([
            ['fa-solid fa-vault', '#eff6ff', '#2563eb', number_format($treasuryTotal, 2), 'إجمالي الخزينة', $periodLabel],
            ['fa-solid fa-cart-shopping', '#f0fdf4', '#16a34a', number_format($salesTotal, 2), 'تحصيلات المبيعات', $salesCollection->count() . ' عملية'],
            ['fa-solid fa-coins', '#fffbeb', '#d97706', number_format($depositsTotal + $finalPaymentsTotal, 2), 'تحصيلات الحجوزات', ($depositsCollection->count() + $finalPaymentsCollection->count()) . ' عملية'],
            ['fa-solid fa-receipt', '#faf5ff', '#7c3aed', number_format($operationsCount), 'عدد العمليات', 'مبيعات + حجوزات'],
        ] as [$icon, $bg, $color, $value, $label, $meta])
            <article class="tx-kpi" style="--tx-bg: {{ $bg }}; --tx-color: {{ $color }}">
                <span class="tx-kpi__icon"><i class="{{ $icon }}"></i></span>
                <div>
                    <div class="tx-kpi__value">{{ $value }}</div>
                    <div class="tx-kpi__label">{{ $label }}</div>
                    <div class="tx-kpi__meta">{{ $meta }}</div>
                </div>
            </article>
        @endforeach
    </section>

    <section class="tx-grid">
        <article class="tx-card">
            <div class="tx-card__head">
                <h3 class="tx-card__title"><i class="fa-solid fa-chart-pie"></i>ملخص طرق الدفع</h3>
            </div>
            @forelse($paymentSummary as $method => $amount)
                <div class="tx-list-row">
                    <div class="tx-pay-head">
                        <span class="tx-pay-method">{{ $method }}</span>
                        <span class="tx-pay-amount">{{ number_format($amount, 2) }}</span>
                    </div>
                    <div class="tx-pay-bar">
                        <div class="tx-pay-bar__fill" style="width: {{ $maxPayment > 0 ? min($amount / $maxPayment * 100, 100) : 0 }}%"></div>
                    </div>
                </div>
            @empty
                <div class="tx-empty">لا توجد بيانات</div>
            @endforelse
        </article>

        <article class="tx-card">
            <div class="tx-card__head">
                <h3 class="tx-card__title"><i class="fa-solid fa-list-check"></i>قراءة سريعة</h3>
            </div>
            @foreach([
                ['عمليات البيع', $salesCollection->count() . ' عملية'],
                ['عربون الحجوزات', number_format($depositsTotal, 2)],
                ['الدفعات النهائية للحجوزات', number_format($finalPaymentsTotal, 2)],
                ['المستخدم المحدد', $selectedAdmin?->name ?? 'كل المستخدمين'],
            ] as [$label, $value])
                <div class="tx-list-row tx-quick-row">
                    <span class="tx-quick-label">{{ $label }}</span>
                    <span class="tx-quick-value">{{ $value }}</span>
                </div>
            @endforeach
        </article>
    </section>

    @if($transactionType === 'all' || $transactionType === 'sales')
        <article class="tx-card">
            <div class="tx-card__head">
                <h3 class="tx-card__title">
                    <i class="fa-solid fa-cart-shopping"></i>
                    عمليات البيع
                    <span class="tx-card__badge">{{ $salesCollection->count() }}</span>
                </h3>
                <span class="tx-card__total">{{ number_format($salesTotal, 2) }}</span>
            </div>
            @if($salesCollection->isEmpty())
                <div class="tx-empty">لا توجد بيانات مبيعات</div>
            @else
                <div class="tx-table-wrap">
                    <table class="tx-table">
                        <thead>
                            <tr>
                                <th>{{ __('dashboard.Date') }}</th>
                                <th>{{ __('dashboard.Sale ID') }}</th>
                                <th>{{ __('dashboard.Total') }}</th>
                                <th>{{ __('dashboard.Payment Method') }}</th>
                                <th>{{ __('dashboard.Reference') }}</th>
                                <th>{{ __('dashboard.Created By') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($salesCollection as $sale)
                                <tr>
                                    <td class="tx-muted">{{ $sale->created_at->format('Y-m-d') }}</td>
                                    <td><a href="{{ route('dashboard.sales.show', $sale->id) }}" class="tx-link">#{{ $sale->id }}</a></td>
                                    <td class="tx-amount">{{ number_format($sale->final_total, 2) }}</td>
                                    <td><span class="tx-pill">{{ __('dashboard.' . ($sale->payment_method ?: 'none')) }}</span></td>
                                    <td class="tx-muted">{{ $sale->payment_reference ?? '-' }}</td>
                                    <td>{{ $sale->creator?->name ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </article>
    @endif

    @if($transactionType === 'all' || $transactionType === 'reservations')
        <article class="tx-card">
            <div class="tx-card__head">
                <h3 class="tx-card__title">
                    <i class="fa-solid fa-hand-holding-dollar"></i>
                    عربون الحجوزات
                    <span class="tx-card__badge">{{ $depositsCollection->count() }}</span>
                </h3>
                <span class="tx-card__total">{{ number_format($depositsTotal, 2) }}</span>
            </div>
            @if($depositsCollection->isEmpty())
                <div class="tx-empty">لا توجد بيانات عربون</div>
            @else
                <div class="tx-table-wrap">
                    <table class="tx-table">
                        <thead>
                            <tr>
                                <th>{{ __('dashboard.Date') }}</th>
                                <th>{{ __('dashboard.Reservation ID') }}</th>
                                <th>{{ __('dashboard.Deposit') }}</th>
                                <th>{{ __('dashboard.Payment Method') }}</th>
                                <th>{{ __('dashboard.Reference') }}</th>
                                <th>{{ __('dashboard.Created By') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($depositsCollection as $reservation)
                                <tr>
                                    <td class="tx-muted">{{ $reservation->created_at->format('Y-m-d') }}</td>
                                    <td><a href="{{ route('dashboard.reservations.show', $reservation->id) }}" class="tx-link">#{{ $reservation->id }}</a></td>
                                    <td class="tx-amount">{{ number_format($reservation->deposit, 2) }}</td>
                                    <td><span class="tx-pill">{{ __('dashboard.' . ($reservation->payment_method ?: 'none')) }}</span></td>
                                    <td class="tx-muted">{{ $reservation->payment_reference ?? '-' }}</td>
                                    <td>{{ $reservation->creator?->name ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </article>

        <article class="tx-card">
            <div class="tx-card__head">
                <h3 class="tx-card__title">
                    <i class="fa-solid fa-building-columns"></i>
                    الدفعات النهائية للحجوزات
                    <span class="tx-card__badge">{{ $finalPaymentsCollection->count() }}</span>
                </h3>
                <span class="tx-card__total">{{ number_format($finalPaymentsTotal, 2) }}</span>
            </div>
            @if($finalPaymentsCollection->isEmpty())
                <div class="tx-empty">لا توجد دفعات نهائية</div>
            @else
                <div class="tx-table-wrap">
                    <table class="tx-table">
                        <thead>
                            <tr>
                                <th>{{ __('dashboard.Date') }}</th>
                                <th>{{ __('dashboard.Reservation ID') }}</th>
                                <th>{{ __('dashboard.Remaining Amount') }}</th>
                                <th>{{ __('dashboard.Payment Method') }}</th>
                                <th>{{ __('dashboard.Reference') }}</th>
                                <th>{{ __('dashboard.Created By') }}</th>
                                <th>{{ __('dashboard.Delivered By') }}</th>
                                <th>{{ __('dashboard.Finished By') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($finalPaymentsCollection as $reservation)
                                <tr>
                                    <td class="tx-muted">{{ $reservation->actual_delivered_date->format('Y-m-d') }}</td>
                                    <td><a href="{{ route('dashboard.reservations.show', $reservation->id) }}" class="tx-link">#{{ $reservation->id }}</a></td>
                                    <td class="tx-amount">{{ number_format($reservation->price - $reservation->deposit, 2) }}</td>
                                    <td><span class="tx-pill">{{ __('dashboard.' . ($reservation->final_payment_method ?: 'none')) }}</span></td>
                                    <td class="tx-muted">{{ $reservation->final_payment_reference ?? '-' }}</td>
                                    <td>{{ $reservation->creator?->name ?? '-' }}</td>
                                    <td>{{ $reservation->deliverer?->name ?? '-' }}</td>
                                    <td>{{ $reservation->finisher?->name ?? '-' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </article>
    @endif
</div>
@endsection

@section('scripts')
<script>
(function () {
    const dateInput = document.getElementById('tx_date');
    const startWrap = document.getElementById('tx_start_wrap');
    const endWrap = document.getElementById('tx_end_wrap');

    if (!dateInput || !startWrap || !endWrap) return;

    function toggleDateRange() {
        const isSingleDay = dateInput.value !== '';
        startWrap.hidden = isSingleDay;
        endWrap.hidden = isSingleDay;
    }

    toggleDateRange();
    dateInput.addEventListener('change', toggleDateRange);
})();
</script>
@endsection