@extends('layouts.frontend')

@section('title', $hospital->name)
@section('description', $hospital->description ?? 'Learn more about ' . $hospital->name)

@section('content')
<!-- Header -->
<section class="bg-gradient-to-r from-primary-600 to-primary-800 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center gap-4">
            @if($hospital->image)
            <img src="{{ asset($hospital->image) }}" alt="{{ $hospital->name }}" class="w-20 h-20 rounded-xl object-cover">
            @else
            <div class="w-20 h-20 bg-white/20 rounded-xl flex items-center justify-center">
                <i class="fas fa-hospital text-3xl text-white"></i>
            </div>
            @endif
            <div>
                <h1 class="text-3xl font-bold text-white">{{ $hospital->name }}</h1>
                @if($hospital->address)
                <p class="text-primary-100 flex items-center gap-1 mt-1">
                    <i class="fas fa-map-marker-alt"></i>
                    {{ $hospital->address }}
                </p>
                @endif
            </div>
        </div>
    </div>
</section>

<!-- Content -->
<section class="py-8 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <!-- Main Content -->
            <div class="lg:col-span-2">
                @if($hospital->description)
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">About</h2>
                    <p class="text-gray-600">{{ $hospital->description }}</p>
                </div>
                @endif

                @if($hospital->services)
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Services</h2>
                    <div class="flex flex-wrap gap-2">
                        @foreach($hospital->services as $service)
                        <span class="px-3 py-1 bg-primary-50 text-primary-700 rounded-full text-sm">{{ $service }}</span>
                        @endforeach
                    </div>
                </div>
                @endif

                <div class="bg-white rounded-xl shadow-sm p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Our Doctors</h2>
                    @if($hospital->doctors->count() > 0)
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach($hospital->doctors as $doctor)
                        <div class="flex items-center gap-3 p-3 border border-gray-100 rounded-lg">
                            @if($doctor->image)
                            <img src="{{ asset($doctor->image) }}" alt="{{ $doctor->name }}" class="w-12 h-12 rounded-full object-cover">
                            @else
                            <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
                                <i class="fas fa-user-md text-primary-400"></i>
                            </div>
                            @endif
                            <div class="flex-1 min-w-0">
                                <h3 class="font-medium text-gray-800 truncate">{{ $doctor->name }}</h3>
                                <p class="text-sm text-gray-500">{{ $doctor->specialties ? implode(', ', (array)$doctor->specialties) : 'General' }}</p>
                            </div>
                            <a href="{{ route('book', ['doctor' => $doctor->id]) }}" class="px-3 py-1 bg-primary-600 text-white text-sm rounded-lg hover:bg-primary-700">Book</a>
                        </div>
                        @endforeach
                    </div>
                    @else
                    <p class="text-gray-500">No doctors available at this hospital.</p>
                    @endif
                </div>
            </div>

            <!-- Sidebar -->
            <div>
                <div class="bg-white rounded-xl shadow-sm p-6 sticky top-24">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Contact Information</h3>
                    <div class="space-y-4">
                        @if($hospital->contact)
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-primary-50 rounded-lg flex items-center justify-center">
                                <i class="fas fa-phone text-primary-600"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">Phone</p>
                                <p class="font-medium text-gray-800">{{ $hospital->contact }}</p>
                            </div>
                        </div>
                        @endif

                        @if($hospital->email)
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-primary-50 rounded-lg flex items-center justify-center">
                                <i class="fas fa-envelope text-primary-600"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">Email</p>
                                <p class="font-medium text-gray-800">{{ $hospital->email }}</p>
                            </div>
                        </div>
                        @endif

                        @if($hospital->website)
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 bg-primary-50 rounded-lg flex items-center justify-center">
                                <i class="fas fa-globe text-primary-600"></i>
                            </div>
                            <div>
                                <p class="text-sm text-gray-500">Website</p>
                                <a href="{{ $hospital->website }}" target="_blank" class="font-medium text-primary-600 hover:underline">{{ $hospital->website }}</a>
                            </div>
                        </div>
                        @endif
                    </div>

                    <a href="{{ route('hospitals.index') }}" class="mt-6 w-full px-4 py-3 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition text-center block">
                        Back to Hospitals
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection