@extends('admin.layouts.app')
@section('title', isset($banner) ? 'Edit Banner' : 'Add Banner')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.banners.index') }}">Banners</a></li>
    <li class="breadcrumb-item active">{{ isset($banner) ? 'Edit' : 'Add' }}</li>
@endsection

@section('content')
<div class="page-header">
    <h1><i class="fas fa-images text-danger"></i> {{ isset($banner) ? 'Edit Banner' : 'Add New Banner' }}</h1>
    <a href="{{ route('admin.banners.index') }}" class="btn btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i> Back</a>
</div>

<form action="{{ isset($banner) ? route('admin.banners.update', $banner) : route('admin.banners.store') }}"
      method="POST" enctype="multipart/form-data">
    @csrf
    @if(isset($banner)) @method('PUT') @endif

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header">Banner Content</div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Title <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                            value="{{ old('title', $banner->title ?? '') }}" required
                            placeholder="Your Outdoor Paradise Starts Here">
                        @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        <div class="form-text">Use line break \n for two-line titles</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Subtitle</label>
                        <input type="text" name="subtitle" class="form-control"
                            value="{{ old('subtitle', $banner->subtitle ?? '') }}"
                            placeholder="Professional Landscaping Services">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Description</label>
                        <textarea name="description" class="form-control" rows="3"
                            placeholder="Brief description shown below the title...">{{ old('description', $banner->description ?? '') }}</textarea>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <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 ?? '') }}" placeholder="View Services">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Button URL</label>
                            <input type="text" name="button_url" class="form-control"
                                value="{{ old('button_url', $banner->button_url ?? '') }}" placeholder="/garden">
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Badge Text</label>
                            <input type="text" name="badge_text" class="form-control"
                                value="{{ old('badge_text', $banner->badge_text ?? '') }}" placeholder="Lawn & Garden Experts">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Badge Icon (FA)</label>
                            <input type="text" name="badge_icon" class="form-control"
                                value="{{ old('badge_icon', $banner->badge_icon ?? '') }}" placeholder="fas fa-leaf">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">Floating Badge (Bottom Right)</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Badge Title</label>
                            <input type="text" name="float_badge_title" class="form-control"
                                value="{{ old('float_badge_title', $banner->float_badge_title ?? '') }}" placeholder="5-Star Rated">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Badge Subtitle</label>
                            <input type="text" name="float_badge_subtitle" class="form-control"
                                value="{{ old('float_badge_subtitle', $banner->float_badge_subtitle ?? '') }}" placeholder="200+ Google Reviews">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Badge Icon (FA)</label>
                            <input type="text" name="float_badge_icon" class="form-control"
                                value="{{ old('float_badge_icon', $banner->float_badge_icon ?? '') }}" placeholder="fas fa-star">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header">Settings</div>
                <div class="card-body">
                    <div class="mb-3 d-flex justify-content-between align-items-center">
                        <label class="form-label mb-0 fw-semibold">Active</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1"
                                {{ old('is_active', $banner->is_active ?? true) ? 'checked' : '' }}>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Sort Order</label>
                        <input type="number" name="sort_order" class="form-control"
                            value="{{ old('sort_order', $banner->sort_order ?? 0) }}" min="0">
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Slide CSS Class</label>
                        <input type="text" name="slide_class" class="form-control"
                            value="{{ old('slide_class', $banner->slide_class ?? '') }}" placeholder="slide-1">
                        <div class="form-text">e.g. slide-1, slide-2 for different background colours</div>
                    </div>
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-green">
                            <i class="fas fa-save me-2"></i>{{ isset($banner) ? 'Update Banner' : 'Save Banner' }}
                        </button>
                        @if(isset($banner))
                        <a href="{{ route('admin.banners.index') }}" class="btn btn-outline-secondary">Cancel</a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header">Background Image</div>
                <div class="card-body">
                    @if(isset($banner) && $banner->image)
                    <div class="mb-3 text-center">
                        <img src="{{ Storage::url($banner->image) }}" id="imgPreview"
                            class="img-fluid rounded" style="max-height:160px;width:100%;object-fit:cover">
                    </div>
                    @else
                    <div class="mb-3">
                        <img id="imgPreview" src="" class="img-fluid rounded d-none mb-2" style="max-height:160px;width:100%;object-fit:cover">
                        <div id="imgPlaceholder" class="p-3 text-center text-muted rounded" style="background:#f8f9fa;border:2px dashed #dee2e6">
                            <i class="fas fa-image fa-2x mb-1 opacity-50"></i>
                            <div style="font-size:.78rem">No image selected</div>
                        </div>
                    </div>
                    @endif
                    <input type="file" name="image" class="form-control form-control-sm" accept="image/*"
                        onchange="
                            document.getElementById('imgPreview').src=URL.createObjectURL(this.files[0]);
                            document.getElementById('imgPreview').classList.remove('d-none');
                            document.getElementById('imgPlaceholder')?.classList.add('d-none');
                        ">
                    <div class="form-text">JPG, PNG, WEBP. Max 3MB. Recommended: 1920×900px</div>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection