@extends('admin.layout')

@section('title', 'Add Banner')
@section('page_heading', 'Add Home Banner')

@section('content')
<div class="card">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.banners.store') }}" enctype="multipart/form-data" novalidate>
            @csrf

            <div class="mb-3">
                <label class="form-label">Title</label>
                <input type="text" name="title" class="form-control" value="{{ old('title') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">Subtitle</label>
                <input type="text" name="subtitle" class="form-control" value="{{ old('subtitle') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">Link URL</label>
                <input type="url" name="link_url" class="form-control" value="{{ old('link_url') }}">
            </div>

            <div class="mb-3">
                <label class="form-label">Side Image Position</label>
                <select name="side_image_position" class="form-select @error('side_image_position') is-invalid @enderror">
                    <option value="right" {{ old('side_image_position', 'right') === 'right' ? 'selected' : '' }}>Right</option>
                    <option value="left" {{ old('side_image_position', 'right') === 'left' ? 'selected' : '' }}>Left</option>
                </select>
                @error('side_image_position')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Sort Order</label>
                    <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', 0) }}" min="0" required>
                </div>
                <div class="col-md-6 mb-3 d-flex align-items-end">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                        <label class="form-check-label">Active</label>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Banner Background Image (optional) (png/jpg/jpeg)</label>
                <input type="file" name="bg_image" class="form-control @error('bg_image') is-invalid @enderror" accept=".png,.jpg,.jpeg">
                <small class="text-warning">Preferred: 1820×784 (±20px).</small>
                <small class="text-muted d-block">If not uploaded, the default template background will be used.</small>
                @error('bg_image')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
                <div class="text-danger small mt-1 js-dimension-error" data-for="bg_image" style="display:none;"></div>
            </div>

            <button type="submit" class="btn btn-primary">Save</button>
            <a href="{{ route('admin.banners.index') }}" class="btn btn-light">Cancel</a>
        </form>
    </div>
</div>
@endsection