@extends('admin.layouts.app')
@section('title', 'Edit Offers Page')
@section('heading', 'Offers 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">Contact</a>
    <a href="{{ route('admin.pages.offers') }}" class="page-tab active">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.offers.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 top of the offers page.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Hero title</label>
                        <input type="text" name="offers_hero_title" value="{{ old('offers_hero_title', $s['offers_hero_title'] ?? '') }}" placeholder="SPECIAL OFFERS">
                    </div>
                    <div class="form-field">
                        <label>Hero subtitle</label>
                        <input type="text" name="offers_hero_subtitle" value="{{ old('offers_hero_subtitle', $s['offers_hero_subtitle'] ?? '') }}" placeholder="UP TO 40% OFF">
                    </div>
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Background image <small class="muted">(optional)</small></label>
                    @if(!empty($s['offers_hero_bg']))
                        <div style="background-image: url('{{ asset($s['offers_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['offers_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>

        </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 offers page</button>
                <a href="{{ route('offers') }}" target="_blank" data-no-pjax class="adm-btn adm-btn-ghost adm-btn-block"><i class="fa-solid fa-eye"></i> Preview offers</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</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>
                </ul>
            </section>
        </div>
    </div>
</form>
@endsection