@extends('layouts.app')
@section('title', 'إحصائية البائع')
@section('page_heading', 'إحصائية البائع')

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

@php
    $selectedName = $selectedModeratorId
        ? ($moderators->find($selectedModeratorId)?->name ?? 'غير معروف')
        : 'كل البائعين';
    $totalOps   = ($sales->sales_count ?? 0) + ($reservations->reservations_count ?? 0);
    $totalValue = ($sales->sales_value ?? 0) + ($reservations->reservations_value ?? 0);
    $statusBadge = [
        'finished'  => ['#f0fdf4','#16a34a','منتهي'],
        'canceled'  => ['#fef2f2','#dc2626','ملغي'],
        'ongoing'   => ['var(--c-primary-bg)','var(--c-primary)','جاري'],
        'fitting'   => ['#f0f9ff','#0ea5e9','قياس'],
        'pending'   => ['#fffbeb','#d97706','معلق'],
        'delivered' => ['#fffbeb','#d97706','تم التسليم'],
    ];
@endphp

{{-- Filter --}}
<form action="{{ route('dashboard.statistics.moderators') }}" method="GET"
      style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:1rem 1.25rem;margin-bottom:1.25rem;display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap">
    <div style="display:flex;flex-direction:column;gap:.3rem">
        <label style="font-size:.72rem;font-weight:700;color:var(--text-muted)">البائع</label>
        <select name="moderator_id" class="app-input" style="min-width:180px">
            <option value="">كل البائعين</option>
            @foreach($moderators as $m)
            <option value="{{ $m->id }}" @selected($selectedModeratorId==$m->id)>{{ $m->name }}</option>
            @endforeach
        </select>
    </div>
    <div style="display:flex;flex-direction:column;gap:.3rem">
        <label style="font-size:.72rem;font-weight:700;color:var(--text-muted)">الفترة</label>
        <select name="range" id="range_sel" class="app-input" style="min-width:150px">
            @foreach(['last_week' => __('dashboard.last_week'), 'last_month' => __('dashboard.last_month'), 'last_3_months' => __('dashboard.last_3_months'), 'last_year' => __('dashboard.last_year'), 'custom' => 'نطاق مخصص'] as $v => $l)
            <option value="{{ $v }}" @selected($range===$v)>{{ $l }}</option>
            @endforeach
        </select>
    </div>
    <div id="start_wrap" style="display:{{ $range==='custom'?'flex':'none' }};flex-direction:column;gap:.3rem">
        <label style="font-size:.72rem;font-weight:700;color:var(--text-muted)">من تاريخ</label>
        <input type="date" name="custom_start" class="app-input" value="{{ request('custom_start', $startDate->toDateString()) }}">
    </div>
    <div id="end_wrap" style="display:{{ $range==='custom'?'flex':'none' }};flex-direction:column;gap:.3rem">
        <label style="font-size:.72rem;font-weight:700;color:var(--text-muted)">إلى تاريخ</label>
        <input type="date" name="custom_end" class="app-input" value="{{ request('custom_end', $endDate->toDateString()) }}">
    </div>
    <button type="submit" class="app-btn app-btn--primary"><i class="fa-solid fa-filter me-1"></i>فلتر</button>
    <a href="{{ route('dashboard.statistics.moderators') }}" class="app-btn app-btn--secondary">إعادة تعيين</a>
    <button type="submit" formaction="{{ route('dashboard.statistics.moderators.export') }}" class="app-btn app-btn--secondary">
        <i class="fa-solid fa-file-excel me-1"></i>تصدير
    </button>
