@extends('admin.layouts.app')
@section('title', $slider->exists ? 'Edit Slide' : 'New Slide')
@section('heading', $slider->exists ? 'Edit Slide' : 'New Slide')

@section('content')
<div class="page-actions">
    <a href="{{ route('admin.sliders.index') }}" class="adm-btn adm-btn-ghost"><i class="fa-solid fa-arrow-left"></i> Back</a>
    @if($slider->exists)
        <form method="POST" action="{{ route('admin.sliders.destroy', $slider) }}" onsubmit="return confirm('Delete this slide?');" style="display:inline;">
            @csrf @method('DELETE')
            <button class="adm-btn adm-btn-danger"><i class="fa-solid fa-trash"></i> Delete</button>
        </form>
    @endif
</div>

<form method="POST" action="{{ $slider->exists ? route('admin.sliders.update', $slider) : route('admin.sliders.store') }}" enctype="multipart/form-data">
    @csrf
    @if($slider->exists) @method('PUT') @endif

    <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-image"></i>
                    <div><h3>Slide image</h3><p>Recommended: 1920×800 wide banner · JPG/PNG · max 5MB</p></div>
                </header>
                <label class="drop-zone" id="dropZone">
                    <input type="file" name="image_file" id="imageFile" accept="image/*" hidden>
                    <div class="drop-preview" id="dropPreview"
                         @if($slider->image) style="background-image:url('{{ asset($slider->image) }}')" @endif></div>
                    <div class="drop-hint">
                        <i class="fa-solid fa-cloud-arrow-up"></i>
                        <strong>Click or drop banner image</strong>
                        <small>Wide banner · 1920×800 recommended</small>
                    </div>
                </label>
            </section>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-pen-nib"></i>
                    <div><h3>Text overlay</h3><p>Title and subtitle displayed on top of the image.</p></div>
                </header>
                <div class="form-field full">
                    <label>Title</label>
                    <input type="text" name="title" value="{{ old('title', $slider->title) }}" placeholder="e.g. CRAFTED FOR MEN">
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Subtitle</label>
                    <input type="text" name="subtitle" value="{{ old('subtitle', $slider->subtitle) }}" placeholder="e.g. PREMIUM LEATHER BOOTS">
                </div>
            </section>
        </div>

        <div class="form-col form-col-side">
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-arrow-pointer"></i>
                    <div><h3>Call to action</h3><p>Button shown on slide.</p></div>
                </header>
                <div class="form-field full">
                    <label>Button text</label>
                    <input type="text" name="cta_text" value="{{ old('cta_text', $slider->cta_text ?? 'Shop Now') }}" placeholder="Shop Now">
                </div>
                <div class="form-field full" style="margin-top:1rem;">
                    <label>Button URL</label>
                    <input type="text" name="cta_url" value="{{ old('cta_url', $slider->cta_url ?? '/') }}" placeholder="/">
                </div>
            </section>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-sliders"></i>
                    <div><h3>Settings</h3></div>
                </header>
                <div class="form-field full">
                    <label>Sort order</label>
                    <input type="number" name="sort_order" value="{{ old('sort_order', $slider->sort_order ?? 0) }}" min="0">
                    <small class="muted">Lower number = shown first.</small>
                </div>
                <div style="margin-top:1.2rem; display:flex; align-items:center; gap:.75rem;">
                    <label class="toggle-switch">
                        <input type="hidden" name="active" value="0">
                        <input type="checkbox" name="active" value="1" {{ old('active', $slider->active ?? true) ? 'checked' : '' }}>
                        <span class="toggle-track"></span>
                    </label>
                    <span>Active (show on site)</span>
                </div>
            </section>

            <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> {{ $slider->exists ? 'Save changes' : 'Add slide' }}
                </button>
                <a href="{{ route('admin.sliders.index') }}" class="adm-btn adm-btn-ghost adm-btn-block">Cancel</a>
            </section>
        </div>
    </div>
</form>
@endsection