@extends('backend.master')
@section('title', $mode === 'create' ? 'Add Banner' : 'Edit Banner #'.$banner->id)

@section('content')

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />

<style>
    :root{--bg:#f5f5f5;--ink:#111827;--muted:#6b7280;}
    body{background:var(--bg);}
    .page-wrap{max-width:800px;margin:20px auto 60px;padding:0 12px;}
    .card-main{
        background:#fff;border-radius:18px;padding:16px 16px 20px;
        box-shadow:0 12px 32px rgba(15,23,42,.10);border:1px solid #e5e7eb;
    }
    .title{font-size:18px;font-weight:700;color:var(--ink);}
    .subtitle{font-size:13px;color:var(--muted);}
    .banner-preview{
        width:100%;max-height:180px;border-radius:10px;overflow:hidden;
        background:#f3f4f6;display:flex;align-items:center;justify-content:center;
        margin-top:8px;border:1px dashed #e5e7eb;
    }
    .banner-preview img{width:100%;height:100%;object-fit:cover;}
</style>

<div class="page-wrap">
    <div class="mb-2">
        <a href="{{ route('admin.banners.index') }}" class="btn btn-sm btn-outline-secondary">
            <i class="fa-solid fa-arrow-left"></i> Back to banners
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success py-2">{{ session('success') }}</div>
    @endif

    <div class="card-main">
        <div class="mb-3">
            <div class="title">
                <i class="fa-solid fa-image"></i>
                {{ $mode === 'create' ? 'Add New Banner' : 'Edit Banner #'.$banner->id }}
            </div>
            <div class="subtitle">
                Banner image, title, button text/url, order এবং status manage করতে পারবেন।
            </div>
        </div>

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

            <div class="mb-3">
                <label class="form-label">Title (optional)</label>
                <input type="text"
                       name="title"
                       value="{{ old('title', $banner->title) }}"
                       class="form-control @error('title') is-invalid @enderror">
                @error('title')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>

            {{-- Image --}}
            <div class="mb-3">
                <label class="form-label">Banner Image @if($mode === 'create') * @endif</label>
                <input type="file"
                       name="image"
                       class="form-control @error('image') is-invalid @enderror"
                       accept="image/*"
                       @if($mode==='create') required @endif>
                @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
                <div class="form-text">Recommended: 1200×400px (or similar ratio)</div>

                <div class="banner-preview" id="bannerPreview">
                    @if($banner->image)
                        <img src="{{ asset('storage/'.$banner->image) }}" alt="">
                    @else
                        <span style="font-size:12px;color:#9ca3af;">No image selected</span>
                    @endif
                </div>
            </div>

            {{-- Button text / url --}}
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label">Button text</label>
                    <input type="text"
                           name="button_text"
                           value="{{ old('button_text', $banner->button_text) }}"
                           class="form-control @error('button_text') is-invalid @enderror">
                    @error('button_text')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text"> যেমন: "Apply Now"</div>
                </div>
                <div class="col-md-8">
                    <label class="form-label">Button URL</label>
                    <input type="text"
                           name="button_url"
                           value="{{ old('button_url', $banner->button_url) }}"
                           class="form-control @error('button_url') is-invalid @enderror">
                    @error('button_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text">Optional link (যদি banner এ ক্লিক করলে কোথাও যেতে চাও)</div>
                </div>
            </div>

            {{-- Sort & Status --}}
            <div class="row g-3 mt-2">
                <div class="col-md-4">
                    <label class="form-label">Sort order</label>
                    <input type="number"
                           name="sort_order"
                           value="{{ old('sort_order', $banner->sort_order ?? 0) }}"
                           class="form-control @error('sort_order') is-invalid @enderror">
                    @error('sort_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    <div class="form-text">নাম্বার যত ছোট হবে, তত আগে দেখাবে।</div>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <div class="form-check">
                        <input type="checkbox"
                               name="status"
                               value="1"
                               id="statusCheck"
                               class="form-check-input"
                               {{ old('status', $banner->status ?? true) ? 'checked' : '' }}>
                        <label class="form-check-label" for="statusCheck">
                            Active (show on site)
                        </label>
                    </div>
                </div>
            </div>

            <div class="mt-3">
                <button class="btn btn-primary" type="submit">
                    <i class="fa-solid fa-floppy-disk"></i>
                    {{ $mode === 'create' ? 'Create Banner' : 'Save changes' }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    // ছোট preview JS
    document.querySelector('input[name="image"]')?.addEventListener('change', function(e){
        const file = e.target.files[0];
        if(!file) return;
        const reader = new FileReader();
        reader.onload = function(ev){
            const wrap = document.getElementById('bannerPreview');
            if(!wrap) return;
            wrap.innerHTML = '';
            const img = document.createElement('img');
            img.src = ev.target.result;
            wrap.appendChild(img);
        };
        reader.readAsDataURL(file);
    });
</script>

@endsection