@extends('layouts.frontend')

@section('title', 'Find Doctors')
@section('description', 'Search and find the best doctors near you. Browse by specialty, hospital, or location.')

@section('content')
<!-- Header -->
<section class="bg-gradient-to-r from-primary-600 to-primary-800 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl md:text-4xl font-bold text-white mb-4">Find Doctors</h1>
        <p class="text-primary-100">Browse our network of qualified medical professionals</p>
    </div>
</section>

<!-- Filters & Results -->
<section class="py-8 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Search & Filter Bar -->
        <form method="GET" class="bg-white rounded-xl shadow-sm p-4 mb-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="md:col-span-2">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search by name, specialty..." 
                        class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
                </div>
                <div>
                    <select name="specialty" class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <option value="">All Specialties</option>
                        @foreach($specialties as $specialty)
                        <option value="{{ $specialty }}" {{ request('specialty') === $specialty ? 'selected' : '' }}>{{ $specialty }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <button type="submit" class="w-full px-4 py-3 bg-primary-600 text-white font-medium rounded-lg hover:bg-primary-700 transition">
                        <i class="fas fa-search mr-2"></i>Search
                    </button>
                </div>
            </div>
        </form>

        <!-- Results Count -->
        <p class="text-gray-600 mb-6">Showing {{ $doctors->count() }} of {{ $doctors->total() }} doctors</p>

        <!-- Doctor Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($doctors as $doctor)
            <div class="bg-white rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden border border-gray-100">
                <div class="p-5">
                    <div class="flex gap-4">
                        <div class="flex-shrink-0">
                            @if($doctor->image)
                            <img src="{{ asset($doctor->image) }}" alt="{{ $doctor->name }}" class="w-20 h-20 rounded-xl object-cover">
                            @else
                            <div class="w-20 h-20 bg-gradient-to-br from-primary-100 to-primary-200 rounded-xl flex items-center justify-center">
                                <i class="fas fa-user-md text-2xl text-primary-400"></i>
                            </div>
                            @endif
                        </div>
                        <div class="flex-1 min-w-0">
                            <h3 class="font-semibold text-gray-800 mb-1 truncate">{{ $doctor->name }}</h3>
                            <p class="text-primary-600 text-sm mb-1">{{ $doctor->specialties ? implode(', ', (array)$doctor->specialties) : 'General' }}</p>
                            @if($doctor->hospital)
                            <p class="text-gray-500 text-sm flex items-center gap-1">
                                <i class="fas fa-hospital text-gray-400 text-xs"></i>
                                {{ $doctor->hospital->name }}
                            </p>
                            @endif
                        </div>
                    </div>
                    
                    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between">
                        <div>
                            <span class="text-lg font-bold text-gray-800">${{ number_format($doctor->fee, 0) }}</span>
                            <span class="text-gray-500 text-sm">/visit</span>
                        </div>
                        <a href="{{ route('book', ['doctor' => $doctor->id]) }}" class="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 transition">
                            Book Now
                        </a>
                    </div>
                </div>
            </div>
            @empty
            <div class="col-span-full text-center py-12">
                <i class="fas fa-user-md text-6xl text-gray-200 mb-4"></i>
                <p class="text-gray-500 text-lg">No doctors found matching your criteria.</p>
                <a href="{{ route('doctors.index') }}" class="inline-block mt-4 text-primary-600 hover:text-primary-700">Clear filters</a>
            </div>
            @endforelse
        </div>

        <!-- Pagination -->
        @if($doctors->hasPages())
        <div class="mt-8">
            {{ $doctors->links() }}
        </div>
        @endif
    </div>
</section>
@endsection