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

@section('content')
<div class="page-tabs">
    <a href="{{ route('admin.pages.home') }}" class="page-tab active">Home</a>
    <a href="{{ route('admin.pages.about') }}" class="page-tab">About</a>
    <a href="{{ route('admin.pages.contact') }}" class="page-tab">Contact</a>
    <a href="{{ route('admin.pages.offers') }}" class="page-tab">Offers</a>
    <a href="{{ route('admin.pages.footer') }}" class="page-tab">Footer</a>
    <a href="{{ route('admin.pages.seo') }}" class="page-tab">SEO</a>
    <a href="{{ route('admin.pages.design') }}" class="page-tab">Design</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.home.update') }}" enctype="multipart/form-data">
    @csrf

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

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-panorama"></i>
                    <div><h3>Hero section</h3><p>The full-screen banner at the very top of the home page.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Hero title</label>
                        <input type="text" name="home_hero_title" value="{{ old('home_hero_title', $s['home_hero_title'] ?? '') }}" placeholder="CRAFTED FOR MEN">
                    </div>
                    <div class="form-field">
                        <label>Hero subtitle</label>
                        <input type="text" name="home_hero_subtitle" value="{{ old('home_hero_subtitle', $s['home_hero_subtitle'] ?? '') }}" placeholder="PREMIUM LEATHER BOOTS">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-field">
                        <label>CTA Button Text</label>
                        <input type="text" name="home_hero_cta_text" value="{{ old('home_hero_cta_text', $s['home_hero_cta_text'] ?? 'SHOP NOW') }}" placeholder="SHOP NOW">
                    </div>
                    <div class="form-field">
                        <label>CTA Button Link</label>
                        <input type="text" name="home_hero_cta_link" value="{{ old('home_hero_cta_link', $s['home_hero_cta_link'] ?? '#products') }}" placeholder="#products">
                    </div>
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Background image <small class="muted">(optional – replaces dark overlay color)</small></label>
                    @if(!empty($s['home_hero_bg']))
                        <div style="background-image: url('{{ asset($s['home_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 uploaded: {{ basename($s['home_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>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-quote-left"></i>
                    <div><h3>Tagline band</h3><p>The centred text section below the carousel.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Tagline title</label>
                        <input type="text" name="home_tagline_title" value="{{ old('home_tagline_title', $s['home_tagline_title'] ?? '') }}" placeholder="TIMELESS DESIGN">
                    </div>
                    <div class="form-field">
                        <label>Tagline text</label>
                        <input type="text" name="home_tagline_text" value="{{ old('home_tagline_text', $s['home_tagline_text'] ?? '') }}" placeholder="ENGINEERED FOR PERFORMANCE">
                    </div>
                </div>
            </section>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-percent"></i>
                    <div><h3>Promo banner</h3><p>The dark "Special Offers" sale countdown band.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Promo headline</label>
                        <input type="text" name="home_promo_title" value="{{ old('home_promo_title', $s['home_promo_title'] ?? '') }}" placeholder="UP TO 40% OFF">
                    </div>
                    <div class="form-field">
                        <label>Promo sub-text</label>
                        <input type="text" name="home_promo_subtitle" value="{{ old('home_promo_subtitle', $s['home_promo_subtitle'] ?? '') }}" placeholder="LIMITED TIME SALE">
                    </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 home page</button>
                <a href="{{ route('home') }}" target="_blank" data-no-pjax class="adm-btn adm-btn-ghost adm-btn-block"><i class="fa-solid fa-eye"></i> Preview site</a>
                <a href="{{ route('admin.sliders.index') }}" class="adm-btn adm-btn-ghost adm-btn-block"><i class="fa-solid fa-images"></i> Manage carousel slides</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>Use <strong>ALL CAPS</strong> for hero text to match site style.</li>
                    <li>Carousel slides are managed separately via <strong>Sliders</strong>.</li>
                    <li>Product sections pull from the <strong>collection tag</strong> on each product.</li>
                </ul>
            </section>
        </div>
    </div>
</form>
@endsection