@extends('layouts.app')

@section('title', 'Customer 360 - ' . $customer->full_name_en)

@section('content')
<div class="space-y-6" x-data="{ tab: 'overview', noteModal: false, docModal: false, flagModal: false }">

    <!-- Customer 360 Header & Quick Actions (Requirements 25, 30) -->
    <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-6">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div class="flex items-center space-x-5 rtl:space-x-reverse">
                <div class="w-16 h-16 rounded-3xl bg-gradient-to-r from-sky-500 to-emerald-500 text-white flex items-center justify-center font-extrabold text-2xl shadow-lg">
                    {{ strtoupper(substr($customer->first_name, 0, 1)) }}
                </div>
                <div class="space-y-1">
                    <div class="flex items-center space-x-3 rtl:space-x-reverse">
                        <h1 class="text-2xl font-extrabold text-slate-900 dark:text-white">{{ $customer->full_name_en }}</h1>
                        @if($customer->is_vip)
                            <span class="px-3 py-1 rounded-full bg-amber-500 text-white font-extrabold text-[10px] uppercase shadow-sm">VIP CUSTOMER</span>
                        @endif
                        <span class="px-3 py-0.5 rounded-full bg-emerald-100 dark:bg-emerald-950 text-emerald-700 dark:text-emerald-300 font-bold text-xs uppercase">{{ $customer->status }}</span>
                    </div>

                    <div class="flex flex-wrap items-center gap-3 text-xs text-slate-500 font-medium">
                        <span class="font-mono font-bold text-sky-600 dark:text-sky-400">Code: {{ $customer->customer_code }}</span>
                        <span>•</span>
                        <span>Mobile: <strong>{{ $customer->contact ? $customer->contact->primary_mobile : 'N/A' }}</strong></span>
                        <span>•</span>
                        <span>Nationality: <strong>{{ $customer->nationality }}</strong></span>
                        <span>•</span>
                        <span>Type: <strong class="uppercase text-[10px]">{{ $customer->customer_type }}</strong></span>
                    </div>
                </div>
            </div>

            <!-- Quick Action Buttons (Requirement 25) -->
            <div class="flex flex-wrap items-center gap-2 text-xs font-bold">
                <a href="{{ route('app.customers.edit',$customer) }}" class="px-3.5 py-2 border border-slate-200 bg-white text-slate-700 rounded-xl">Edit Profile</a>
                <a href="{{ route('app.applications.create',['customer_id'=>$customer->id]) }}" class="px-3.5 py-2 bg-orange-600 text-white rounded-xl">+ Application</a>
                <button @click="docModal = true" class="px-3.5 py-2 bg-sky-600 hover:bg-sky-700 text-white rounded-xl shadow-sm">+ Upload Document</button>
                <button @click="noteModal = true" class="px-3.5 py-2 bg-slate-900 dark:bg-slate-700 text-white rounded-xl shadow-sm">+ Staff Note</button>
                <button @click="flagModal = true" class="px-3.5 py-2 bg-amber-500 hover:bg-amber-600 text-white rounded-xl shadow-sm">+ Flag Profile</button>
            </div>
        </div>

        <!-- Customer Flags Alert -->
        @if($customer->flags->count() > 0)
            <div class="p-3 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-2xl flex items-center space-x-2 text-xs font-bold text-amber-800 dark:text-amber-200">
                <svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                <span>Active Profile Flags: {{ implode(', ', $customer->flags->pluck('flag_type')->toArray()) }}</span>
            </div>
        @endif

        <!-- 12 Customer 360 Tabs (Requirement 26) -->
        <div class="flex items-center space-x-1 rtl:space-x-reverse overflow-x-auto text-xs font-bold border-t border-slate-100 dark:border-slate-700 pt-4">
            <button @click="tab = 'overview'" :class="tab === 'overview' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl whitespace-nowrap">Overview</button>
            <button @click="tab = 'identity'" :class="tab === 'identity' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl whitespace-nowrap">Identity & Passports</button>
            <button @click="tab = 'documents'" :class="tab === 'documents' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl whitespace-nowrap">Document Vault ({{ $customer->documents->count() }})</button>
            <button @click="tab = 'family'" :class="tab === 'family' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl whitespace-nowrap">Family / Dependents</button>
            <button @click="tab = 'notes'" :class="tab === 'notes' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl whitespace-nowrap">Staff Notes ({{ $customer->notes->count() }})</button>
            <button @click="tab = 'applications'" :class="tab === 'applications' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl whitespace-nowrap">Applications</button>
            <button @click="tab = 'invoices'" :class="tab === 'invoices' ? 'bg-sky-600 text-white' : 'text-slate-500 hover:text-slate-800'" class="px-4 py-2 rounded-xl whitespace-nowrap">Invoices & Ledger</button>
            <button @click="tab = 'communications'" :class="tab === 'communications' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl whitespace-nowrap">Communications</button>
            <button @click="tab = 'renewals'" :class="tab === 'renewals' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl whitespace-nowrap">Renewals</button>
            <button @click="tab = 'activity'" :class="tab === 'activity' ? 'bg-sky-600 text-white' : 'text-slate-500'" class="px-4 py-2 rounded-xl whitespace-nowrap">Audit</button>
        </div>
    </div>

    <!-- Tab 1: Overview (Requirement 27) -->
    <div x-show="tab === 'overview'" class="grid grid-cols-1 md:grid-cols-2 gap-6 text-xs font-medium">
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-3">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Customer Overview Details</h3>
            <p>Full English Name: <strong>{{ $customer->full_name_en }}</strong></p>
            <p>Gender: <strong>{{ ucfirst($customer->gender) }}</strong></p>
            <p>Date of Birth: <strong>{{ $customer->dob ? $customer->dob->format('d M Y') : 'N/A' }}</strong></p>
            <p>Nationality: <strong>{{ $customer->nationality }}</strong></p>
            <p>Primary Mobile: <strong>{{ $customer->contact ? $customer->contact->primary_mobile : 'N/A' }}</strong></p>
            <p>Email: <strong>{{ $customer->contact ? $customer->contact->email : 'N/A' }}</strong></p>
        </div>

        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-3">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Current Active Identity Records</h3>
            @forelse($customer->identityRecords as $idRec)
                <div class="p-3 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex justify-between items-center">
                    <div>
                        <span class="uppercase font-bold text-sky-600 text-[10px] block">{{ str_replace('_', ' ', $idRec->document_type) }}</span>
                        <span class="font-mono font-bold text-slate-900 dark:text-white">{{ $idRec->document_number }}</span>
                    </div>
                    <span class="text-slate-500 font-mono text-[10px]">Expiry: {{ $idRec->expiry_date ? $idRec->expiry_date->format('d M Y') : 'N/A' }}</span>
                </div>
            @empty
                <p class="text-slate-400">No identity document records registered yet.</p>
            @endforelse
        </div>
    </div>

    <!-- Tab 2: Identity & Passport History (Requirements 14-15) -->
    <div x-show="tab === 'identity'" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
        <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs border-b border-slate-100 dark:border-slate-700 pb-2">Multiple Passport & Visa Historical Ledger</h3>

        <div class="space-y-3">
            @foreach($customer->identityRecords as $rec)
                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 flex items-center justify-between">
                    <div>
                        <div class="flex items-center space-x-2 rtl:space-x-reverse">
                            <span class="font-bold uppercase text-sky-600 text-xs">{{ $rec->document_type }}</span>
                            <span class="px-2 py-0.5 rounded text-[10px] font-bold {{ $rec->is_current ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-200 text-slate-600' }}">
                                {{ $rec->is_current ? 'CURRENT ACTIVE' : 'HISTORICAL / PREVIOUS' }}
                            </span>
                        </div>
                        <div class="font-mono font-bold text-slate-900 dark:text-white text-sm mt-1">{{ $rec->document_number }}</div>
                    </div>
                    <div class="text-right font-mono text-[11px] text-slate-500">
                        <div>Issue: {{ $rec->issue_date ? $rec->issue_date->format('d M Y') : 'N/A' }}</div>
                        <div>Expiry: {{ $rec->expiry_date ? $rec->expiry_date->format('d M Y') : 'N/A' }}</div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Tab 3: Customer Document Vault (Requirements 16-23) -->
    <div x-show="tab === 'documents'" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-2">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">Secure Customer Document Vault</h3>
            <button @click="docModal = true" class="px-3 py-1 bg-sky-600 text-white font-bold text-xs rounded-xl">+ Upload Document</button>
        </div>

        <div class="overflow-x-auto"><table class="erp-table"><thead><tr><th>Document</th><th>Dates</th><th>Version</th><th>Review</th><th>Actions</th></tr></thead><tbody>
            @forelse($customer->documents as $doc)
                <tr><td><strong>{{ $doc->document_name }}</strong><small>{{ $doc->document_number??'No number' }} · {{ $doc->documentType?->name_en }}</small></td><td>{{ optional($doc->issue_date)->format('d M Y')?:'No issue date' }}<small>Expires {{ optional($doc->expiry_date)->format('d M Y')?:'never' }}</small></td><td>v{{ $doc->version }} · {{ $doc->is_current?'Current':'Historical' }}</td><td><span class="erp-status" data-status="{{ $doc->verification_status }}">{{ str($doc->verification_status)->replace('_',' ')->title() }}</span></td><td><div class="flex flex-wrap gap-2">@if($doc->attachment_path)<a href="{{ route('app.customers.documents.preview',$doc) }}" target="_blank">Preview</a><a href="{{ route('app.customers.documents.download',$doc) }}">Download</a>@endif<a href="{{ route('app.customers.documents.history',$doc) }}">History</a>@if($doc->verification_status==='pending_verification')<form method="POST" action="{{ route('app.customers.documents.review',$doc) }}">@csrf<input type="hidden" name="decision" value="verified"><button class="font-bold text-emerald-700">Verify</button></form>@endif</div></td></tr>
            @empty
                <tr><td colspan="5" class="text-center text-slate-400">No documents stored in vault yet.</td></tr>
            @endforelse
        </tbody></table></div>
    </div>

    <div x-show="tab === 'family'" class="erp-panel"><div class="erp-panel-heading"><div><h2>Family and dependents</h2><p>Linked sponsor, spouse, child and dependent profiles.</p></div><a href="{{ route('app.customers.families.index') }}">Manage families</a></div><div class="mt-4 grid gap-3 sm:grid-cols-2">@forelse($customer->familyLinks as $link)<a href="{{ route('app.customers.families.show',$link->family_id) }}" class="rounded-xl bg-slate-50 p-4 text-xs"><strong>{{ $link->family?->family_name }}</strong><small class="block">{{ str($link->relationship)->title() }} · {{ $link->family?->members?->count() }} members</small></a>@empty<div class="erp-empty"><strong>No family link</strong></div>@endforelse</div></div>
    <div x-show="tab === 'applications'" class="erp-panel"><div class="erp-panel-heading"><div><h2>Applications</h2><p>Current and historical service work.</p></div><a href="{{ route('app.applications.create',['customer_id'=>$customer->id]) }}">+ Application</a></div><div class="mt-4 overflow-x-auto"><table class="erp-table"><thead><tr><th>Application</th><th>Service</th><th>Assigned</th><th>Status</th><th>Due</th></tr></thead><tbody>@forelse($customer->applications as $app)<tr><td><a href="{{ route('app.applications.show',$app) }}" class="font-bold">{{ $app->application_number }}</a></td><td>{{ $app->service?->name_en }}</td><td>{{ $app->assignedUser?->name??'Unassigned' }}</td><td>{{ str($app->status)->replace('_',' ')->title() }}</td><td>{{ optional($app->due_at)->format('d M Y H:i') }}</td></tr>@empty<tr><td colspan="5"><div class="erp-empty"><strong>No applications</strong></div></td></tr>@endforelse</tbody></table></div></div>
    <div x-show="tab === 'invoices'" class="erp-panel"><div class="erp-panel-heading"><div><h2>Invoices, payments and balances</h2><p>Live financial ledger.</p></div></div><div class="mt-4 overflow-x-auto"><table class="erp-table"><thead><tr><th>Invoice</th><th>Total</th><th>Paid</th><th>Balance</th><th>Status</th></tr></thead><tbody>@forelse($customer->invoices as $invoice)<tr><td><a href="{{ route('app.billing.invoices.show',$invoice) }}">{{ $invoice->invoice_number }}</a></td><td>AED {{ number_format((float)$invoice->total_amount,2) }}</td><td>AED {{ number_format((float)$invoice->payments->sum('amount'),2) }}</td><td>AED {{ number_format((float)$invoice->balance_due,2) }}</td><td>{{ str($invoice->status)->title() }}</td></tr>@empty<tr><td colspan="5"><div class="erp-empty"><strong>No invoices</strong></div></td></tr>@endforelse</tbody></table></div></div>
    <div x-show="tab === 'communications'" class="erp-panel"><div class="erp-panel-heading"><div><h2>Communication history</h2><p>System, email, SMS and WhatsApp activity.</p></div></div><div class="mt-4 divide-y">@forelse($customer->communications as $message)<div class="flex justify-between py-3 text-xs"><span><strong>{{ str($message->channel)->title() }} · {{ $message->subject?:'Message' }}</strong><small class="block">{{ str($message->status)->replace('_',' ')->title() }}</small></span><time>{{ optional($message->created_at)->format('d M Y H:i') }}</time></div>@empty<div class="erp-empty"><strong>No communications</strong></div>@endforelse</div></div>
    <div x-show="tab === 'renewals'" class="erp-panel"><div class="erp-panel-heading"><div><h2>Renewal opportunities</h2><p>Document and service renewal pipeline.</p></div></div><div class="mt-4 divide-y">@forelse($renewals as $renewal)<a href="{{ route('app.renewals.show',$renewal) }}" class="flex justify-between py-3 text-xs"><span><strong>{{ $renewal->renewal_number }}</strong><small class="block">{{ str($renewal->document_type)->replace('_',' ')->title() }}</small></span><span>{{ str($renewal->status)->replace('_',' ')->title() }} · {{ optional($renewal->expiry_date)->format('d M Y') }}</span></a>@empty<div class="erp-empty"><strong>No renewals</strong></div>@endforelse</div></div>
    <div x-show="tab === 'activity'" class="erp-panel"><div class="erp-panel-heading"><div><h2>Audit history</h2><p>Profile and document events.</p></div></div><div class="mt-4 divide-y">@forelse($activity as $event)<div class="flex justify-between py-3 text-xs"><span><strong>{{ str($event->action)->replace('.',' ')->title() }}</strong><small class="block">{{ $event->user?->name??'System' }}</small></span><time>{{ optional($event->created_at)->format('d M Y H:i') }}</time></div>@empty<div class="erp-empty"><strong>No audit events</strong></div>@endforelse</div></div>

    <!-- Tab 5: Staff Notes (Requirement 29) -->
    <div x-show="tab === 'notes'" class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
        <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-2">
            <h3 class="font-bold text-slate-900 dark:text-white uppercase tracking-wider text-xs">Staff Internal Notes</h3>
            <button @click="noteModal = true" class="px-3 py-1 bg-slate-900 text-white font-bold text-xs rounded-xl">+ Add Internal Note</button>
        </div>

        <div class="space-y-3">
            @forelse($customer->notes as $note)
                <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-700 space-y-1">
                    <div class="flex items-center justify-between">
                        <span class="font-bold text-slate-900 dark:text-white">{{ $note->title }}</span>
                        <span class="text-[10px] text-slate-400">{{ $note->created_at->diffForHumans() }} by {{ $note->user->name }}</span>
                    </div>
                    <p class="text-slate-600 dark:text-slate-300">{{ $note->note }}</p>
                </div>
            @empty
                <p class="text-slate-400 text-center py-6">No staff internal notes recorded for this customer.</p>
            @endforelse
        </div>
    </div>

    <!-- Upload Document Modal -->
    <div x-show="docModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-4 text-xs">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Upload Document to Vault</h3>
            <form action="{{ route('app.customers.documents.store', $customer->id) }}" method="POST" enctype="multipart/form-data" class="space-y-3">
                @csrf
                <div>
                    <label class="block font-semibold mb-1">Document Type</label>
                    <select name="document_type_id" class="erp-input"> <option value="">Custom document</option>@foreach($documentTypes as $type)<option value="{{ $type->id }}">{{ $type->name_en }}</option>@endforeach</select>
                </div>
                <div>
                    <label class="block font-semibold mb-1">Document Name *</label>
                    <input type="text" name="document_name" required placeholder="Passport Copy Front & Back" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Document Number</label>
                    <input type="text" name="document_number" placeholder="Z987654" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl font-mono">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Attachment File *</label>
                    <input type="file" name="attachment" required class="w-full text-slate-500">
                </div>
                <div class="grid grid-cols-2 gap-2"><label>Issue date<input type="date" name="issue_date" class="erp-input mt-1"></label><label>Expiry date<input type="date" name="expiry_date" class="erp-input mt-1"></label></div>
                <div class="grid grid-cols-2 gap-2"><input name="issuing_country" placeholder="Issuing country" class="erp-input"><input name="issuing_authority" placeholder="Issuing authority" class="erp-input"></div>
                <textarea name="notes" placeholder="Private notes" class="erp-input"></textarea><label class="flex items-center gap-2"><input type="checkbox" name="reminder_enabled" value="1" checked>Enable expiry reminders</label>
                <div class="flex justify-end space-x-2 rtl:space-x-reverse pt-2">
                    <button type="button" @click="docModal = false" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold rounded-xl">Cancel</button>
                    <button type="submit" class="px-5 py-2 bg-sky-600 text-white font-bold rounded-xl">Upload Document</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Staff Note Modal -->
    <div x-show="noteModal" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-50 flex items-center justify-center p-4" x-cloak>
        <div class="bg-white dark:bg-slate-800 rounded-3xl max-w-md w-full p-6 border border-slate-200 dark:border-slate-700 shadow-2xl space-y-4 text-xs">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Add Internal Staff Note</h3>
            <form action="{{ route('app.customers.store_note', $customer->id) }}" method="POST" class="space-y-3">
                @csrf
                <div>
                    <label class="block font-semibold mb-1">Note Title</label>
                    <input type="text" name="title" placeholder="Special Request / Follow-up" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl">
                </div>
                <div>
                    <label class="block font-semibold mb-1">Note Content *</label>
                    <textarea name="note" required rows="3" placeholder="Customer prefers WhatsApp communication..." class="w-full p-3 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl"></textarea>
                </div>
                <div class="flex justify-end space-x-2 rtl:space-x-reverse pt-2">
                    <button type="button" @click="noteModal = false" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold rounded-xl">Cancel</button>
                    <button type="submit" class="px-5 py-2 bg-slate-900 text-white font-bold rounded-xl">Save Note</button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection