@extends('admin.layouts.app')

@section('title', 'Settings')
@section('page-title', 'Settings')

@section('content')
<div class="mb-8">
    <h2 class="text-2xl font-bold text-gray-900">Site Settings</h2>
    <p class="mt-1 text-sm text-gray-500">Manage the navbar logo, footer contact details, and social media links.</p>
</div>

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

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 space-y-6">
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h3 class="text-base font-bold text-gray-900 mb-5">Brand</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-900 mb-2">Site Name <span class="text-red-500">*</span></label>
                        <input name="site_name" value="{{ old('site_name', $settings->site_name) }}" required class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                        @error('site_name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-900 mb-2">Tagline</label>
                        <input name="tagline" value="{{ old('tagline', $settings->tagline) }}" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                        @error('tagline')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h3 class="text-base font-bold text-gray-900 mb-5">Footer Details</h3>
                <div class="space-y-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-900 mb-2">Footer Name</label>
                        <input name="footer_name" value="{{ old('footer_name', $settings->footer_name) }}" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                        @error('footer_name')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-900 mb-2">Footer Description</label>
                        <textarea name="footer_description" rows="4" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">{{ old('footer_description', $settings->footer_description) }}</textarea>
                        @error('footer_description')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-sm font-semibold text-gray-900 mb-2">Address</label>
                            <input name="address" value="{{ old('address', $settings->address) }}" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                            @error('address')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-900 mb-2">Phone</label>
                            <input name="phone" value="{{ old('phone', $settings->phone) }}" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                            @error('phone')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-900 mb-2">Email</label>
                            <input name="email" type="email" value="{{ old('email', $settings->email) }}" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                            @error('email')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-900 mb-2">Office Hours</label>
                            <input name="office_hours" value="{{ old('office_hours', $settings->office_hours) }}" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                            @error('office_hours')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-900 mb-2">Google Map Embed URL</label>
                        <input name="map_embed_url" value="{{ old('map_embed_url', $settings->map_embed_url) }}" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                        @error('map_embed_url')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h3 class="text-base font-bold text-gray-900 mb-5">Social Media Links</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                    @foreach([
                        'facebook_url' => 'Facebook',
                        'instagram_url' => 'Instagram',
                        'youtube_url' => 'YouTube',
                        'tiktok_url' => 'TikTok',
                        'linkedin_url' => 'LinkedIn',
                        'whatsapp_url' => 'WhatsApp',
                    ] as $field => $label)
                    <div>
                        <label class="block text-sm font-semibold text-gray-900 mb-2">{{ $label }}</label>
                        <input name="{{ $field }}" value="{{ old($field, $settings->{$field}) }}" placeholder="https://" class="block w-full rounded-xl border-0 py-3 px-4 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-[#027fc5]">
                        @error($field)<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <h3 class="text-base font-bold text-gray-900 mb-5">Navbar Logo</h3>
                <div class="rounded-xl border border-gray-200 bg-gray-50 p-4 mb-4">
                    <img src="{{ $settings->logo_url }}" alt="{{ $settings->site_name }}" class="max-h-20 mx-auto object-contain">
                </div>
                <input type="file" name="logo" accept="image/*" class="block w-full text-sm text-gray-600">
                <p class="mt-2 text-xs text-gray-400">PNG, JPG, WebP, GIF, or SVG. Max 5 MB.</p>
                @error('logo')<p class="mt-1 text-sm text-red-600">{{ $message }}</p>@enderror
            </div>

            <div class="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
                <button type="submit" class="w-full rounded-xl px-5 py-3 text-sm font-bold text-white shadow-lg transition-all hover:opacity-90" style="background:#027fc5;">
                    <i class="fas fa-save mr-1"></i> Save Settings
                </button>
            </div>
        </div>
    </div>
</form>
@endsection