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

@section('content')
@php
    $customerCount = $customers->total();
    $reservationValue = $customers->getCollection()->sum('customer_reservations_sum_final_total');
    $purchaseValue = $customers->getCollection()->sum('customer_purchases_sum_final_total');
    $eventCount = $customers->getCollection()->sum(fn($c) => $c->customer_reservations->count());
@endphp

<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>

{{-- KPIs --}}
<div class="kpi-grid-4">
    @foreach([
        ['fa-solid fa-users','#eff6ff','#2563eb', number_format($customerCount),__('dashboard.total_customers_stat')],
        ['fa-solid fa-calendar-check','#f0fdf4','#16a34a', number_format($eventCount),'مواعيد الأحداث'],
        ['fa-solid fa-star','#fffbeb','#d97706', number_format($reservationValue,0),'قيمة الحجوزات'],
        ['fa-solid fa-bag-shopping','#faf5ff','#7c3aed', number_format($purchaseValue,0),'قيمة المشتريات'],
    ] as [$icon,$bg,$color,$val,$lbl])
    <div style="background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.875rem;box-shadow:var(--shadow-card)">
        <div style="width:42px;height:42px;border-radius:12px;flex-shrink:0;background:{{ $bg }};color:{{ $color }};display:flex;align-items:center;justify-content:center;font-size:1.05rem">
            <i class="{{ $icon }}"></i>
        </div>
        <div>
            <div style="font-size:1.35rem;font-weight:900;color:var(--text-primary);line-height:1">{{ $val }}</div>
            <div style="font-size:.7rem;font-weight:700;color:var(--text-muted);margin-top:.2rem">{{ $lbl }}</div>
        </div>
    </div>
    @endforeach
</div>

