@extends('admin.layouts.app')
@section('title', 'Edit About Page')
@section('heading', 'About 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 active">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.sliders.index') }}" class="page-tab"><i class="fa-solid fa-images"></i> Sliders</a>
</div>

<form method="POST" action="{{ route('admin.pages.about.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>Full-width banner at the top of the About page.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Hero title</label>
                        <input type="text" name="about_hero_title" value="{{ old('about_hero_title', $s['about_hero_title'] ?? '') }}" placeholder="OUR STORY">
                    </div>
                    <div class="form-field">
                        <label>Hero subtitle</label>
                        <input type="text" name="about_hero_subtitle" value="{{ old('about_hero_subtitle', $s['about_hero_subtitle'] ?? '') }}" placeholder="HERITAGE • CRAFTSMANSHIP • INNOVATION">
                    </div>
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Background image</label>
                    @if(!empty($s['about_hero_bg']))
                        <div style="background-image: url('{{ asset($s['about_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['about_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>

            {{-- Legacy Section --}}
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-book-open"></i>
                    <div><h3>Legacy section</h3><p>The brand story paragraph.</p></div>
                </header>
                <div class="form-field full">
                    <label>Section title</label>
                    <input type="text" name="about_legacy_title" value="{{ old('about_legacy_title', $s['about_legacy_title'] ?? '') }}" placeholder="THE AVIOBOOTS LEGACY">
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Story text</label>
                    <textarea name="about_legacy_text" rows="5" placeholder="Tell your brand story here...">{{ old('about_legacy_text', $s['about_legacy_text'] ?? '') }}</textarea>
                </div>
            </section>

            {{-- Craft Cards Section --}}
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-hammer"></i>
                    <div><h3>Craftsmanship cards</h3><p>Three feature cards in the grey section.</p></div>
                </header>
                @foreach([1,2,3] as $n)
                    <div style="padding: 1rem; background: #f8fafc; border-radius: 12px; margin-bottom: 1rem; border: 1px solid #e2e8f0;">
                        <div style="font-weight: 600; margin-bottom: 0.75rem; color: #1e293b;">Card {{ $n }}</div>
                        <div class="form-row">
                            <div class="form-field">
                                <label>Title</label>
                                <input type="text" name="about_craft{{ $n }}_title" value="{{ old('about_craft'.$n.'_title', $s['about_craft'.$n.'_title'] ?? '') }}" placeholder="Feature {{ $n }} title">
                            </div>
                            <div class="form-field">
                                <label>Text</label>
                                <input type="text" name="about_craft{{ $n }}_text" value="{{ old('about_craft'.$n.'_text', $s['about_craft'.$n.'_text'] ?? '') }}" placeholder="Feature {{ $n }} description">
                            </div>
                        </div>
                        <div class="form-field full" style="margin-top:.75rem;">
                            <label>Card image</label>
                            @if(!empty($s['about_craft'.$n.'_image']))
                                <div style="background-image: url('{{ asset($s['about_craft'.$n.'_image']) }}'); 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['about_craft'.$n.'_image']) }}</p>
                                <label style="display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; cursor: pointer;">
                                    <input type="checkbox" name="remove_craft{{ $n }}_image" value="1" style="width: 16px; height: 16px; accent-color: #ef4444;">
                                    <span style="color: #ef4444; font-size: 0.85rem;">Remove 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</div>
                            @endif
                            <input type="file" name="craft{{ $n }}_image_file" accept="image/*" style="margin-top:.5rem;">
                        </div>
                    </div>
                @endforeach
            </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 about page</button>
                <a href="{{ route('about') }}" 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>Use <strong>ALL CAPS</strong> for hero text.</li>
                    <li>All images max <strong>10MB</strong>.</li>
                    <li>Supported: <strong>JPG, PNG, WebP, GIF, SVG, BMP</strong>.</li>
                    <li>Story text: Max 2000 characters.</li>
                </ul>
            </section>
        </div>
    </div>
</form>
@endsection