@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">Create Banner</h4>
                </div>

            </div>
        </div>


        {{-- Centered Card --}}
        <div class="row justify-content-center">
            <div class="col-12 col-md-8 col-lg-7">

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

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

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

                            @csrf

                            {{-- =================================================
    BANNER IMAGE
================================================== --}}
                            <div class="mb-4">

                                <label for="bannerImage" class="form-label fw-semibold">
                                    Banner Image

                                </label>

                                {{-- Image Preview --}}
                                <div id="imagePreviewContainer" class="border rounded-3 p-3 bg-light mb-3 text-center"
                                    style="display: none;">

                                    <img id="imagePreview" src="" alt="Banner Preview" class="img-fluid rounded"
                                        style="max-height: 250px; object-fit: contain;">

                                </div>


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


                                <div class="mt-2">

                                    <small class="text-muted">
                                        <i class="bi bi-info-circle me-1"></i>
                                        JPG, JPEG, PNG or WEBP · Maximum size: 5 MB
                                    </small>

                                </div>


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

                            </div>


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

                                <label for="bannerTitle" class="form-label fw-semibold">
                                    Title
                                    <span class="text-muted fw-normal">(Optional)</span>
                                </label>

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

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

                            </div>


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

                                <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-save me-1"></i>
                                    Save Banner

                                </button>

                            </div>

                        </form>

                    </div>

                </div>

            </div>
        </div>

    </div>


    <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 double submission
                if (isSubmitting) {
                    e.preventDefault();
                    return false;
                }

                const image = form.querySelector('[name="image"]');

                // Remove previous invalid class
                form.querySelectorAll('.is-invalid').forEach(function(field) {
                    field.classList.remove('is-invalid');
                });


                // Image validation
                if (!image.files || image.files.length === 0) {

                    e.preventDefault();

                    image.classList.add('is-invalid');

                    showValidationToast(
                        'The image field is required.'
                    );

                    image.focus();

                    return false;
                }


                // Everything is valid
                isSubmitting = true;

                submitBtn.disabled = true;

                submitBtn.innerHTML = 'Processing...';

            });


            // Toast
            function showValidationToast(message) {

                const oldToast =
                    document.getElementById('clientValidationToast');

                if (oldToast) {
                    oldToast.remove();
                }

                let container =
                    document.querySelector('.toast-container-custom');

                if (!container) {

                    container = document.createElement('div');

                    container.className =
                        'toast-container-custom';

                    document.body.appendChild(container);
                }

                const toast = document.createElement('div');

                toast.id = 'clientValidationToast';

                toast.className =
                    'custom-toast toast-error';

                toast.innerHTML = `
                <div class="toast-icon">
                    ⚠
                </div>

                <div class="toast-content">
                    <div class="toast-title">
                        Error
                    </div>

                    <div class="toast-message">
                        ${message}
                    </div>
                </div>

                <button type="button" class="toast-close">
                    ×
                </button>

                <div class="toast-progress"></div>
            `;

                container.appendChild(toast);

                toast.querySelector('.toast-close')
                    .addEventListener('click', function() {
                        closeToast(toast);
                    });

                setTimeout(function() {

                    if (toast && toast.parentNode) {
                        closeToast(toast);
                    }

                }, 3000);

            }


            // Close toast
            function closeToast(toast) {

                toast.style.animation =
                    'fadeOut 0.4s forwards';

                setTimeout(function() {

                    if (toast && toast.parentNode) {
                        toast.remove();
                    }

                }, 400);

            }

            // Banner image
            const imageInput = document.getElementById('bannerImage');
            const imagePreview = document.getElementById('imagePreview');
            const imagePreviewContainer = document.getElementById('imagePreviewContainer');


            imageInput.addEventListener('change', function() {

                const file = this.files[0];

                if (!file) {
                    imagePreview.src = '';
                    imagePreviewContainer.style.display = 'none';
                    return;
                }


                // Check if selected file is an image
                if (!file.type.startsWith('image/')) {
                    imagePreview.src = '';
                    imagePreviewContainer.style.display = 'none';
                    return;
                }


                const reader = new FileReader();

                reader.onload = function(e) {

                    imagePreview.src = e.target.result;

                    imagePreviewContainer.style.display = 'block';

                };

                reader.readAsDataURL(file);

            });

        });
    </script>
@endsection