@extends('admin.layouts.app')

@section('title', 'Contact Page')
@section('breadcrumb')
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><a href="#" class="hover:text-primary-600 transition-colors">Pages</a></li>
<li class="flex items-center gap-1.5"><svg class="w-3.5 h-3.5 text-gray-300" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"/></svg></li>
<li><span class="text-gray-500">Contact</span></li>
@endsection
@section('heading', 'Contact Page')
@section('subheading', 'Manage contact details and office information.')

@section('content')

@if(session('success'))
    <div class="mb-4 p-3 rounded-lg bg-emerald-50 text-emerald-700 text-sm">
        {{ session('success') }}
    </div>
@endif

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

{{-- Map & Contact Form Section --}}
<div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
    <h3 class="text-base font-semibold text-gray-900 mb-1">Map & Contact Form</h3>
    <p class="text-sm text-gray-500 mb-5">These fields control the map embed and contact form section on the front-end.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Map Embed URL</label>
            <input type="text" name="map_embedded" value="{{ old('map_embedded', $settings->map_embedded) }}" placeholder="https://www.google.com/maps/embed?pb=..." class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
            <p class="text-xs text-gray-400 mt-1">Paste the full Google Maps embed URL (from Share &rarr; Embed a map).</p>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Contact Form Heading</label>
            <input type="text" name="contact_form_heading" value="{{ old('contact_form_heading', $settings->contact_form_heading) }}" placeholder="We Would Love to Hear From You" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Button Text</label>
            <input type="text" name="button_text" value="{{ old('button_text', $settings->button_text) }}" placeholder="Contact our experts" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
        </div>
        <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Contact Form Description</label>
            <textarea name="contact_form_description" rows="3" placeholder="We'll get to know you to understand your selling goals..." class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all resize-none">{{ old('contact_form_description', $settings->contact_form_description) }}</textarea>
        </div>
    </div>
</div>

{{-- About Section --}}
<div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
    <h3 class="text-base font-semibold text-gray-900 mb-1">About Section</h3>
    <p class="text-sm text-gray-500 mb-5">Content shown in the About block below the contact form.</p>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1.5">About Heading</label>
            <input type="text" name="about_heading" value="{{ old('about_heading', $settings->about_heading) }}" placeholder="We provide the most suitable and quality real estate." class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
        </div>
        <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-1.5">About Description</label>
            <textarea name="about_description" rows="3" placeholder="Estimate your payment with our easy-to-use loan calculator..." class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all resize-none">{{ old('about_description', $settings->about_description) }}</textarea>
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">About Image</label>
            @if($settings->about_image)
                <div class="mb-2">
                    <img src="{{ asset(ltrim($settings->about_image, '/')) }}" alt="" class="h-24 w-auto rounded-lg object-cover border border-gray-200">
                </div>
            @endif
            <input type="file" name="about_image" accept="image/*" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
        </div>
        <div></div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Office Address</label>
            <input type="text" name="about_office_address" value="{{ old('about_office_address', $settings->about_office_address) }}" placeholder="102 Ingraham St, Brooklyn, NY 11237" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Office Phone</label>
            <input type="text" name="about_office_phone" value="{{ old('about_office_phone', $settings->about_office_phone) }}" placeholder="(603) 555-0123" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
        </div>
        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1.5">Office Email</label>
            <input type="email" name="about_office_email" value="{{ old('about_office_email', $settings->about_office_email) }}" placeholder="contact@company.com" class="w-full px-3.5 py-2.5 border border-gray-200 rounded-lg text-sm placeholder-gray-400 focus:ring-2 focus:ring-primary-100 focus:border-primary-300 outline-none transition-all">
        </div>
    </div>
</div>

<button type="submit" class="px-5 py-2.5 bg-primary-500 text-white text-sm font-medium rounded-lg hover:bg-primary-600 transition-colors shadow-sm">Save</button>
</form>

@endsection