@extends('admin.master')

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

    <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 Promotional Banner
            </h1>
            <p class="mt-1 text-[13px] text-slate-500">
                Add promotional product banner information
            </p>
        </div>

        <a href="{{ route('admin.promotional-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>

    <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-rectangle-ad mr-2"></i>
                Promotional Banner Information
            </h2>
        </div>

        <form action="{{ route('admin.promotional-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">

                <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>

                <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>

                <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>
                        Promotional 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 promotional 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="Promotional Banner Preview"
                                 class="h-[210px] w-full rounded-md object-cover">
                        </div>
                    </div>
                </div>

            </div>

            <div class="mt-5 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
                <a href="{{ route('admin.promotional-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>

@include('admin.promotional-banner.partials.script')
@endsection