{{-- Shell --}}
<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;gap:1rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);flex-wrap:wrap">
        <div style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:800;color:var(--text-primary)">
            <i class="fa-solid fa-bullhorn" style="color:var(--c-primary)"></i>
            {{ __('dashboard.customer_data_extraction') }}
            <span style="font-size:.7rem;font-weight:700;padding:.15rem .55rem;border-radius:999px;background:var(--c-primary-bg);color:var(--c-primary)">{{ number_format($customerCount) }} عميل</span>
        </div>
        <div style="display:flex;align-items:center;gap:.5rem">
            <a href="{{ route('dashboard.marketing.export', array_merge(request()->query(), ['format' => 'xls'])) }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-file-excel me-1"></i>Excel
            </a>
            @can('view email templates')
            <a href="{{ route('dashboard.marketing.email-templates.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                <i class="fa-solid fa-envelope me-1"></i>القوالب
            </a>
            @endcan
            @can('view email campaigns')
            <a href="{{ route('dashboard.marketing.campaigns.index') }}" class="app-btn app-btn--primary app-btn--sm">
                <i class="fa-solid fa-paper-plane me-1"></i>الحملات
            </a>
            @endcan
        </div>
    </div>

    <form method="GET" action="{{ route('dashboard.marketing.index') }}" style="padding:.875rem 1.25rem;border-bottom:1px solid var(--border-subtle);display:flex;gap:.625rem;flex-wrap:wrap;align-items:flex-end">
        <div style="min-width:160px">
            <select name="event_timing" class="app-input app-select app-input--sm">
                <option value="">{{ __('dashboard.all') }}</option>
                <option value="upcoming" @selected(request('event_timing')==='upcoming')>{{ __('dashboard.upcoming_events') }}</option>
                <option value="past" @selected(request('event_timing')==='past')>{{ __('dashboard.past_events') }}</option>
            </select>
        </div>
        <div style="min-width:140px">
            <select name="event_month" class="app-input app-select app-input--sm">
                <option value="">{{ __('dashboard.all_months') }}</option>
                @for($m=1;$m<=12;$m++)
                    <option value="{{ $m }}" @selected(request('event_month')==$m)>{{ date('F',mktime(0,0,0,$m,1)) }}</option>
                @endfor
            </select>
        </div>
        <div style="min-width:160px">
            <select name="product_category_id" class="app-input app-select app-input--sm">
                <option value="">{{ __('dashboard.all_categories') }}</option>
                @foreach($productCategories as $cat)
                    <option value="{{ $cat->id }}" @selected(request('product_category_id')==$cat->id)>{{ $cat->name }}</option>
                @endforeach
            </select>
        </div>
        <button type="submit" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-filter{{ request()->hasAny(['event_timing','event_month','product_category_id']) ? '-fill' : '' }}"></i></button>
        @if(request()->hasAny(['event_timing','event_month','product_category_id']))
            <a href="{{ route('dashboard.marketing.index') }}" class="app-btn app-btn--secondary app-btn--sm"><i class="fa-solid fa-xmark"></i></a>
        @endif
    </form>

    @if($customers->isEmpty())
        <div style="padding:3rem;text-align:center">
            @include('layouts.partials.index-empty-state', ['icon'=>'fa-solid fa-bullhorn','title'=>__('dashboard.no_data_found'),'message'=>''])
        </div>
    @else
    <div style="overflow-x:auto">
        <table style="width:100%;border-collapse:collapse;font-size:.83rem">
            <thead>
                <tr style="background:var(--border-subtle)">
                    @foreach([__('dashboard.customer_name'),__('dashboard.contact_info'),__('dashboard.address'),'الحجوزات','المشتريات','مواعيد الأحداث'] as $h)
                    <th style="padding:.75rem 1.25rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);text-align:start;white-space:nowrap">{{ $h }}</th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                @foreach($customers as $customer)
                <tr style="border-top:1px solid var(--border-subtle)" onmouseover="this.style.background='var(--border-subtle)'" onmouseout="this.style.background=''">
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ $customer->name }}</div>
                        <div style="font-size:.7rem;color:var(--text-muted)">#{{ $customer->id }}</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        @foreach(array_filter([$customer->phone, $customer->other_phone]) as $phone)
                        @php $clean = '2'.preg_replace('/^0/','',$phone); @endphp
                        <div style="display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .3rem .22rem .55rem;border-radius:9px;border:1px solid var(--border);margin-bottom:.3rem;max-width:175px">
                            <span style="flex:1;font-size:.73rem;font-weight:700;color:var(--text-primary);direction:ltr;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ $phone }}</span>
                            <a href="tel:{{ $phone }}" style="width:1.5rem;height:1.5rem;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;text-decoration:none;background:#eff6ff;color:#2563eb"><i class="fa-solid fa-phone"></i></a>
                            <a href="https://wa.me/{{ $clean }}" target="_blank" style="width:1.5rem;height:1.5rem;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;text-decoration:none;background:#f0fdf4;color:#16a34a"><i class="fa-brands fa-whatsapp"></i></a>
                        </div>
                        @endforeach
                        @if(!$customer->phone && !$customer->other_phone)<span style="color:var(--text-muted)">—</span>@endif
                    </td>
                    <td style="padding:.875rem 1.25rem;font-size:.78rem;color:var(--text-muted);max-width:160px">
                        {{ trim(($customer->governorate ? $customer->governorate.' - ' : '').($customer->address ?? '')) ?: '—' }}
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ number_format($customer->customer_reservations_sum_final_total ?? 0, 0) }}</div>
                        <div style="font-size:.68rem;font-weight:600;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="font-weight:800;color:var(--text-primary)">{{ number_format($customer->customer_purchases_sum_final_total ?? 0, 0) }}</div>
                        <div style="font-size:.68rem;font-weight:600;color:var(--text-muted)">ج.م</div>
                    </td>
                    <td style="padding:.875rem 1.25rem">
                        <div style="display:flex;flex-wrap:wrap;gap:.3rem">
                            @foreach($customer->customer_reservations as $r)
                            <span style="display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .55rem;border-radius:8px;background:#f0fdf4;color:#16a34a;font-size:.7rem;font-weight:700">
                                <i class="fa-solid fa-calendar-days"></i>
                                {{ $r->event_date->format('Y-m-d') }}
                                <span style="opacity:.7">· {{ Str::limit($r->product->name ?? 'N/A', 12) }}</span>
                            </span>
                            @endforeach
                        </div>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @if($customers->hasPages())
    <div style="padding:.75rem 1.25rem;border-top:1px solid var(--border-subtle)">
        {{ $customers->appends(request()->query())->links() }}
    </div>
    @endif
    @endif
</div>
@endsection