@extends('layouts.admin')

@section('content')
<div class="sm:flex sm:items-center sm:justify-between mb-8">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">About Page Content</h1>
        <p class="mt-2 text-sm text-gray-700">Manage the text, images, and statistics shown on the About page.</p>
    </div>
</div>

<div class="bg-white shadow overflow-hidden sm:rounded-lg">
    <form action="{{ route('admin.about.update') }}" method="POST" enctype="multipart/form-data" class="p-6 sm:p-8">
        @csrf
        
        <!-- Header Info -->
        <div class="mb-10">
            <h4 class="text-md font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200">Header Information</h4>
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Pill Tag</label>
                    <input type="text" name="about_tag" value="{{ $settings['about_tag'] ?? 'About The Doctor' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                    <input type="text" name="about_title" value="{{ $settings['about_title'] ?? 'Dr. Rajan Shah' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Subtitle</label>
                    <input type="text" name="about_subtitle" value="{{ $settings['about_subtitle'] ?? 'Laparoscopic Gynecologist & Infertility Specialist' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
            </div>
        </div>

        <!-- Description -->
        <div class="mb-10">
            <h4 class="text-md font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200">Main Description</h4>
            <div class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Paragraph 1</label>
                    <textarea name="about_desc_1" rows="3" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_desc_1'] ?? 'Pioneering Fertility Excellence in Nepal. Dr. Rajan Shah is one of Nepal’s most renowned gynecologists and IVF specialists, known for his expertise in fertility treatments and advanced reproductive techniques.' }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Paragraph 2</label>
                    <textarea name="about_desc_2" rows="3" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_desc_2'] ?? 'With years of experience in gynecological laparoscopic surgery and infertility management, he has helped countless couples achieve their dream of parenthood. He is a recognized Fibroid Specialist in Nepal and operates using state-of-the-art technology.' }}</textarea>
                </div>
            </div>
        </div>

        <!-- Qualifications & Position -->
        <div class="mb-10">
            <h4 class="text-md font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200">Qualifications & Current Position</h4>
            <div class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Qualifications List (One per line)</label>
                    <p class="text-xs text-gray-500 mb-2">Example: <strong>MBBS</strong> - Tribhuvan University</p>
                    <textarea name="about_qualifications" rows="5" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_qualifications'] ?? "MBBS - Tribhuvan University (TU)\nMD - B.P. Koirala Institute of Health Sciences (BPKIHS)\nF.MAS - Fellowship in Minimal Access Surgery (with Merit)\nD.MAS - Diploma in Minimal Access Surgery (WLH, India)" }}</textarea>
                </div>
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Current Position Title</label>
                        <input type="text" name="about_current_position_title" value="{{ $settings['about_current_position_title'] ?? 'Laparoscopic Gynecologist' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Current Position Details (Hospital, Location)</label>
                        <textarea name="about_current_position_desc" rows="2" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_current_position_desc'] ?? "Everest Hospital Pvt. Ltd.,\nNew Baneshwor, Kathmandu, Nepal" }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Image & Stats -->
        <div class="mb-10">
            <h4 class="text-md font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200">Image & Statistics</h4>
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                <div class="lg:col-span-3">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Doctor Image</label>
                    @if(isset($settings['about_image']) && $settings['about_image'])
                        <div class="mb-3">
                            <img src="{{ asset($settings['about_image']) }}" alt="Doctor Image" class="h-32 object-contain rounded-md border border-gray-200">
                        </div>
                    @endif
                    <input type="file" name="about_image" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-1.5 bg-white">
                </div>
                
                <!-- Stat 1 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stat 1 Number</label>
                    <input type="text" name="about_stat1_number" value="{{ $settings['about_stat1_number'] ?? '6+' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stat 1 Label</label>
                    <input type="text" name="about_stat1_label" value="{{ $settings['about_stat1_label'] ?? 'Years Experience' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
                <div class="hidden lg:block"></div>
                
                <!-- Stat 2 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stat 2 Number</label>
                    <input type="text" name="about_stat2_number" value="{{ $settings['about_stat2_number'] ?? '5500+' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stat 2 Label</label>
                    <input type="text" name="about_stat2_label" value="{{ $settings['about_stat2_label'] ?? 'Surgeries' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
            </div>
            
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 mt-6">
                <!-- Stat 3 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stat 3 Number</label>
                    <input type="text" name="about_stat3_number" value="{{ $settings['about_stat3_number'] ?? '1,000+' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stat 3 Label</label>
                    <input type="text" name="about_stat3_label" value="{{ $settings['about_stat3_label'] ?? 'IVF Successes' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
                <div class="hidden lg:block"></div>
                
                <!-- Stat 4 -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stat 4 Number</label>
                    <input type="text" name="about_stat4_number" value="{{ $settings['about_stat4_number'] ?? '99%' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Stat 4 Label</label>
                    <input type="text" name="about_stat4_label" value="{{ $settings['about_stat4_label'] ?? 'Patient Satisfaction' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                </div>
            </div>
        </div>

        <!-- Philosophy Section -->
        <div class="mb-10">
            <h4 class="text-md font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200">Philosophy Section</h4>
            <div class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Quote Text</label>
                    <textarea name="about_philosophy_quote" rows="3" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_philosophy_quote'] ?? 'Every woman deserves a healthcare experience that prioritizes her unique needs. My approach blends cutting-edge, minimally invasive technology with deep empathy to ensure the safest and most effective outcomes.' }}</textarea>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Description Paragraph</label>
                    <textarea name="about_philosophy_desc" rows="4" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_philosophy_desc'] ?? 'We believe in an evidence-based, patient-first methodology. Whether managing high-risk pregnancies, performing delicate laparoscopic surgeries for endometriosis and fibroids, or guiding families through their fertility journey, our goal is to provide treatments that are as effective as they are compassionate. By focusing on non-invasive and minimally invasive techniques, we minimize recovery time and maximize well-being.' }}</textarea>
                </div>
            </div>
        </div>

        <!-- Services Grid Section -->
        <div class="mb-10">
            <h4 class="text-md font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200">Specialized Services Section</h4>
            
            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-5 mt-4">
                <h5 class="font-semibold text-teal-700 mb-4 border-b border-gray-100 pb-2">Service 1</h5>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                        <input type="text" name="about_service1_title" value="{{ $settings['about_service1_title'] ?? 'Laparoscopic & Minimally Invasive Surgery' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="about_service1_desc" rows="2" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_service1_desc'] ?? 'Advanced surgical solutions for Fibroids, Ovarian Cysts, and Endometriosis, prioritizing rapid recovery and minimal scarring.' }}</textarea>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-5 mt-4">
                <h5 class="font-semibold text-teal-700 mb-4 border-b border-gray-100 pb-2">Service 2</h5>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                        <input type="text" name="about_service2_title" value="{{ $settings['about_service2_title'] ?? 'Fertility & IVF Management' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="about_service2_desc" rows="2" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_service2_desc'] ?? 'Comprehensive fertility workups, IUI, IVF, and highly personalized treatment plans to support you on your journey to parenthood.' }}</textarea>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-5 mt-4">
                <h5 class="font-semibold text-teal-700 mb-4 border-b border-gray-100 pb-2">Service 3</h5>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                        <input type="text" name="about_service3_title" value="{{ $settings['about_service3_title'] ?? 'High-Risk Gynecological Care' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="about_service3_desc" rows="2" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_service3_desc'] ?? 'Specialized, vigilant management of complex women\'s health conditions to ensure the highest standard of safety and care.' }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- The Journey Section -->
        <div class="mb-10">
            <h4 class="text-md font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200">The Journey (Process Flow)</h4>
            
            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-5 mt-4">
                <h5 class="font-semibold text-teal-700 mb-4 border-b border-gray-100 pb-2">Step 1</h5>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                        <input type="text" name="about_journey1_title" value="{{ $settings['about_journey1_title'] ?? 'Initial Consultation' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="about_journey1_desc" rows="2" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_journey1_desc'] ?? 'A thorough discussion of your medical history, concerns, and goals in a comfortable, private setting.' }}</textarea>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-5 mt-4">
                <h5 class="font-semibold text-teal-700 mb-4 border-b border-gray-100 pb-2">Step 2</h5>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                        <input type="text" name="about_journey2_title" value="{{ $settings['about_journey2_title'] ?? 'Precision Diagnostics' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="about_journey2_desc" rows="2" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_journey2_desc'] ?? 'Utilizing state-of-the-art diagnostic tools to accurately identify underlying conditions and factors.' }}</textarea>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-5 mt-4">
                <h5 class="font-semibold text-teal-700 mb-4 border-b border-gray-100 pb-2">Step 3</h5>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                        <input type="text" name="about_journey3_title" value="{{ $settings['about_journey3_title'] ?? 'Tailored Treatment Plan' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="about_journey3_desc" rows="2" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_journey3_desc'] ?? 'Developing a customized, evidence-based strategy specifically designed for your unique needs and body.' }}</textarea>
                    </div>
                </div>
            </div>

            <div class="bg-white border border-gray-200 shadow-sm rounded-lg p-5 mt-4">
                <h5 class="font-semibold text-teal-700 mb-4 border-b border-gray-100 pb-2">Step 4</h5>
                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Title</label>
                        <input type="text" name="about_journey4_title" value="{{ $settings['about_journey4_title'] ?? 'Recovery & Support' }}" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border-gray-300 rounded-md">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                        <textarea name="about_journey4_desc" rows="2" class="shadow-sm focus:ring-teal-500 focus:border-teal-500 block w-full sm:text-sm border border-gray-300 rounded-md p-2">{{ $settings['about_journey4_desc'] ?? 'Ongoing monitoring, post-treatment care, and dedicated emotional support to ensure lasting well-being.' }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="pt-5 border-t border-gray-200">
            <div class="flex justify-end">
                <button type="submit" class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm 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">
                    Save Changes
                </button>
            </div>
        </div>
    </form>
</div>
@endsection
