@extends('layouts.app')

@section('title', 'Front Desk Phone-First Search')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <!-- Search Hero Header (Requirements 4-6, 79) -->
    <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-4">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Front Desk Customer Search</h1>
            <p class="text-xs text-slate-500">Phone-first search by UAE Mobile Number, WhatsApp, Passport Number, Emirates ID, UID, or Name.</p>
        </div>

        <form action="{{ route('app.customers.search') }}" method="GET" class="relative">
            <input type="text" name="q" value="{{ $query }}" placeholder="Enter mobile (e.g. 0501234567), Passport, EID (784-xxxx...), or Name..." class="w-full px-5 py-4 pl-12 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-2xl font-bold text-sm text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:border-sky-500 shadow-inner">
            <svg class="w-6 h-6 text-slate-400 absolute left-4 top-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
            <button type="submit" class="absolute right-3 top-2.5 px-5 py-2 bg-sky-600 hover:bg-sky-700 text-white font-bold text-xs rounded-xl shadow-sm">Search</button>
        </form>
    </div>

    <!-- Results Section (Requirements 79-81) -->
    @if(!empty($query))
        <div class="space-y-6 text-xs">
            <div class="flex items-center justify-between text-slate-500 font-semibold px-1">
                <span>Search results for "<strong>{{ $query }}</strong>" (Normalized: <code>{{ $results['normalized_mobile'] }}</code>)</span>
                <span>Found {{ count($results['customers']) }} Customers, {{ count($results['companies']) }} Companies</span>
            </div>

            <!-- Customer Search Results Cards -->
            <div class="space-y-3">
                @forelse($results['customers'] as $customer)
                    <div class="bg-white dark:bg-slate-800 rounded-3xl p-5 border border-slate-200 dark:border-slate-700/60 shadow-sm flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                        <div class="flex items-center space-x-4 rtl:space-x-reverse">
                            <div class="w-12 h-12 rounded-2xl bg-sky-500/20 text-sky-600 dark:text-sky-300 flex items-center justify-center font-extrabold text-base">
                                {{ strtoupper(substr($customer->first_name, 0, 1)) }}
                            </div>
                            <div>
                                <div class="flex items-center space-x-2 rtl:space-x-reverse">
                                    <h3 class="font-extrabold text-slate-900 dark:text-white text-sm">{{ $customer->full_name_en }}</h3>
                                    @if($customer->is_vip)
                                        <span class="px-2 py-0.5 rounded bg-amber-100 dark:bg-amber-950 text-amber-700 dark:text-amber-300 font-bold text-[10px]">VIP</span>
                                    @endif
                                </div>
                                <div class="text-[11px] text-slate-500 font-mono mt-0.5">
                                    Code: {{ $customer->customer_code }} • Mobile: {{ $customer->contact ? $customer->contact->primary_mobile : 'N/A' }} • Nationality: {{ $customer->nationality }}
                                </div>
                            </div>
                        </div>

                        <div class="flex items-center space-x-2 rtl:space-x-reverse">
                            <a href="{{ route('app.customers.show', $customer->id) }}" class="px-4 py-2 bg-sky-600 hover:bg-sky-700 text-white font-bold text-xs rounded-xl shadow-sm">
                                Open Profile 360 ➔
                            </a>
                        </div>
                    </div>
                @empty
                    <!-- No Customer Found (Requirement 80) -->
                    <div class="bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800 rounded-3xl p-8 text-center space-y-4">
                        <div class="text-amber-800 dark:text-amber-200 font-bold">No matching customer profile found for "{{ $query }}".</div>
                        <a href="{{ route('app.customers.create') }}?mobile={{ urlencode($query) }}" class="inline-block px-6 py-2.5 bg-amber-600 text-white font-extrabold rounded-xl shadow-md">
                            + Create New Customer Profile
                        </a>
                    </div>
                @endforelse
            </div>
        </div>
    @endif

</div>
@endsection