@extends('admin.master')

@section('content')
<div class="px-3 py-4">

    {{-- Header --}}
    <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h1 class="text-[20px] font-bold text-slate-800">
                <i class="fa-solid fa-plus mr-2 text-[#156994]"></i>
                Create Banner
            </h1>
            <p class="mt-1 text-[13px] text-slate-500">
                Add product banner information
            </p>
        </div>

        <a href="{{ route('admin.banners.index') }}"
           class="inline-flex items-center justify-center rounded-lg bg-[#2f91c8] px-4 py-2 text-[13px] font-bold text-white shadow-sm transition hover:bg-[#2179aa]">
            <i class="fa-solid fa-arrow-left mr-2"></i>
            Back
        </a>
    </div>

    {{-- Form Card --}}
    <div class="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">

        <div class="bg-[#156994] px-4 py-3">
            <h2 class="text-[14px] font-bold text-white">
                <i class="fa-solid fa-image mr-2"></i>
                Banner Information
            </h2>
        </div>

        <form action="{{ route('admin.banners.store') }}"
              method="POST"
              enctype="multipart/form-data"
              class="bg-slate-100 p-4">
            @csrf

            <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">

                {{-- Searchable Product --}}
                <div class="relative">
                    <label class="mb-2 block text-[13px] font-bold text-slate-700">
                        <i class="fa-solid fa-box mr-1 text-[#156994]"></i>
                        Product
                    </label>

                    <input type="hidden"
                           name="product_id"
                           id="productId"
                           value="{{ old('product_id') }}">

                    <div class="relative">
                        <input type="text"
                               id="productSearch"
                               autocomplete="off"
                               placeholder="Search product..."
                               class="h-[42px] w-full rounded-md border @error('product_id') border-red-400 @else border-slate-300 @enderror bg-white px-3 pr-9 text-[13px] font-medium text-slate-800 outline-none transition focus:border-[#2f91c8] focus:ring-2 focus:ring-blue-100">

                        <button type="button"
                                id="clearProduct"
                                class="absolute right-3 top-1/2 hidden -translate-y-1/2 text-slate-400 hover:text-red-500">
                            <i class="fa-solid fa-xmark"></i>
                        </button>
                    </div>

                    <div id="productDropdown"
                         class="absolute z-50 mt-1 hidden max-h-64 w-full overflow-y-auto rounded-md border border-slate-200 bg-white shadow-lg">

                        @foreach($products as $product)
                            <button type="button"
                                    class="product-option flex w-full items-center justify-between border-b border-slate-100 px-3 py-2 text-left text-[13px] font-medium text-slate-800 transition hover:bg-slate-100"
                                    data-id="{{ $product->id }}"
                                    data-name="{{ $product->name }}">
                                <span>{{ $product->name }}</span>
                                <i class="fa-solid fa-check hidden text-[#2f91c8]"></i>
                            </button>
                        @endforeach

                        <div id="noProductFound"
                             class="hidden px-3 py-3 text-center text-[13px] font-semibold text-slate-500">
                            <i class="fa-solid fa-magnifying-glass mr-1"></i>
                            No product found
                        </div>
                    </div>

                    @error('product_id')
                        <p class="mt-1 text-[12px] font-semibold text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Status --}}
                <div>
                    <label class="mb-2 block text-[13px] font-bold text-slate-700">
                        <i class="fa-solid fa-toggle-on mr-1 text-[#156994]"></i>
                        Status <span class="text-red-500">*</span>
                    </label>

                    <select name="status"
                            class="h-[42px] w-full rounded-md border @error('status') border-red-400 @else border-slate-300 @enderror bg-white px-3 text-[13px] font-medium text-slate-800 outline-none transition focus:border-[#2f91c8] focus:ring-2 focus:ring-blue-100">
                        <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive</option>
                    </select>

                    @error('status')
                        <p class="mt-1 text-[12px] font-semibold text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Image Upload --}}
                <div class="lg:col-span-2">
                    <label class="mb-2 block text-[13px] font-bold text-slate-700">
                        <i class="fa-solid fa-upload mr-1 text-[#156994]"></i>
                        Banner Image <span class="text-red-500">*</span>
                    </label>

                    <label class="flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed @error('image') border-red-400 @else border-slate-300 @enderror bg-white px-5 py-8 text-center transition hover:bg-slate-50">
                        <i class="fa-solid fa-cloud-arrow-up mb-3 text-[34px] text-[#2f91c8]"></i>

                        <span class="text-[14px] font-bold text-slate-800">
                            Click to upload banner image
                        </span>

                        <span class="mt-1 text-[12px] font-medium text-slate-500">
                            JPG, JPEG, PNG, WEBP up to 2MB
                        </span>

                        <input type="file"
                               name="image"
                               id="imageInput"
                               accept="image/*"
                               class="hidden">
                    </label>

                    @error('image')
                        <p class="mt-1 text-[12px] font-semibold text-red-600">{{ $message }}</p>
                    @enderror

                    <p class="mt-2 text-[12px] font-medium text-slate-500">
                        Recommended size: 1200x400 px.
                    </p>

                    <div id="previewBox" class="mt-4 hidden">
                        <p class="mb-2 text-[13px] font-bold text-slate-700">
                            Image Preview
                        </p>

                        <div class="overflow-hidden rounded-lg border border-slate-200 bg-white p-2 shadow-sm">
                            <img id="imagePreview"
                                 src=""
                                 alt="Banner Preview"
                                 class="h-[210px] w-full rounded-md object-cover">
                        </div>
                    </div>
                </div>

            </div>

            {{-- Buttons --}}
            <div class="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                <a href="{{ route('admin.banners.index') }}"
                   class="inline-flex items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2 text-[13px] font-bold text-slate-700 transition hover:bg-slate-50">
                    Cancel
                </a>

                <button type="submit"
                        class="inline-flex items-center justify-center rounded-lg bg-[#2f91c8] px-5 py-2 text-[13px] font-bold text-white transition hover:bg-[#2179aa]">
                    <i class="fa-solid fa-floppy-disk mr-2"></i>
                    Save Banner
                </button>
            </div>

        </form>
    </div>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const productId = document.getElementById('productId');
    const productSearch = document.getElementById('productSearch');
    const productDropdown = document.getElementById('productDropdown');
    const productOptions = document.querySelectorAll('.product-option');
    const noProductFound = document.getElementById('noProductFound');
    const clearProduct = document.getElementById('clearProduct');

    function openDropdown() {
        productDropdown.classList.remove('hidden');
    }

    function closeDropdown() {
        setTimeout(function () {
            productDropdown.classList.add('hidden');
        }, 150);
    }

    function filterProducts() {
        const searchValue = productSearch.value.toLowerCase().trim();
        let visibleCount = 0;

        productOptions.forEach(function (option) {
            const productName = option.dataset.name.toLowerCase();

            if (productName.includes(searchValue)) {
                option.classList.remove('hidden');
                visibleCount++;
            } else {
                option.classList.add('hidden');
            }
        });

        if (visibleCount === 0) {
            noProductFound.classList.remove('hidden');
        } else {
            noProductFound.classList.add('hidden');
        }
    }

    function clearSelectedProduct() {
        productId.value = '';
        productSearch.value = '';
        clearProduct.classList.add('hidden');

        productOptions.forEach(function (option) {
            option.querySelector('i').classList.add('hidden');
            option.classList.remove('bg-slate-100');
        });

        filterProducts();
    }

    productSearch.addEventListener('focus', function () {
        openDropdown();
        filterProducts();
    });

    productSearch.addEventListener('keyup', function () {
        productId.value = '';
        clearProduct.classList.toggle('hidden', this.value.length === 0);
        openDropdown();
        filterProducts();
    });

    productSearch.addEventListener('blur', closeDropdown);

    productOptions.forEach(function (option) {
        option.addEventListener('click', function () {
            const id = this.dataset.id;
            const name = this.dataset.name;

            productId.value = id;
            productSearch.value = name;
            clearProduct.classList.remove('hidden');

            productOptions.forEach(function (item) {
                item.querySelector('i').classList.add('hidden');
                item.classList.remove('bg-slate-100');
            });

            this.querySelector('i').classList.remove('hidden');
            this.classList.add('bg-slate-100');

            productDropdown.classList.add('hidden');
        });
    });

    clearProduct.addEventListener('click', function () {
        clearSelectedProduct();
        productSearch.focus();
        openDropdown();
    });

    const oldProductId = productId.value;

    if (oldProductId) {
        productOptions.forEach(function (option) {
            if (option.dataset.id == oldProductId) {
                productSearch.value = option.dataset.name;
                clearProduct.classList.remove('hidden');
                option.querySelector('i').classList.remove('hidden');
                option.classList.add('bg-slate-100');
            }
        });
    }

    const imageInput = document.getElementById('imageInput');
    const previewBox = document.getElementById('previewBox');
    const imagePreview = document.getElementById('imagePreview');

    imageInput.addEventListener('change', function () {
        const file = this.files[0];

        if (file) {
            const reader = new FileReader();

            reader.onload = function (event) {
                imagePreview.setAttribute('src', event.target.result);
                previewBox.classList.remove('hidden');
            };

            reader.readAsDataURL(file);
        } else {
            imagePreview.setAttribute('src', '');
            previewBox.classList.add('hidden');
        }
    });
});
</script>
@endsection