@extends('layouts.admin')
@section('title', 'Add Banner')
@section('page_title', 'Add Banner')
@section('page_css')
    <link rel="stylesheet" href="{{ asset('css/admin/forms.css') }}">
@endsection
@section('content')
    <x-admin.page-header title="Add New Banner" :breadcrumb="[['label' => 'Banners', 'url' => route('admin.banners.index')], ['label' => 'Add New']]" />
    <x-admin.form-card title="Banner Details" :action="route('admin.banners.store')" method="POST" enctype="multipart">
        <div class="form-grid">
            <div class="form-group">
                <label class="form-label" for="title">Banner Title</label>
                <input type="text" name="title" id="title" value="{{ old('title') }}" class="form-input">
                @error('title') <span class="form-error">{{ $message }}</span> @enderror
            </div>
            <div class="form-group">
                <label class="form-label" for="position">Position <span class="form-required">*</span></label>
                <select name="position" id="position" class="form-select" required>
                    <option value="">Select Position</option>
                    <option value="top" {{ old('position') === 'top' ? 'selected' : '' }}>Top</option>
                    <option value="sidebar" {{ old('position') === 'sidebar' ? 'selected' : '' }}>Sidebar</option>
                    <option value="footer" {{ old('position') === 'footer' ? 'selected' : '' }}>Footer</option>
                    <option value="popup" {{ old('position') === 'popup' ? 'selected' : '' }}>Popup</option>
                    <option value="homepage_hero" {{ old('position') === 'homepage_hero' ? 'selected' : '' }}>Homepage Hero</option>
                </select>
                @error('position') <span class="form-error">{{ $message }}</span> @enderror
            </div>
            <div class="form-group">
                <label class="form-label" for="link_url">Link URL</label>
                <input type="url" name="link_url" id="link_url" value="{{ old('link_url') }}" class="form-input" placeholder="https://...">
            </div>
            <div class="form-group">
                <label class="form-label" for="sort_order">Sort Order</label>
                <input type="number" name="sort_order" id="sort_order" value="{{ old('sort_order', 0) }}" class="form-input" min="0">
            </div>
        </div>
        <div class="form-toggles-row">
            <div class="form-toggle">
                <label class="toggle-label" for="status">Status (Active)</label>
                <label class="toggle-switch">
                    <input type="hidden" name="status" value="inactive">
                    <input type="checkbox" name="status" id="status" value="active" {{ old('status', 'active') === 'active' ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
        </div>
        <x-admin.image-upload name="image" label="Banner Image <span class='form-required'>*</span>" />
        <div class="form-actions">
            <button type="submit" class="btn-primary-action"><i class="bi bi-check-lg"></i> Save Banner</button>
            <a href="{{ route('admin.banners.index') }}" class="btn-cancel">Cancel</a>
        </div>
    </x-admin.form-card>
@endsection
@section('page_js')
    <script src="{{ asset('js/admin/image-preview.js') }}"></script>
@endsection