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

@include('layouts.navbar', [
    'headerTitle' => 'Find a Doctor',
    'headerDescription' => 'Home > Find a Doctor'
])



<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-2xl font-bold text-start text-gray-800">Meet Our Specialists</h1>
    
    <div class="shadow-inner drop-shadow-lg text-center relative border-2 rounded-xl px-10 py-10">
        
        <a href="{{route('docsearch')}}" 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>
        
        <a href="{{ route('doctorSearch') }}" class="text-blue-600 text-md font-semibold animate-pulse">Find A Doctor</a>
        <h1 class="mb-4 text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold 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>
        <div class="max-w-5xl mx-auto my-10 p-6 bg-white shadow-lg rounded-lg flex flex-col md:flex-row gap-10">
        <!-- Left Card -->
        <div class="w-full md:w-1/3 bg-white rounded-lg shadow-md border relative flex flex-col items-center pb-4">
            <img src="{{ asset($doctor->image)  }}" alt="Hospital Logo" class=" object-cover">
            <div class="w-full mt-4 text-center">
                <span class="text-xs font-semibold text-blue-500">{{$doctor->profession}}</span>
                <h2 class="text-lg font-bold mt-1">{{$doctor->name}}</h2>
            </div>
            <!-- <a href="{{ route('patientsPortalLogin') }}" class="mt-6 bg-blue-600 text-white px-6 py-2 rounded-full hover:bg-blue-700 transition w-full max-w-[200px]">
                 Book Now  →
            </a> -->
        </div>

        <!-- Right Details Section -->
        <div class="w-full md:w-2/3">
            <h1 class="text-2xl text-start font-bold mb-2">Details</h1>
            <hr class="mb-4 border-blue-500 w-16">
            <div class="grid grid-cols-2 gap-4 text-sm text-start">
                <span class="font-semibold text-gray-600">Name</span>
                <span>Dr. {{ $doctor->name }}</span>
                <span class="font-semibold text-gray-600">Clinic Room Number</span>
                <span>{{ $doctor->room }}</span>
                <span class="font-semibold text-gray-600">Clinic Hours</span>
                <span class="text-blue-500 font-semibold">{{ $doctor->clinic_hours }}</span>
                <span class="font-semibold text-gray-600">Telephone Number</span>
                <span>{{ $doctor->telephone }}</span>
                <span class="font-semibold text-gray-600">Specialization</span>
                <span>{{ $doctor->specialilization }}</span>
                <span class="font-semibold text-gray-600">Sub-specialization</span>
                <span>{{ $doctor->sub_specialilization }}</span>
            </div>
        </div>
    </div>
        
    </div>
</div>

@endsection