@extends('admin.layouts.app')

@section('title', 'Site Settings')

@section('content')
<form method="POST" action="{{ route('admin.site-settings.update') }}" enctype="multipart/form-data">
    @csrf
    @method('PUT')

    <ul class="nav nav-tabs mb-3">
        <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-identity" type="button">Identity</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-page-heroes" type="button">Page Heroes</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-contact" type="button">Contact &amp; Office</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-social" type="button">Social &amp; WhatsApp</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-footer" type="button">Footer</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-seo" type="button">Default SEO</button></li>
        <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-tracking" type="button">Tracking &amp; Custom Code</button></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-identity">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Site Name (English)</label>
                        <input type="text" name="site_name_en" class="form-control" value="{{ old('site_name_en', $settings->site_name_en) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Site Name (Arabic)</label>
                        <input type="text" name="site_name_ar" dir="rtl" class="form-control" value="{{ old('site_name_ar', $settings->site_name_ar) }}">
                    </div>
                    <div class="col-md-3">
                        @include('admin.partials.image-field', ['name' => 'logo_light', 'label' => 'Logo (Light)', 'current' => $settings->logo_light])
                    </div>
                    <div class="col-md-3">
                        @include('admin.partials.image-field', ['name' => 'logo_dark', 'label' => 'Logo (Dark)', 'current' => $settings->logo_dark])
                    </div>
                    <div class="col-md-3">
                        @include('admin.partials.image-field', ['name' => 'logo_mobile', 'label' => 'Logo (Mobile)', 'current' => $settings->logo_mobile])
                        <div class="form-text">Used in the mobile header only. Falls back to Logo (Light) if left empty.</div>
                    </div>
                    <div class="col-md-3">
                        @include('admin.partials.image-field', ['name' => 'favicon', 'label' => 'Favicon', 'current' => $settings->favicon])
                    </div>
                    <div class="col-md-3">
                        @include('admin.partials.image-field', ['name' => 'admin_logo', 'label' => 'Admin Panel Logo', 'current' => $settings->admin_logo])
                        <div class="form-text">Shown in the admin sidebar and login page only — separate from the public site's logo.</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-page-heroes">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        @include('admin.partials.image-field', ['name' => 'hero_about_image', 'label' => 'About Us Hero', 'current' => $settings->hero_about_image])
                    </div>
                    <div class="col-md-6">
                        @include('admin.partials.image-field', ['name' => 'hero_practice_areas_image', 'label' => 'Practice Areas Hero', 'current' => $settings->hero_practice_areas_image])
                    </div>
                    <div class="col-md-6">
                        @include('admin.partials.image-field', ['name' => 'hero_team_image', 'label' => 'Our Team Hero', 'current' => $settings->hero_team_image])
                    </div>
                    <div class="col-md-6">
                        @include('admin.partials.image-field', ['name' => 'hero_contact_image', 'label' => 'Contact Hero', 'current' => $settings->hero_contact_image])
                    </div>
                </div>
                <div class="form-text mt-2">Falls back to the theme's default background if left empty.</div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-contact">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Phone 1</label>
                        <input type="text" name="phone_1" class="form-control" value="{{ old('phone_1', $settings->phone_1) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Phone 2</label>
                        <input type="text" name="phone_2" class="form-control" value="{{ old('phone_2', $settings->phone_2) }}">
                    </div>
                    <div class="col-md-12">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $settings->email) }}">
                        @error('email') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Address (English)</label>
                        <input type="text" name="address_en" class="form-control" value="{{ old('address_en', $settings->address_en) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Address (Arabic)</label>
                        <input type="text" name="address_ar" dir="rtl" class="form-control" value="{{ old('address_ar', $settings->address_ar) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Business Hours (English)</label>
                        <input type="text" name="business_hours_en" class="form-control" value="{{ old('business_hours_en', $settings->business_hours_en) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Business Hours (Arabic)</label>
                        <input type="text" name="business_hours_ar" dir="rtl" class="form-control" value="{{ old('business_hours_ar', $settings->business_hours_ar) }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Map Embed URL</label>
                        <input type="text" name="map_embed_url" class="form-control" value="{{ old('map_embed_url', $settings->map_embed_url) }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-social">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Facebook URL</label>
                        <input type="text" name="facebook_url" class="form-control @error('facebook_url') is-invalid @enderror" value="{{ old('facebook_url', $settings->facebook_url) }}">
                        @error('facebook_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Twitter/X URL</label>
                        <input type="text" name="twitter_url" class="form-control @error('twitter_url') is-invalid @enderror" value="{{ old('twitter_url', $settings->twitter_url) }}">
                        @error('twitter_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Instagram URL</label>
                        <input type="text" name="instagram_url" class="form-control @error('instagram_url') is-invalid @enderror" value="{{ old('instagram_url', $settings->instagram_url) }}">
                        @error('instagram_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">LinkedIn URL</label>
                        <input type="text" name="linkedin_url" class="form-control @error('linkedin_url') is-invalid @enderror" value="{{ old('linkedin_url', $settings->linkedin_url) }}">
                        @error('linkedin_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>

                    <div class="col-12">
                        <div class="form-check">
                            <input type="hidden" name="whatsapp_enabled" value="0">
                            <input type="checkbox" name="whatsapp_enabled" id="whatsapp_enabled" class="form-check-input" value="1" @checked(old('whatsapp_enabled', $settings->whatsapp_enabled))>
                            <label for="whatsapp_enabled" class="form-check-label">Enable WhatsApp floating button</label>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">WhatsApp Number (international format)</label>
                        <input type="text" name="whatsapp_number" class="form-control @error('whatsapp_number') is-invalid @enderror" value="{{ old('whatsapp_number', $settings->whatsapp_number) }}">
                        @error('whatsapp_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Pre-filled Message</label>
                        <input type="text" name="whatsapp_message" class="form-control" value="{{ old('whatsapp_message', $settings->whatsapp_message) }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-footer">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Footer About (English)</label>
                        <textarea name="footer_about_en" rows="3" class="form-control">{{ old('footer_about_en', $settings->footer_about_en) }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Footer About (Arabic)</label>
                        <textarea name="footer_about_ar" dir="rtl" rows="3" class="form-control">{{ old('footer_about_ar', $settings->footer_about_ar) }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Copyright (English)</label>
                        <input type="text" name="copyright_en" class="form-control" value="{{ old('copyright_en', $settings->copyright_en) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Copyright (Arabic)</label>
                        <input type="text" name="copyright_ar" dir="rtl" class="form-control" value="{{ old('copyright_ar', $settings->copyright_ar) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Terms URL</label>
                        <input type="text" name="terms_url" class="form-control" value="{{ old('terms_url', $settings->terms_url) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Privacy URL</label>
                        <input type="text" name="privacy_url" class="form-control" value="{{ old('privacy_url', $settings->privacy_url) }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-seo">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Default Meta Title (English)</label>
                        <input type="text" name="default_meta_title_en" class="form-control" value="{{ old('default_meta_title_en', $settings->default_meta_title_en) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Default Meta Title (Arabic)</label>
                        <input type="text" name="default_meta_title_ar" dir="rtl" class="form-control" value="{{ old('default_meta_title_ar', $settings->default_meta_title_ar) }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Default Meta Description (English)</label>
                        <textarea name="default_meta_description_en" rows="2" class="form-control">{{ old('default_meta_description_en', $settings->default_meta_description_en) }}</textarea>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Default Meta Description (Arabic)</label>
                        <textarea name="default_meta_description_ar" dir="rtl" rows="2" class="form-control">{{ old('default_meta_description_ar', $settings->default_meta_description_ar) }}</textarea>
                    </div>
                    <div class="col-md-6">
                        @include('admin.partials.image-field', ['name' => 'default_og_image', 'label' => 'Default Open Graph Image', 'current' => $settings->default_og_image])
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-tracking">
            <div class="card p-4 mb-3">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">GTM ID</label>
                        <input type="text" name="gtm_id" placeholder="GTM-XXXXXXX" class="form-control @error('gtm_id') is-invalid @enderror" value="{{ old('gtm_id', $settings->gtm_id) }}">
                        @error('gtm_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Google Search Console Verification</label>
                        <input type="text" name="gsc_verification" class="form-control" value="{{ old('gsc_verification', $settings->gsc_verification) }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">Custom Head Code</label>
                        <textarea name="custom_head_code" rows="4" class="form-control font-monospace">{{ old('custom_head_code', $settings->custom_head_code) }}</textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Custom Body Code</label>
                        <textarea name="custom_body_code" rows="4" class="form-control font-monospace">{{ old('custom_body_code', $settings->custom_body_code) }}</textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Custom CSS</label>
                        <textarea name="custom_css" rows="4" class="form-control font-monospace">{{ old('custom_css', $settings->custom_css) }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <button type="submit" class="btn btn-primary text-white">Save Changes</button>
</form>
@endsection