@extends('backEnd.layouts.master')
@section('title','Edit Banner')
@section('content')
<div class="container-fluid py-3">
    <div class="d-flex align-items-center mb-3">
        <a href="{{ route('admin.banners.index') }}" class="btn btn-sm btn-outline-secondary me-2"><i class="fas fa-arrow-left"></i></a>
        <h4 class="mb-0 fw-bold"><i class="fas fa-edit me-2 text-primary"></i>Edit Banner</h4>
    </div>
    <div class="row"><div class="col-lg-8">
        <div class="card shadow-sm border-0">
            <div class="card-body">
                <form action="{{ route('admin.banners.update', $banner->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf @method('PUT')
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Banner Image</label>
                            <div class="mb-2">
                                <img src="{{ asset($banner->image) }}" class="rounded" id="previewImg" style="max-height:180px;max-width:100%;object-fit:cover">
                            </div>
                            <input type="file" name="image" class="form-control" accept="image/*" id="imgInput">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Title</label>
                            <input type="text" name="title" class="form-control" value="{{ old('title', $banner->title) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Subtitle</label>
                            <input type="text" name="subtitle" class="form-control" value="{{ old('subtitle', $banner->subtitle) }}">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Position</label>
                            <select name="position" class="form-select">
                                @foreach(['hero'=>'Hero (Main Slider)','promo'=>'Promo Banner (hero below)','spotlight'=>'Spotlight Grid (3×2 cards)','sidebar'=>'Sidebar','footer'=>'Footer'] as $val => $label)
                                <option value="{{ $val }}" {{ old('position', $banner->position) == $val ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Button Text</label>
                            <input type="text" name="button_text" class="form-control" value="{{ old('button_text', $banner->button_text) }}">
                        </div>
                        <div class="col-md-2">
                            <label class="form-label fw-semibold">Sort</label>
                            <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $banner->sort_order) }}">
                        </div>
                        <div class="col-md-8">
                            <label class="form-label fw-semibold">Link URL</label>
                            <input type="text" name="link" class="form-control" value="{{ old('link', $banner->link) }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Status</label>
                            <select name="status" class="form-select">
                                <option value="1" {{ $banner->status ? 'selected' : '' }}>Active</option>
                                <option value="0" {{ !$banner->status ? 'selected' : '' }}>Inactive</option>
                            </select>
                        </div>
                        <div class="col-12 border-top pt-3 d-flex gap-2">
                            <button type="submit" class="btn btn-primary px-4"><i class="fas fa-save me-1"></i> Update</button>
                            <a href="{{ route('admin.banners.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div></div>
</div>
@endsection
@push('scripts')
<script>
document.getElementById('imgInput').addEventListener('change', function(){
    if(this.files[0]){
        document.getElementById('previewImg').src = URL.createObjectURL(this.files[0]);
    }
});
</script>
@endpush