@php
    $slide = $slide ?? null;
    $slideTypes = \App\Models\HeroSlide::TYPES;
@endphp

<div class="row g-3">
    <div class="col-md-8">
        <div class="mb-3">
            <label class="form-label small fw-semibold text-muted">Slide Type</label>
            <select class="form-select rounded-pill px-3 @error('slide_type') is-invalid @enderror" name="slide_type" required>
                @foreach($slideTypes as $type)
                    <option value="{{ $type }}" {{ old('slide_type', $slide->slide_type ?? 'promo') === $type ? 'selected' : '' }}>
                        {{ ucfirst($type) }}
                    </option>
                @endforeach
            </select>
            @error('slide_type')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label class="form-label small fw-semibold text-muted">Slide Title (HTML allowed for colors/breaks)</label>
            <input type="text" class="form-control rounded-pill px-3 @error('title') is-invalid @enderror" name="title" value="{{ old('title', $slide->title ?? '') }}" required placeholder="E.g. New <span class='text-danger'>Arrivals</span>">
            @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="mb-3">
            <label class="form-label small fw-semibold text-muted">Subtitle / Description</label>
            <textarea class="form-control rounded-4 @error('subtitle') is-invalid @enderror" name="subtitle" rows="3" placeholder="Brief description">{{ old('subtitle', $slide->subtitle ?? '') }}</textarea>
            @error('subtitle')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>

        <div class="row g-3">
            <div class="col-md-6 mb-3">
                <label class="form-label small fw-semibold text-muted">Primary Button Text</label>
                <input type="text" class="form-control rounded-pill px-3 @error('button_text') is-invalid @enderror" name="button_text" value="{{ old('button_text', $slide->button_text ?? '') }}" placeholder="E.g. Shop Now">
                @error('button_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label small fw-semibold text-muted">Primary Button Link</label>
                <input type="text" class="form-control rounded-pill px-3 @error('button_link') is-invalid @enderror" name="button_link" value="{{ old('button_link', $slide->button_link ?? '') }}" placeholder="E.g. /marketplace">
                @error('button_link')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-6 mb-3">
                <label class="form-label small fw-semibold text-muted">Secondary Button Text</label>
                <input type="text" class="form-control rounded-pill px-3 @error('button2_text') is-invalid @enderror" name="button2_text" value="{{ old('button2_text', $slide->button2_text ?? '') }}" placeholder="E.g. Book Repair">
                @error('button2_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label small fw-semibold text-muted">Secondary Button Link</label>
                <input type="text" class="form-control rounded-pill px-3 @error('button2_link') is-invalid @enderror" name="button2_link" value="{{ old('button2_link', $slide->button2_link ?? '') }}" placeholder="E.g. /services/book">
                @error('button2_link')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-6 mb-3">
                <label class="form-label small fw-semibold text-muted">Badge Text (Optional)</label>
                <input type="text" class="form-control rounded-pill px-3 @error('badge_text') is-invalid @enderror" name="badge_text" value="{{ old('badge_text', $slide->badge_text ?? '') }}" placeholder="E.g. Advertisement">
                @error('badge_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label small fw-semibold text-muted">Whole-Slide Link (Optional)</label>
                <input type="text" class="form-control rounded-pill px-3 @error('slide_link') is-invalid @enderror" name="slide_link" value="{{ old('slide_link', $slide->slide_link ?? '') }}" placeholder="Makes entire slide clickable">
                @error('slide_link')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-4 mb-3">
                <label class="form-label small fw-semibold text-muted">Campaign Start</label>
                <input type="datetime-local" class="form-control rounded-pill px-3 @error('starts_at') is-invalid @enderror" name="starts_at" value="{{ old('starts_at', isset($slide->starts_at) ? $slide->starts_at->format('Y-m-d\TH:i') : '') }}">
                @error('starts_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4 mb-3">
                <label class="form-label small fw-semibold text-muted">Campaign End</label>
                <input type="datetime-local" class="form-control rounded-pill px-3 @error('ends_at') is-invalid @enderror" name="ends_at" value="{{ old('ends_at', isset($slide->ends_at) ? $slide->ends_at->format('Y-m-d\TH:i') : '') }}">
                @error('ends_at')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4 mb-3">
                <label class="form-label small fw-semibold text-muted">Sort Order</label>
                <input type="number" class="form-control rounded-pill px-3 @error('sort_order') is-invalid @enderror" name="sort_order" value="{{ old('sort_order', $slide->sort_order ?? 0) }}" required>
                @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card bg-light border-0 rounded-4 p-4 mb-4">
            <h6 class="fw-bold text-secondary mb-3">Slide Media & Status</h6>

            <div class="form-check form-switch mb-3">
                <input class="form-check-input" type="checkbox" role="switch" id="is_active" name="is_active" value="1" {{ old('is_active', $slide->is_active ?? true) ? 'checked' : '' }}>
                <label class="form-check-label text-secondary small" for="is_active">Active Slide</label>
            </div>

            <div class="form-check form-switch mb-4">
                <input class="form-check-input" type="checkbox" role="switch" id="open_in_new_tab" name="open_in_new_tab" value="1" {{ old('open_in_new_tab', $slide->open_in_new_tab ?? false) ? 'checked' : '' }}>
                <label class="form-check-label text-secondary small" for="open_in_new_tab">Open links in new tab</label>
            </div>

            <label class="form-label small fw-semibold text-muted">Upload Image</label>
            <input type="file" class="form-control rounded-pill px-3 mb-3 @error('image') is-invalid @enderror" name="image" {{ $slide ? '' : '' }}>
            @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror

            <label class="form-label small fw-semibold text-muted">Or Image URL</label>
            <input type="url" class="form-control rounded-pill px-3 mb-3 @error('image_url') is-invalid @enderror" name="image_url" value="{{ old('image_url') }}" placeholder="https://...">
            @error('image_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <p class="text-muted small mb-3">Upload a file or paste an external image URL. {{ $slide ? 'Leave both empty to keep the current image.' : 'One is required.' }}</p>

            @if($slide && $slide->image_path)
                <div class="mb-3">
                    <span class="small fw-semibold text-muted d-block mb-1">Current Image</span>
                    <img src="{{ $slide->imageUrl() }}" class="img-thumbnail rounded-3" style="max-height: 120px;" alt="Current Image"
                         onerror="this.src='{{ asset('assets/images/hero-fallback.svg') }}'">
                </div>
            @endif

            <button type="submit" class="btn btn-primary-mj w-100 rounded-pill py-2 mt-2">
                {{ $slide ? 'Update Slide' : 'Create Slide' }}
            </button>
        </div>
    </div>
</div>
