@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-10 sm:my-16 md:my-20 inter-font">
    <span class="text-sm text-blue-500">Doctors</span>    
    <h1 class="mb-4 text-2xl sm: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-4 sm:px-6 md:px-10 py-6 sm:py-8 md:py-10">
        <a href="{{route('doctorSearch')}}" class="absolute top-4 sm:top-6 md:top-8 left-4 sm:left-6 md:left-10 p-1 px-3 sm:px-4 rounded-full hover:scale-105 duration-200 transition-all text-blue-600 shadow-inner drop-shadow-lg text-sm sm:text-base">
            ← Back 
        </a>
        
        <div class="text-blue-600 text-sm sm:text-md font-semibold mt-8 sm:mt-0">Find A Doctor</div>
   
        <h1 class="mb-4 text-base sm:text-lg md:text-xl lg:text-2xl xl: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-4 sm:mx-8 md:mx-12 bg-blue-500 rounded"></div>

        <!-- Search Results -->
        @if($doctors->isNotEmpty())
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm: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 hover:shadow-xl transition-shadow duration-300">
                        <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-48 sm:h-56 md:h-64 w-full hover:scale-105 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-4 sm:size-5">
                                    @else
                                        <img src="{{ asset('female.svg') }}" alt="" class="size-4 sm:size-5">
                                    @endif
                                </span>
                            </div>
                            <span class="text-xs sm:text-sm text-start w-full mt-1">{{ $doctor->profession }}</span>
                            <span class="text-xs sm:text-sm text-start w-full mt-1 text-blue-600">{{ $doctor->language }}</span>
                            <h3 class="text-base sm: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-4 sm:px-6 py-2 rounded-full hover:bg-blue-700 hover:scale-105 transition shadow-lg w-full max-w-[180px] sm:max-w-[200px] text-sm sm:text-base">
                                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 w-48 sm:w-64 md:w-72">
                <p class="text-sm sm:text-base text-gray-500 mt-4">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