@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">
                <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>
        </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="grid grid-cols-1 md:grid-cols-2 gap-4">
            @forelse($customer->documents as $doc)
                <div class="p-4 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="font-bold text-slate-900 dark:text-white block">{{ $doc->document_name }}</span>
                        <span class="text-[10px] font-mono text-slate-400">Ver v{{ $doc->version }} • {{ $doc->document_number ?? 'No #' }}</span>
                    </div>
                    <span class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-700">Valid</span>
                </div>
            @empty
                <p class="text-slate-400 text-center py-6 col-span-2">No documents stored in vault yet.</p>
            @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 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="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
