@extends('layouts.app')

@section('title', __('dashboard.Customer Details'))
@section('page_heading', $customer->name)

@section('content')
@include('layouts.partials.workspace-page-styles')
@include('dashboard.partials.audit-log-styles')

{{-- KPIs --}}
<div class="app-grid gap-3 mb-4">
    @foreach([
        ['icon'=>'fa-solid fa-calendar-check','bg'=>'var(--c-primary-bg)','color'=>'var(--c-primary)','val'=>$stats['reservations_count'],'lbl'=>__('dashboard.Total Reservations')],
        ['icon'=>'fa-solid fa-coins','bg'=>'#f0fdf4','color'=>'#16a34a','val'=>number_format($stats['net_reservations_value'],2),'lbl'=>__('dashboard.Reservations Total Value')],
        ['icon'=>'fa-solid fa-cart-shopping','bg'=>'#eff6ff','color'=>'#2563eb','val'=>$stats['sales_count'],'lbl'=>__('dashboard.Total Purchases')],
        ['icon'=>'fa-solid fa-wallet','bg'=>'#fffbeb','color'=>'#d97706','val'=>number_format($stats['net_sales_value'],2),'lbl'=>__('dashboard.Purchases Total Value')],
    ] as $k)
    <div class="col-span-6 md:col-span-3">
        <div class="collection-shell" style="padding:1rem 1.25rem">
            <div class="flex items-center gap-3">
                <div class="flex items-center justify-center rounded-lg shrink-0"
                     style="width:42px;height:42px;background:{{ $k['bg'] }};color:{{ $k['color'] }};font-size:1.1rem">
                    <i class="{{ $k['icon'] }}"></i>
                </div>
                <div>
                    <div style="font-size:1.2rem;font-weight:900">{{ $k['val'] }}</div>
                    <div class="text-slate-500 dark:text-slate-400" style="font-size:.75rem;font-weight:700">{{ $k['lbl'] }}</div>
                </div>
            </div>
        </div>
    </div>
    @endforeach
</div>

{{-- Customer Info --}}
<div class="workspace-shell mb-4">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-address-card"></i></span>
                <div class="collection-card__title">
                    <h2>{{ __('dashboard.Customer Details') }}</h2>
                </div>
            </div>
            <div class="flex items-center gap-2">
                @can('edit customers')
                <a href="{{ route('dashboard.customers.edit', $customer->id) }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-pen"></i> {{ __('dashboard.Edit') }}
                </a>
                @endcan
                <a href="{{ route('dashboard.customers.index') }}" class="app-btn app-btn--secondary app-btn--sm">
                    <i class="fa-solid fa-arrow-right"></i> {{ __('dashboard.Customers') }}
                </a>
            </div>
        </div>
        <div class="app-grid gap-3 mt-2">
            <div class="md:col-span-3"><div class="text-slate-500 dark:text-slate-400 font-bold" style="font-size:.78rem">{{ __('dashboard.Name') }}</div><div class="font-bold">{{ $customer->name }}</div></div>
            <div class="md:col-span-3"><div class="text-slate-500 dark:text-slate-400 font-bold" style="font-size:.78rem">{{ __('dashboard.Gender') }}</div><div class="font-bold">{{ $customer->gender === 'male' ? __('dashboard.Male') : __('dashboard.Female') }}</div></div>
            <div class="md:col-span-3"><div class="text-slate-500 dark:text-slate-400 font-bold" style="font-size:.78rem">{{ __('dashboard.Governorate') }}</div><div class="font-bold">{{ $customer->governorate ?: '—' }}</div></div>
            <div class="md:col-span-3"><div class="text-slate-500 dark:text-slate-400 font-bold" style="font-size:.78rem">{{ __('dashboard.Customer Since') }}</div><div class="font-bold">{{ $customer->created_at->format('Y-m-d') }}</div></div>
            @foreach($contactRows as $contact)
            <div class="md:col-span-3">
                <div class="text-slate-500 dark:text-slate-400 font-bold mb-1" style="font-size:.78rem">{{ $contact['label'] }}</div>
                <div class="flex items-center gap-1">
                    <span class="font-bold" style="font-size:.85rem;direction:ltr">{{ $contact['number'] }}</span>
                    <a href="{{ $contact['tel_url'] }}" class="app-btn app-btn--sm app-btn--primary-soft p-1" style="width:28px;height:28px"><i class="fa-solid fa-phone" style="font-size:.75rem"></i></a>
                    <a href="{{ $contact['whatsapp_url'] }}" target="_blank" class="app-btn app-btn--sm app-btn--success-soft p-1" style="width:28px;height:28px"><i class="fa-solid fa-phone" style="font-size:.75rem"></i></a>
                </div>
            </div>
            @endforeach
            @if($customer->address)
            <div class="col-span-12"><div class="text-slate-500 dark:text-slate-400 font-bold" style="font-size:.78rem">{{ __('dashboard.Address') }}</div><div class="font-bold">{{ $customer->address }}</div></div>
            @endif
        </div>
    </div>
</div>

{{-- Reservations --}}
<div class="workspace-shell mb-4">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-calendar-check"></i></span>
                <div class="collection-card__title"><h2>{{ __('dashboard.Reservations') }}</h2></div>
            </div>
            <span class="collection-card__meta">{{ count($reservationRows) }}</span>
        </div>
        @if(count($reservationRows))
        <div class="app-table-wrap mt-4">
            <table class="app-table app-table--striped collection-table">
                <thead><tr><th>#</th><th>{{ __('dashboard.Product') }}</th><th>{{ __('dashboard.Event Date') }}</th><th>{{ __('dashboard.Return Date') }}</th><th>{{ __('dashboard.Final Total') }}</th><th>{{ __('dashboard.Status') }}</th><th></th></tr></thead>
                <tbody>
                    @foreach($reservationRows as $r)
                    <tr>
                        <td class="text-slate-500 dark:text-slate-400 font-bold">{{ $r['id'] }}</td>
                        <td class="font-bold">{{ $r['product_name'] }}</td>
                        <td class="text-slate-500 dark:text-slate-400" style="font-size:.8rem">{{ $r['event_date'] }}</td>
                        <td class="text-slate-500 dark:text-slate-400" style="font-size:.8rem">{{ $r['return_date'] }}</td>
                        <td class="font-bold">{{ $r['final_total'] }}</td>
                        <td><span class="app-badge {{ $r['status_class'] }}">{{ $r['status_text'] }}</span></td>
                        <td><a href="{{ $r['show_url'] }}" class="app-btn app-btn--sm app-btn--primary-soft">{{ __('dashboard.View') }}</a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <p class="text-slate-500 dark:text-slate-400 mt-4">{{ __('dashboard.No reservations found for this customer.') }}</p>
        @endif
    </div>
</div>

{{-- Sales --}}
<div class="workspace-shell mb-4">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-cart-shopping"></i></span>
                <div class="collection-card__title"><h2>{{ __('dashboard.Sales') }}</h2></div>
            </div>
            <span class="collection-card__meta">{{ count($saleRows) }}</span>
        </div>
        @if(count($saleRows))
        <div class="app-table-wrap mt-4">
            <table class="app-table app-table--striped collection-table">
                <thead><tr><th>#</th><th>{{ __('dashboard.Products') }}</th><th>{{ __('dashboard.Final Total') }}</th><th>{{ __('dashboard.Payment Status') }}</th><th>{{ __('dashboard.Date') }}</th><th></th></tr></thead>
                <tbody>
                    @foreach($saleRows as $s)
                    <tr>
                        <td class="text-slate-500 dark:text-slate-400 font-bold">{{ $s['id'] }}</td>
                        <td>@foreach($s['products'] as $p)<div style="font-size:.8rem">{{ $p['name'] }} ({{ $p['quantity'] }})</div>@endforeach</td>
                        <td class="font-bold">{{ $s['final_total'] }}</td>
                        <td><span class="app-badge {{ $s['payment_status_class'] }}">{{ $s['payment_status_text'] }}</span></td>
                        <td class="text-slate-500 dark:text-slate-400" style="font-size:.8rem">{{ $s['created_at'] }}</td>
                        <td><a href="{{ $s['show_url'] }}" class="app-btn app-btn--sm app-btn--primary-soft">{{ __('dashboard.View') }}</a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @else
        <p class="text-slate-500 dark:text-slate-400 mt-4">{{ __('dashboard.No sales found for this customer.') }}</p>
        @endif
    </div>
</div>

