@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 sm:px-6 my-10 sm:my-20 inter-font">
    <div class="flex items-center gap-2 mb-6">
        <span class="text-sm text-blue-500 font-medium">Doctors</span>
        <span class="text-gray-300">/</span>
        <span class="text-sm text-gray-600">Details</span>
    </div>
    
    <h1 class="mb-8 text-2xl font-bold text-start text-gray-800">Meet Our Specialists</h1>
    
    <div class="shadow-lg rounded-2xl overflow-hidden border border-gray-100">
        <div class="bg-gradient-to-r from-blue-50 to-white p-6 sm:p-10">
            <a href="{{route('docsearch')}}" class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 transition-colors duration-200">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                <span>Back to Search</span>
            </a>
            
            <div class="mt-6 text-center">
                <a href="{{ route('doctorSearch') }}" class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 transition-colors duration-200">
                    <span class="text-md font-semibold">Find A Doctor</span>
                    <svg class="w-5 h-5 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/>
                    </svg>
                </a>
                <h1 class="mt-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>

            <div class="h-[2px] max-w-screen-xl my-8 bg-gradient-to-r from-transparent via-blue-500 to-transparent"></div>
            
            <div class="max-w-5xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
                <div class="flex flex-col md:flex-row">
                    <!-- Left Card -->
                    <div class="w-full md:w-1/3 bg-gradient-to-b from-blue-50 to-white p-6">
                        <div class="aspect-square rounded-lg overflow-hidden shadow-md">
                            <img src="{{ asset($doctor->image) }}" alt="{{ $doctor->name }}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300">
                        </div>
                        <div class="mt-6 text-center">
                            <span class="inline-block px-4 py-1 rounded-full bg-blue-100 text-blue-600 text-xs font-semibold">{{$doctor->profession}}</span>
                            <h2 class="mt-3 text-xl font-bold text-gray-800">Dr. {{$doctor->name}}</h2>
                        </div>
                    </div>

                    <!-- Right Details Section -->
                    <div class="w-full md:w-2/3 p-6 md:p-8 bg-white">
                        <div class="flex items-center gap-3 mb-6">
                            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">Details</h1>
                            <div class="h-[2px] flex-grow bg-blue-100"></div>
                        </div>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                            <div class="flex flex-col gap-1">
                                <span class="text-sm font-medium text-gray-500">Name</span>
                                <span class="text-gray-800">Dr. {{ $doctor->name }}</span>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span class="text-sm font-medium text-gray-500">Clinic Room Number</span>
                                <span class="text-gray-800">{{ $doctor->room }}</span>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span class="text-sm font-medium text-gray-500">Clinic Hours</span>
                                <span class="text-blue-600 font-medium">{{ $doctor->clinic_hours }}</span>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span class="text-sm font-medium text-gray-500">Telephone Number</span>
                                <span class="text-gray-800">{{ $doctor->telephone }}</span>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span class="text-sm font-medium text-gray-500">Specialization</span>
                                <span class="text-gray-800">{{ $doctor->specialilization }}</span>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span class="text-sm font-medium text-gray-500">Sub-specialization</span>
                                <span class="text-gray-800">{{ $doctor->sub_specialilization }}</span>
                            </div>
                            <div class="flex flex-col gap-1">
                                <span class="text-sm font-medium text-gray-500">Language</span>
                                <span class="text-gray-800">{{ $doctor->language }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection