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

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

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

        <div
            class="relative px-4 py-6 text-center border-2 shadow-inner drop-shadow-lg rounded-xl sm:px-6 md:px-10 sm:py-8 md:py-10">
            <a href="{{ route('doctorSearch') }}"
                class="absolute p-1 px-3 text-sm text-blue-600 transition-all duration-200 rounded-full shadow-inner top-4 sm:top-6 md:top-8 left-4 sm:left-6 md:left-10 sm:px-4 hover:scale-105 drop-shadow-lg sm:text-base">
                ← Back
            </a>

            <div class="mt-8 text-sm font-semibold text-blue-600 sm:text-md sm:mt-0">Find A Doctor</div>

            <h1 class="mb-4 text-base font-normal text-gray-800 sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
                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 ($mainDoctor)
                <!-- Main Doctor Display -->
                <div class="mb-10">
                    <h2 class="mb-4 text-lg font-semibold text-gray-800 sm:text-xl md:text-2xl text-start">Searched Doctor
                    </h2>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 sm:gap-6">
                        <div
                            class="relative flex flex-col items-center overflow-hidden transition-shadow duration-300 bg-white border border-gray-200 shadow-lg rounded-2xl hover:shadow-xl">
                            <div class="relative flex items-center justify-center w-full bg-gray-100">
                                <img src="{{ asset($mainDoctor->image) }}" alt="Doctor Image"
                                    class="object-cover w-full h-48 transition-all duration-500 shadow-md sm:h-56 md:h-64 hover:scale-105">
                            </div>
                            <div class="flex flex-col items-center w-full p-4 text-start">
                                <div class="relative flex items-center justify-start w-full space-x-2">
                                    <span
                                        class="text-xs font-semibold text-white p-2 bg-{{ $mainDoctor->gender === 'Male' ? 'blue' : 'pink' }}-500 flex items-center">
                                        @if ($mainDoctor->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="w-full mt-1 text-xs sm:text-sm text-start">{{ $mainDoctor->profession }}</span>
                                <span
                                    class="w-full mt-1 text-xs text-blue-600 sm:text-sm text-start">{{ $mainDoctor->language }}</span>
                                <h3 class="w-full text-base font-semibold break-words sm:text-lg text-start">Dr.
                                    {{ $mainDoctor->name }}</h3>
                                <a href="{{ route('doctors.details', ['id' => $mainDoctor->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>
                    </div>
                </div>
            @endif

            @if ($suggestions->isNotEmpty())
                <!-- Suggestions -->
                <h2 class="mb-4 text-lg font-semibold text-gray-800 sm:text-xl md:text-2xl text-start">Similar Specialists
                </h2>
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 sm:gap-6">
                    @foreach ($suggestions as $doctor)
                        <div
                            class="relative flex flex-col items-center overflow-hidden transition-shadow duration-300 bg-white border border-gray-200 shadow-lg rounded-2xl hover:shadow-xl">
                            <div class="relative flex items-center justify-center w-full bg-gray-100">
                                <img src="{{ asset($doctor->image) }}" alt="Doctor Image"
                                    class="object-cover w-full h-48 transition-all duration-500 shadow-md sm:h-56 md:h-64 hover:scale-105">
                            </div>
                            <div class="flex flex-col items-center w-full p-4 text-start">
                                <div class="relative flex items-center justify-start w-full space-x-2">
                                    <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="w-full mt-1 text-xs sm:text-sm text-start">{{ $doctor->profession }}</span>
                                <span
                                    class="w-full mt-1 text-xs text-blue-600 sm:text-sm text-start">{{ $doctor->language }}</span>
                                <h3 class="w-full text-base font-semibold break-words sm:text-lg text-start">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 centered below the grid -->
                @if ($suggestions->hasPages())
                    <div class="flex justify-center mt-8">
                        {{ $suggestions->links('vendor.pagination.tailwind') }}
                    </div>
                @endif

            @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