@extends('admin.layouts.app')
@section('title', 'Edit Contact Page')
@section('heading', 'Contact Page Editor')

@section('content')
<div class="page-tabs">
    <a href="{{ route('admin.pages.home') }}" class="page-tab">Home</a>
    <a href="{{ route('admin.pages.about') }}" class="page-tab">About</a>
    <a href="{{ route('admin.pages.contact') }}" class="page-tab active">Contact</a>
    <a href="{{ route('admin.pages.offers') }}" class="page-tab">Offers</a>
    <a href="{{ route('admin.sliders.index') }}" class="page-tab"><i class="fa-solid fa-images"></i> Sliders</a>
</div>

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

    <div class="form-grid" style="grid-template-columns:2fr 1fr;">
        <div class="form-col">

            {{-- Hero Section --}}
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-panorama"></i>
                    <div><h3>Hero section</h3><p>Banner at the top of the Contact page.</p></div>
                </header>
                <div class="form-field full">
                    <label>Tagline</label>
                    <input type="text" name="contact_tagline" value="{{ old('contact_tagline', $s['contact_tagline'] ?? '') }}" placeholder="GET IN TOUCH WITH OUR TEAM">
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Hero background image</label>
                    @if(!empty($s['contact_hero_bg']))
                        <div style="background-image: url('{{ asset($s['contact_hero_bg']) }}'); width: 200px; height: 100px; background-size: cover; background-position: center; border-radius: 8px; margin-bottom: 0.5rem; border: 2px solid #e2e8f0;"></div>
                        <p style="font-size: 0.8rem; color: #10b981; margin-bottom: 0.5rem;">Image: {{ basename($s['contact_hero_bg']) }}</p>
                        <label style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; cursor: pointer;">
                            <input type="checkbox" name="remove_hero_bg" value="1" style="width: 16px; height: 16px; accent-color: #ef4444;">
                            <span style="color: #ef4444; font-size: 0.85rem;">Remove current image</span>
                        </label>
                    @else
                        <div style="width: 200px; height: 100px; background: #f1f5f9; border-radius: 8px; margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 0.85rem; border: 2px dashed #e2e8f0;">No image set</div>
                    @endif
                    <input type="file" name="hero_bg_file" accept="image/*" style="margin-top:.6rem;">
                    <small class="muted" style="display: block; margin-top: 0.5rem; color: #64748b;">Supported: JPG, PNG, WebP, GIF, SVG, BMP (max 10MB)</small>
                </div>
            </section>

            {{-- Contact Details --}}
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-location-dot"></i>
                    <div><h3>Contact details</h3><p>Displayed in the "Visit Us" panel.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Phone</label>
                        <input type="text" name="contact_phone" value="{{ old('contact_phone', $s['contact_phone'] ?? '') }}" placeholder="+1 234 567 8900">
                    </div>
                    <div class="form-field">
                        <label>Email</label>
                        <input type="email" name="contact_email" value="{{ old('contact_email', $s['contact_email'] ?? '') }}" placeholder="avioboots0@gmail.com">
                    </div>
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Address</label>
                    <textarea name="contact_address" rows="3" placeholder="Street Address&#10;City, State, ZIP&#10;Country">{{ old('contact_address', $s['contact_address'] ?? '') }}</textarea>
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Business hours</label>
                    <textarea name="contact_hours" rows="3" placeholder="Mon-Fri: 9AM - 7PM&#10;Sat: 10AM - 6PM&#10;Sun: Closed">{{ old('contact_hours', $s['contact_hours'] ?? '') }}</textarea>
                </div>
            </section>

            {{-- Social Media Links (NEW) --}}
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-share-nodes"></i>
                    <div><h3>Social media links</h3><p>Links displayed on the contact page.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Facebook URL</label>
                        <input type="url" name="contact_facebook" value="{{ old('contact_facebook', $s['contact_facebook'] ?? '') }}" placeholder="https://facebook.com/yourpage">
                    </div>
                    <div class="form-field">
                        <label>Instagram URL</label>
                        <input type="url" name="contact_instagram" value="{{ old('contact_instagram', $s['contact_instagram'] ?? '') }}" placeholder="https://instagram.com/yourpage">
                    </div>
                </div>
                <div class="form-row" style="margin-top: 1rem;">
                    <div class="form-field">
                        <label>Twitter/X URL</label>
                        <input type="url" name="contact_twitter" value="{{ old('contact_twitter', $s['contact_twitter'] ?? '') }}" placeholder="https://twitter.com/yourpage">
                    </div>
                    <div class="form-field">
                        <label>YouTube URL</label>
                        <input type="url" name="contact_youtube" value="{{ old('contact_youtube', $s['contact_youtube'] ?? '') }}" placeholder="https://youtube.com/yourchannel">
                    </div>
                </div>
            </section>

            {{-- Map Settings (NEW) --}}
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-map-location-dot"></i>
                    <div><h3>Map settings</h3><p>Embed Google Maps iframe or coordinates.</p></div>
                </header>
                <div class="form-field full">
                    <label>Google Maps Embed URL</label>
                    <input type="url" name="contact_map_url" value="{{ old('contact_map_url', $s['contact_map_url'] ?? '') }}" placeholder="https://www.google.com/maps/embed?pb=...">
                    <small class="muted">Enter the embed URL from Google Maps (Share -> Embed a map)</small>
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Map Coordinates (Optional)</label>
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;">
                        <input type="text" name="contact_map_lat" value="{{ old('contact_map_lat', $s['contact_map_lat'] ?? '') }}" placeholder="Latitude">
                        <input type="text" name="contact_map_lng" value="{{ old('contact_map_lng', $s['contact_map_lng'] ?? '') }}" placeholder="Longitude">
                    </div>
                </div>
            </section>

        </div>

        <div class="form-col form-col-side">
            <section class="card form-section sticky-actions">
                <button type="submit" class="adm-btn adm-btn-primary adm-btn-lg"><i class="fa-solid fa-save"></i> Save contact page</button>
                <a href="{{ route('contact') }}" target="_blank" data-no-pjax class="adm-btn adm-btn-ghost adm-btn-block"><i class="fa-solid fa-eye"></i> Preview page</a>
            </section>
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-circle-info"></i>
                    <div><h3>Tips</h3></div>
                </header>
                <ul style="font-size:.875rem; color:#6b7280; padding-left:1.2rem; line-height:1.9;">
                    <li>Fill in all contact details for better UX.</li>
                    <li>Add social media links to build trust.</li>
                    <li>Use Google Maps embed for location.</li>
                    <li>All images max <strong>10MB</strong>.</li>
                </ul>
            </section>
        </div>
    </div>
</form>
@endsection