{{-- Embroidery --}}
@if($embroideryRows->isNotEmpty())
<div class="workspace-shell mb-4">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-star"></i></span>
                <div class="collection-card__title"><h2>{{ __('dashboard.embroidery_orders_title') }}</h2></div>
            </div>
            <span class="collection-card__meta">{{ $embroideryRows->count() }}</span>
        </div>
        <div class="app-table-wrap mt-4">
            <table class="app-table app-table--striped collection-table">
                <thead><tr><th>المرجع</th><th>العنوان</th><th>الموعد</th><th>{{ __('dashboard.status_label') }}</th><th></th></tr></thead>
                <tbody>
                    @foreach($embroideryRows as $r)
                    <tr>
                        <td class="font-bold">{{ $r['reference_code'] }}</td>
                        <td>{{ $r['title'] }}</td>
                        <td class="text-slate-500 dark:text-slate-400" style="font-size:.8rem">{{ $r['target_date'] ?? '—' }}</td>
                        <td>{{ $r['status'] }}</td>
                        <td class="flex gap-1">
                            <a href="{{ $r['show_url'] }}" class="app-btn app-btn--sm app-btn--primary-soft">{{ __('dashboard.view') }}</a>
                            @if($r['manufacturing_url'])<a href="{{ $r['manufacturing_url'] }}" class="app-btn app-btn--sm app-btn--success-soft">التصنيع</a>@endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

{{-- Manufacturing --}}
@if($manufacturingRows->isNotEmpty())
<div class="workspace-shell mb-4">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-screwdriver-wrench"></i></span>
                <div class="collection-card__title"><h2>{{ __('dashboard.manufacturing_orders_title') }}</h2></div>
            </div>
            <span class="collection-card__meta">{{ $manufacturingRows->count() }}</span>
        </div>
        <div class="app-table-wrap mt-4">
            <table class="app-table app-table--striped collection-table">
                <thead><tr><th>المرجع</th><th>العنوان</th><th>{{ __('dashboard.type_label') }}</th><th>{{ __('dashboard.status_label') }}</th><th>التكلفة</th><th></th></tr></thead>
                <tbody>
                    @foreach($manufacturingRows as $r)
                    <tr>
                        <td class="font-bold">{{ $r['reference_code'] }}</td>
                        <td>{{ $r['title'] }}</td>
                        <td>{{ $r['type'] }}</td>
                        <td>{{ $r['status'] }}</td>
                        <td class="font-bold">{{ $r['total_cost'] }}</td>
                        <td><a href="{{ $r['show_url'] }}" class="app-btn app-btn--sm app-btn--primary-soft">{{ __('dashboard.view') }}</a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif

{{-- Audit Log --}}
<div class="workspace-shell">
    <div class="workspace-body">
        <div class="collection-card__header">
            <div class="collection-card__intro">
                <span class="collection-card__icon"><i class="fa-solid fa-clock-rotate-left"></i></span>
                <div class="collection-card__title"><h2>{{ __('dashboard.history_title') }}</h2></div>
            </div>
            <div class="flex items-center gap-2 flex-wrap">
                <span class="app-badge app-badge--secondary">{{ $auditSummary['total'] }}</span>
                <a href="#customer_history_collapse" class="app-btn app-btn--secondary app-btn--sm" onclick="event.preventDefault();var el=document.getElementById('customer_history_collapse');el.style.display=el.style.display==='none'?'block':'none'">{{ __('dashboard.history_toggle') }}</a>
            </div>
        </div>
        <div id="customer_history_collapse" class="app-collapse mt-4">
            <div class="timeline">
                @forelse($auditEntries as $entry)
                <div class="timeline-item">
                    <div class="timeline-line w-40px"></div>
                    <div class="timeline-icon inline-flex rounded-full w-10 h-10 me-4">
                        <div class="inline-flex items-center justify-center w-10 h-10 rounded-full" style="background:var(--c-primary-bg)">
                            <i class="{{ $entry['icon'] }} text-2xl" style="color:var(--c-primary)"></i>
                        </div>
                    </div>
                    <div class="timeline-content mb-10 mt-n1">
                        <div class="font-semibold mb-1">{{ $entry['headline'] }} {{ __('dashboard.history_event_by') }} <span class="font-bold">{{ $entry['actor'] }}</span></div>
                        <div class="text-slate-500 dark:text-slate-400" style="font-size:.75rem">{{ $entry['timestamp'] }} ({{ $entry['timestamp_human'] }})</div>
                        @if($entry['changes']->isNotEmpty())
                        <div class="mt-2">
                            @foreach($entry['changes'] as $change)
                            <div class="flex flex-wrap gap-1">
                                <span class="font-bold">{{ $change['label'] }}:</span>
                                @if($change['has_old'])<span class="text-red-600 dark:text-red-400"><s>{{ $change['old'] }}</s></span><i class="fa-solid fa-arrow-right text-slate-500 dark:text-slate-400 mx-1"></i>@endif
                                <span class="text-emerald-600 dark:text-emerald-400 font-bold">{{ $change['new'] }}</span>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                </div>
                @empty
                <p class="text-slate-500 dark:text-slate-400">{{ __('dashboard.history_no_history_found') }}</p>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection