@extends('layouts.main-app')
@section('title', 'Find a Doctor')
@section('content')

@include('layouts.navbar', [
    'headerTitle' => '',
    'headerDescription' => ''
])

<div class="container max-w-screen-lg mx-auto bg-white px-4 my-20 inter-font">
    <span class="text-sm text-blue-500">Doctors</span>    
    <h1 class="mb-4 text-3xl font-normal text-start text-gray-800">Meet Our Specialists</h1>

    
    <div class="shadow-inner relative drop-shadow-lg text-center  border-2 rounded-xl px-10 py-10 ">
        
        
        <a href="{{route('doctorSearch')}}" class="absolute top-8  left-10  p-1 px-4 rounded-full hover:scale-105 duration-200 transition-all text-blue-600  shadow-inner drop-shadow-lg ">
            ← Back 
        </a>
        
        <div class="text-blue-600 text-md font-semibold ">Find A Doctor</div>
   
        <h1 class="mb-4 text-lg sm:text-xl md:text-2xl lg:text-3xl font-normal text-gray-800">
            Easily Find the Right Doctor for Your Needs 
        </h1>        
        <div class="h-[2px] max-w-screen-xl mb-6 mx-12 bg-blue-500 rounded"></div>

        <!-- Search Results -->
        @if($doctors->isNotEmpty())
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-6">
                @foreach($doctors as $doctor)
                    <div class="relative bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-200 flex flex-col items-center">
                        <div class="relative w-full bg-gray-100 flex justify-center items-center">
                            <img src="{{ asset($doctor->image) }}" alt="Doctor Image" class="object-cover shadow-md h-64 w-full hover:scale-110 transition-all duration-500">
                        </div>
                        <div class="p-4 text-start flex flex-col items-center w-full">
                            <div class="flex items-center justify-start space-x-2 w-full relative">
                                <span class="text-xs font-semibold text-white p-2 bg-{{ $doctor->gender === 'Male' ? 'blue' : 'pink' }}-500 flex items-center">
                                    @if($doctor->gender === 'Male')
                                        <img src="{{ asset('Group 6.svg') }}" alt="" class="size-5">
                                    @else
                                        <img src="{{ asset('female.svg') }}" alt="" class="size-5">
                                    @endif
                                </span>
                            </div>
                            <span class="text-sm text-start w-full mt-1">{{ $doctor->profession }}</span>
                            <span class="text-sm text-start w-full mt-1 hidden">{{ $doctor->specialization }}</span>
                            <span class="text-sm text-start w-full mt-1 hidden">{{ $doctor->sub_specialization }}</span>
                            <h3 class="text-lg font-semibold w-full text-start break-words">Dr. {{ $doctor->name }}</h3>
                            <a   href="{{ route('doctors.details', ['id' => $doctor->id]) }}"  class="mt-4 bg-blue-800/95 text-white text-center px-6 py-2 rounded-full hover:bg-blue-700 hover:scale-105 transition shadow-lg w-full max-w-[200px]">
                                View Details →
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>



            <!-- Pagination Links -->
            <div class="mt-6 flex justify-center">
                {{ $doctors->appends(request()->query())->links('vendor.pagination.tailwind') }}
            </div>

        @else
            <div class="text-center mt-8 flex justify-center items-center flex-col">
                <img src="{{ asset('assets/doctors/No Result Avatar.png') }}" alt="" class="animate-floating">
                <p class="text-sm text-gray-500">No doctors found matching your search criteria.</p>
            </div>
        @endif

        <style>
            @keyframes floating {
                0% { transform: translateY(0); }
                50% { transform: translateY(-10px); }
                100% { transform: translateY(0); }
            }
            .animate-floating {
                animation: floating 3s ease-in-out infinite;
            }
        </style>
        
    </div>
</div>

@endsection