</form>

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-id-badge',       '#eff6ff','#2563eb', $selectedName,                                number_format($totalOps).' عملية',          'البائع المحدد'],
        ['fa-solid fa-cart-shopping',  '#f0fdf4','#16a34a', number_format($sales->sales_count ?? 0),      number_format($sales->sales_value ?? 0,2).' ج.م', 'عدد المبيعات'],
        ['fa-solid fa-calendar-check', '#fffbeb','#d97706', number_format($reservations->reservations_count ?? 0), number_format($reservations->reservations_value ?? 0,2).' ج.م', 'عدد الحجوزات'],
        ['fa-solid fa-coins',          '#faf5ff','#7c3aed', number_format($totalValue,2).' ج.م',          $startDate->format('Y-m-d').' — '.$endDate->format('Y-m-d'), __('dashboard.total_revenue_label')],
    ] as [$ic,$bg,$cl,$val,$sub,$lbl])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;box-shadow:var(--shadow-card)">
        <div style="width:38px;height:38px;border-radius:10px;background:{{ $bg }};color:{{ $cl }};display:flex;align-items:center;justify-content:center;font-size:.95rem;margin-bottom:.75rem"><i class="{{ $ic }}"></i></div>
        <div style="font-size:1.1rem;font-weight:900;color:var(--text-primary);line-height:1.2;margin-bottom:.2rem">{{ $val }}</div>
        <div style="font-size:.75rem;font-weight:800;color:var(--text-primary);margin-bottom:.1rem">{{ $lbl }}</div>
        <div style="font-size:.68rem;color:var(--text-muted)">{{ $sub }}</div>
    </div>
    @endforeach
</div>

{{-- Reservations Table --}}
<div style="background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle)">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-calendar-check" style="color:var(--c-primary)"></i>
            تفاصيل حجوزات البائع
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ $reservationsList->total() }}</span>
        </div>
        <a href="{{ route('dashboard.statistics.moderators.export', request()->query()) }}"
           style="display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;color:var(--c-primary);text-decoration:none">
            <i class="fa-solid fa-file-excel"></i>تصدير الحجوزات
        </a>
    </div>

    @if($reservationsList->isEmpty())
    <div style="padding:3rem;text-align:center">
        @include('layouts.partials.index-empty-state',['icon'=>'fa-solid fa-calendar-check','title'=>'لا توجد حجوزات في هذه الفترة','message'=>''])
    </div>
    @else
    <div style="overflow-x:auto">
        <style>.page-table tbody tr{border-bottom:1px solid var(--border-subtle);transition:background .12s}.page-table tbody tr:hover{background:var(--surface-50)}.page-th{padding:.65rem 1.1rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start;border-bottom:1px solid var(--border);white-space:nowrap}</style>
        <table class="page-table" style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach(['#','العميل','المنتج','التصنيف','البائع','الإجمالي','الحالة',''] as $h)
                    <th class="page-th">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($reservationsList as $r)
                @php [$sbg,$scl,$slbl] = $statusBadge[$r->status] ?? ['var(--border-subtle)','var(--text-muted)',$r->status]; @endphp
                <tr>
                    <td style="padding:.875rem 1.25rem;font-weight:700;color:var(--text-muted);font-size:.78rem">#{{ $r->id }}</td>
                    <td style="padding:.875rem 1.25rem;font-weight:800;color:var(--text-primary)">{{ $r->customer?->name ?? '—' }}</td>
                    <td style="padding:.875rem 1.25rem;color:var(--text-secondary)">{{ $r->product?->name ?? '—' }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:var(--surface-100);color:var(--text-secondary)">
                            {{ $r->product?->category?->name ?? '—' }}
                        </span>
                    </td>
                    <td style="padding:.875rem 1.25rem;color:var(--text-secondary);font-size:.8rem">{{ $r->creator?->name ?? '—' }}</td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ number_format($r->final_total,2) }}</div>
                        <div style="font-size:.68rem;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <span style="display:inline-flex;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:700;background:{{ $sbg }};color:{{ $scl }}">{{ $slbl }}</span>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <a href="{{ route('dashboard.reservations.show', $r->id) }}"
                           style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--c-primary-bg);color:var(--c-primary);text-decoration:none;font-size:.82rem">
                            <i class="fa-solid fa-eye"></i>
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $reservationsList->withQueryString()->links() }}
    </div>
    @endif
</div>

@endsection

@section('scripts')
<script>
const sel = document.getElementById('range_sel');
function toggle() {
    const c = sel.value === 'custom';
    document.getElementById('start_wrap').style.display = c ? 'flex' : 'none';
    document.getElementById('end_wrap').style.display   = c ? 'flex' : 'none';
}
sel.addEventListener('change', toggle);
</script>
@endsection