@extends('admin.layout')

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

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

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

            <div class="mb-3">
                <label class="form-label">Subtitle</label>
                <input type="text" name="subtitle" class="form-control" value="{{ old('subtitle', $banner->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', $banner->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', $banner->side_image_position ?? 'right') === 'right' ? 'selected' : '' }}>Right</option>
                    <option value="left" {{ old('side_image_position', $banner->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', $banner->sort_order) }}" 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', $banner->is_active) ? 'checked' : '' }}>
                        <label class="form-check-label">Active</label>
                    </div>
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Current Background Image</label>
                <div>
                    @if($banner->bg_image_path)
                        <img src="{{ asset('storage/' . $banner->bg_image_path) }}" style="height:80px;" alt="Banner Background">
                    @else
                        <span class="text-muted">(Not set)</span>
                    @endif
                </div>
            </div>

            <div class="mb-3">
                <label class="form-label">Replace Background Image (optional)</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">Update</button>
            <a href="{{ route('admin.banners.index') }}" class="btn btn-light">Back</a>
        </form>
    </div>
</div>
@endsection