@extends('layouts.app')

@section('content')
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            <div class="p-6">
                <h1 class="text-3xl font-bold text-gray-900 mb-6">Site Settings</h1>

                @if(session('success'))
                <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
                    {{ session('success') }}
                </div>
                @endif

                <form action="{{ route('admin.settings.update') }}" method="POST">
                    @csrf

                    <div class="space-y-6">
                        <!-- Practice Information -->
                        <div>
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Firm Information</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="practice_name" class="block text-sm font-medium text-gray-700">Practice Name</label>
                                    <input type="text" name="practice_name" id="practice_name" value="{{ $settings['practice_name'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="tagline" class="block text-sm font-medium text-gray-700">Tagline</label>
                                    <input type="text" name="tagline" id="tagline" value="{{ $settings['tagline'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="fax" class="block text-sm font-medium text-gray-700">Fax</label>
                                    <input type="text" name="fax" id="fax" value="{{ $settings['fax'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="website" class="block text-sm font-medium text-gray-700">Website</label>
                                    <input type="text" name="website" id="website" value="{{ $settings['website'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>

                        <!-- Firm profile -->
                        <div>
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Firm Profile</h2>
                            <div>
                                <label for="firm_philosophy" class="block text-sm font-medium text-gray-700">Firm Philosophy / About</label>
                                <textarea name="firm_philosophy" id="firm_philosophy" rows="4"
                                          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ $settings['firm_philosophy'] ?? $settings['nutrition_philosophy'] ?? '' }}</textarea>
                            </div>
                        </div>

                        <!-- Contact Information -->
                        <div>
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Contact Information</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="phone" class="block text-sm font-medium text-gray-700">Phone</label>
                                    <input type="text" name="phone" id="phone" value="{{ $settings['phone'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                                    <input type="email" name="email" id="email" value="{{ $settings['email'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>

                        <!-- Address -->
                        <div>
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Address</h2>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="md:col-span-2">
                                    <label for="address_street" class="block text-sm font-medium text-gray-700">Street Address</label>
                                    <input type="text" name="address_street" id="address_street" value="{{ $settings['address_street'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="address_city" class="block text-sm font-medium text-gray-700">City</label>
                                    <input type="text" name="address_city" id="address_city" value="{{ $settings['address_city'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="address_province" class="block text-sm font-medium text-gray-700">Province</label>
                                    <input type="text" name="address_province" id="address_province" value="{{ $settings['address_province'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="address_postal_code" class="block text-sm font-medium text-gray-700">Postal Code</label>
                                    <input type="text" name="address_postal_code" id="address_postal_code" value="{{ $settings['address_postal_code'] ?? '' }}"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>

                        <!-- Business Hours -->
                        <div>
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Business Hours</h2>
                            <div>
                                <label for="business_hours" class="block text-sm font-medium text-gray-700">Business Hours</label>
                                <textarea name="business_hours" id="business_hours" rows="4"
                                          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                                          placeholder="Monday - Friday: 9:00 AM - 5:00 PM&#10;Saturday: 9:00 AM - 1:00 PM&#10;Sunday: Closed">{{ $settings['business_hours'] ?? '' }}</textarea>
                            </div>
                        </div>

                        <!-- Social Media -->
                        <div>
                            <h2 class="text-xl font-semibold text-gray-900 mb-4">Social Media</h2>
                            <p class="text-sm text-gray-600 mb-4">Add your social profile URLs. Only filled-in links appear in the floating button on the site.</p>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label for="whatsapp_number" class="block text-sm font-medium text-gray-700">WhatsApp Number</label>
                                    <input type="text" name="whatsapp_number" id="whatsapp_number" value="{{ $settings['whatsapp_number'] ?? '' }}"
                                           placeholder="e.g. 0645309035"
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="social_facebook" class="block text-sm font-medium text-gray-700">Facebook URL</label>
                                    <input type="url" name="social_facebook" id="social_facebook" value="{{ $settings['social_facebook'] ?? '' }}"
                                           placeholder="https://facebook.com/..."
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="social_instagram" class="block text-sm font-medium text-gray-700">Instagram URL</label>
                                    <input type="url" name="social_instagram" id="social_instagram" value="{{ $settings['social_instagram'] ?? '' }}"
                                           placeholder="https://instagram.com/..."
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="social_twitter" class="block text-sm font-medium text-gray-700">X (Twitter) URL</label>
                                    <input type="url" name="social_twitter" id="social_twitter" value="{{ $settings['social_twitter'] ?? '' }}"
                                           placeholder="https://x.com/..."
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="social_linkedin" class="block text-sm font-medium text-gray-700">LinkedIn URL</label>
                                    <input type="url" name="social_linkedin" id="social_linkedin" value="{{ $settings['social_linkedin'] ?? '' }}"
                                           placeholder="https://linkedin.com/..."
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="social_youtube" class="block text-sm font-medium text-gray-700">YouTube URL</label>
                                    <input type="url" name="social_youtube" id="social_youtube" value="{{ $settings['social_youtube'] ?? '' }}"
                                           placeholder="https://youtube.com/..."
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                                <div>
                                    <label for="social_tiktok" class="block text-sm font-medium text-gray-700">TikTok URL</label>
                                    <input type="url" name="social_tiktok" id="social_tiktok" value="{{ $settings['social_tiktok'] ?? '' }}"
                                           placeholder="https://tiktok.com/..."
                                           class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                                </div>
                            </div>
                        </div>

                        <div class="flex space-x-4">
                            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700">
                                Save Settings
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection