@extends('Admin.layout')

@section('content')
    <div class="container-fluid">

        {{-- Header --}}
        <div class="d-flex justify-content-between align-items-center mb-4">

            <div class="d-flex align-items-center gap-3">

                {{-- Back Button --}}
                <a href="{{ route('banner') }}" class="back-btn" title="Back to Banners">

                    <i class="fas fa-chevron-left"></i>

                </a>

                <div>

                    <h4 class="mb-1">
                        Edit Banner
                    </h4>

                  

                </div>

            </div>

        </div>


        {{-- Centered Small Card --}}
        <div class="row justify-content-center">

            <div class="col-12 col-md-7 col-lg-7">

                <div class="card shadow-sm border-0">

                    <div class="card-body p-4">

                        <form action="{{ route('update_banner') }}" id="SubmitForm" method="POST"
                            enctype="multipart/form-data">

                            @csrf

                            <input type="hidden" name="id" value="{{ $banner->id }}">


                            {{-- Current Image --}}
                            <div class="mb-4">

                                <label class="form-label fw-semibold">
                                    Current Banner Image
                                </label>

                                <div class="text-center">

                                    <img src="{{ url(Storage::url($banner->image)) }}" alt="Banner" class="rounded"
                                        style="
                                            width: 100%;
                                            max-width: 300px;
                                            height: 150px;
                                            object-fit: cover;
                                        ">

                                </div>

                            </div>


                            {{-- New Image --}}
                            <div class="mb-3">

                                <label class="form-label fw-semibold">
                                    Change Banner Image
                                </label>

                                <input type="file" name="image"
                                    class="form-control @error('image') is-invalid @enderror"
                                    accept=".jpg,.jpeg,.png,.webp">

                                <small class="text-muted">
                                    Leave empty to keep the current image.
                                </small>

                                @error('image')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror

                            </div>


                            {{-- Title --}}
                            <div class="mb-3">

                                <label class="form-label fw-semibold">
                                    Title
                                </label>

                                <input type="text" name="title"
                                    class="form-control @error('title') is-invalid @enderror"
                                    value="{{ old('title', $banner->title) }}" placeholder="Enter banner title">

                                @error('title')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror

                            </div>


                            {{-- Status --}}
                            <div class="form-check form-switch mb-4">

                                <input type="checkbox" name="status" value="1" class="form-check-input" id="status"
                                    {{ old('status', $banner->status) ? 'checked' : '' }}>

                                <label class="form-check-label" for="status">

                                    Active

                                </label>

                            </div>


                            {{-- Buttons --}}
                            <div class="d-flex gap-2 justify-content-center">

                                <a href="{{ route('banner') }}" class="btn btn-secondary px-4">

                                    Cancel

                                </a>

                                <button type="submit" id="submit_btn" class="btn btn-primary px-4">

                                    <i class="bi bi-check-lg me-1"></i>

                                    Update Banner

                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>

        </div>

    </div>


    {{-- Double Submit Prevention --}}
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            const form = document.getElementById('SubmitForm');
            const submitBtn = document.getElementById('submit_btn');

            let isSubmitting = false;

            form.addEventListener('submit', function(e) {

                // Prevent multiple submissions
                if (isSubmitting) {
                    e.preventDefault();
                    return false;
                }

                // Mark as submitting
                isSubmitting = true;

                // Disable button
                submitBtn.disabled = true;

                // Change button text
                submitBtn.innerHTML =
                    '<i class="spinner-border spinner-border-sm me-1"></i> Processing...';

            });

        });
    </script>
@endsection