@extends('layouts.app')
@section('title', 'Contact & Appointment | Dr. Rajan Shah')

@section('content')
<div class="bg-gray-50 py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-base text-teal-600 font-semibold tracking-wide uppercase">Get In Touch</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Contact & Appointments
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
                Schedule your consultation with Dr. Rajan Shah at Everest Hospital.
            </p>
        </div>

        <div class="bg-white rounded-2xl shadow-xl overflow-hidden lg:grid lg:grid-cols-2">
            <!-- Contact Information -->
            <div class="bg-teal-700 py-10 px-6 sm:px-10 xl:p-12 text-white">
                <h3 class="text-2xl font-bold mb-6 text-white">Clinic Details</h3>
                
                <div class="space-y-8">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-teal-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-lg font-medium">Location</h4>
                            <p class="mt-1 text-teal-100">
                                Everest Hospital Pvt. Ltd.,<br>
                                New Baneshwor, Kathmandu, Nepal
                            </p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-teal-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                            </svg>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-lg font-medium">Phone Number</h4>
                            <p class="mt-1 text-teal-100">+977 1234567890</p>
                        </div>
                    </div>

                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-teal-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-lg font-medium">Working Hours</h4>
                            <p class="mt-1 text-teal-100">
                                Sunday - Friday: 9:00 AM - 5:00 PM<br>
                                Saturday: Closed
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Contact Form -->
            <div class="py-10 px-6 sm:px-10 xl:p-12">
                <h3 class="text-2xl font-bold text-gray-900 mb-6">Send an Inquiry</h3>
                
                @if(session('success'))
                <div class="mb-6 bg-green-50 border-l-4 border-green-500 p-4 rounded-md">
                    <p class="text-sm text-green-700 font-medium">{{ session('success') }}</p>
                </div>
                @endif
                
                @if($errors->any())
                <div class="mb-6 bg-red-50 border-l-4 border-red-500 p-4 rounded-md">
                    <ul class="list-disc pl-5 text-sm text-red-700">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                <form action="{{ route('contact.submit') }}" method="POST" class="space-y-6">
                    @csrf
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">Full Name *</label>
                        <div class="mt-1">
                            <input type="text" name="name" id="name" required class="py-3 px-4 block w-full shadow-sm focus:ring-teal-500 focus:border-teal-500 border-gray-300 rounded-md border" placeholder="John Doe">
                        </div>
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700">Email Address *</label>
                        <div class="mt-1">
                            <input type="email" name="email" id="email" required class="py-3 px-4 block w-full shadow-sm focus:ring-teal-500 focus:border-teal-500 border-gray-300 rounded-md border" placeholder="john@example.com">
                        </div>
                    </div>
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
                        <div class="mt-1">
                            <input type="tel" name="phone" id="phone" class="py-3 px-4 block w-full shadow-sm focus:ring-teal-500 focus:border-teal-500 border-gray-300 rounded-md border" placeholder="+977 98XXXXXXXX">
                        </div>
                    </div>
                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700">Message / Inquiry *</label>
                        <div class="mt-1">
                            <textarea id="message" name="message" required rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-teal-500 focus:border-teal-500 border border-gray-300 rounded-md" placeholder="Briefly describe your concern or procedure you are inquiring about..."></textarea>
                        </div>
                    </div>
                    <div>
                        <button type="submit" class="w-full inline-flex justify-center py-3 px-6 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition-colors">
                            Submit Inquiry
                        </button>
                        <p class="mt-3 text-sm text-gray-500 text-center">We typically respond within 24 hours.</p>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection