@extends('crm.layouts.app')

@section('title', 'Search Results')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Page Header with Search -->
    <div class="mb-8">
        <div class="sm:flex sm:items-center sm:justify-between">
            <div class="flex-1 max-w-2xl">
                <h1 class="text-3xl font-bold text-gray-900 mb-4">Search</h1>

                <!-- Search Form -->
                <form method="GET" action="{{ route('crm.search') }}" class="relative">
                    <div class="relative rounded-md shadow-sm">
                        <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
                            <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
                            </svg>
                        </div>
                        <input
                            type="text"
                            name="q"
                            value="{{ $query }}"
                            placeholder="Search clients, appointments..."
                            autofocus
                            class="block w-full rounded-md border-0 py-3 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                        />
                        <div class="absolute inset-y-0 right-0 flex items-center pr-2">
                            @if($query)
                                <a href="{{ route('crm.search') }}" class="mr-2 text-gray-400 hover:text-gray-500">
                                    <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                        <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" />
                                    </svg>
                                </a>
                            @endif
                            <button
                                type="submit"
                                class="rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
                            >
                                Search
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @if(empty($query))
        <!-- Empty State -->
        <div class="text-center py-12">
            <svg class="mx-auto h-12 w-12 text-gray-400" 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>
            <h3 class="mt-2 text-sm font-medium text-gray-900">Search your CRM</h3>
            <p class="mt-1 text-sm text-gray-500">Find clients and appointments by name, email, phone, or notes.</p>
        </div>
    @else
        <!-- Results Summary -->
        <div class="mb-6">
            <p class="text-sm text-gray-700">
                Found <span class="font-semibold">{{ $clients->count() + $appointments->count() }}</span> results for
                <span class="font-semibold">"{{ $query }}"</span>
            </p>
        </div>

        <div class="space-y-6">
            <!-- Clients Results -->
            @if($clients->count() > 0)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">
                        Clients ({{ $clients->count() }})
                    </h2>
                </div>
                <ul role="list" class="divide-y divide-gray-200">
                    @foreach($clients as $client)
                    <li class="px-6 py-4 hover:bg-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center min-w-0 flex-1">
                                <div class="h-10 w-10 flex-shrink-0">
                                    <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center">
                                        <span class="text-sm font-medium text-indigo-600">
                                            {{ substr($client->name, 0, 1) }}
                                        </span>
                                    </div>
                                </div>
                                <div class="ml-4 flex-1 min-w-0">
                                    <a href="{{ route('crm.clients.show', $client) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-900">
                                        {{ $client->name }}
                                    </a>
                                    <div class="flex items-center gap-4 mt-1">
                                        @if($client->email)
                                            <p class="text-sm text-gray-500 truncate flex items-center">
                                                <svg class="mr-1.5 h-4 w-4 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                                    <path d="M3 4a2 2 0 00-2 2v1.161l8.441 4.221a1.25 1.25 0 001.118 0L19 7.162V6a2 2 0 00-2-2H3z" />
                                                    <path d="M19 8.839l-7.77 3.885a2.75 2.75 0 01-2.46 0L1 8.839V14a2 2 0 002 2h14a2 2 0 002-2V8.839z" />
                                                </svg>
                                                {{ $client->email }}
                                            </p>
                                        @endif
                                        @if($client->phone)
                                            <p class="text-sm text-gray-500 flex items-center">
                                                <svg class="mr-1.5 h-4 w-4 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                                    <path fill-rule="evenodd" d="M2 3.5A1.5 1.5 0 013.5 2h1.148a1.5 1.5 0 011.465 1.175l.716 3.223a1.5 1.5 0 01-1.052 1.767l-.933.267c-.41.117-.643.555-.48.95a11.542 11.542 0 006.254 6.254c.395.163.833-.07.95-.48l.267-.933a1.5 1.5 0 011.767-1.052l3.223.716A1.5 1.5 0 0118 15.352V16.5a1.5 1.5 0 01-1.5 1.5H15c-1.149 0-2.263-.15-3.326-.43A13.022 13.022 0 012.43 8.326 13.019 13.019 0 012 5V3.5z" clip-rule="evenodd" />
                                                </svg>
                                                {{ $client->phone }}
                                            </p>
                                        @endif
                                    </div>
                                    @if($client->notes)
                                        <p class="mt-1 text-sm text-gray-500 line-clamp-2">{{ $client->notes }}</p>
                                    @endif
                                </div>
                            </div>
                            <div class="ml-4 flex-shrink-0">
                                <a href="{{ route('crm.clients.show', $client) }}" class="font-medium text-indigo-600 hover:text-indigo-500">
                                    View
                                </a>
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
            @endif

            <!-- Appointments Results -->
            @if($appointments->count() > 0)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">
                        Appointments ({{ $appointments->count() }})
                    </h2>
                </div>
                <ul role="list" class="divide-y divide-gray-200">
                    @foreach($appointments as $appointment)
                    <li class="px-6 py-4 hover:bg-gray-50">
                        <div class="flex items-center justify-between">
                            <div class="min-w-0 flex-1">
                                <div class="flex items-center gap-3">
                                    <a href="{{ route('crm.appointments.edit', $appointment) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-900">
                                        {{ $appointment->client->name }}
                                    </a>
                                    @php
                                        $statusColors = [
                                            'pending' => 'bg-yellow-50 text-yellow-700 ring-yellow-600/20',
                                            'confirmed' => 'bg-blue-50 text-blue-700 ring-blue-600/20',
                                            'completed' => 'bg-green-50 text-green-700 ring-green-600/20',
                                            'cancelled' => 'bg-red-50 text-red-700 ring-red-600/20',
                                        ];
                                    @endphp
                                    <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ $statusColors[$appointment->status] ?? 'bg-gray-50 text-gray-700 ring-gray-600/20' }}">
                                        {{ ucfirst($appointment->status) }}
                                    </span>
                                </div>
                                <div class="mt-1 flex items-center gap-4 text-sm text-gray-500">
                                    <span class="flex items-center">
                                        <svg class="mr-1.5 h-4 w-4 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                                            <path fill-rule="evenodd" d="M5.75 2a.75.75 0 01.75.75V4h7V2.75a.75.75 0 011.5 0V4h.25A2.75 2.75 0 0118 6.75v8.5A2.75 2.75 0 0115.25 18H4.75A2.75 2.75 0 012 15.25v-8.5A2.75 2.75 0 014.75 4H5V2.75A.75.75 0 015.75 2zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75z" clip-rule="evenodd" />
                                        </svg>
                                        {{ $appointment->scheduled_at->format('M d, Y g:i A') }}
                                    </span>
                                    @if($appointment->price)
                                        <span>${{ number_format($appointment->price, 2) }}</span>
                                    @endif
                                </div>
                                @if($appointment->notes)
                                    <p class="mt-1 text-sm text-gray-500 line-clamp-2">{{ $appointment->notes }}</p>
                                @endif
                            </div>
                            <div class="ml-4 flex-shrink-0">
                                <a href="{{ route('crm.appointments.edit', $appointment) }}" class="font-medium text-indigo-600 hover:text-indigo-500">
                                    View
                                </a>
                            </div>
                        </div>
                    </li>
                    @endforeach
                </ul>
            </div>
            @endif

            <!-- No Results -->
            @if($clients->count() === 0 && $appointments->count() === 0)
            <div class="text-center py-12 bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <h3 class="mt-2 text-sm font-medium text-gray-900">No results found</h3>
                <p class="mt-1 text-sm text-gray-500">Try a different search term or check your spelling.</p>
            </div>
            @endif
        </div>
    @endif
</div>
@endsection