@php
    use App\Enum\GalleryTypeEnum;
    use App\Enum\DistrictEnum;
@endphp
<!-- Slug Display -->
<div class="mb-4">
    <div class="inline-block bg-blue-50 border border-blue-500 rounded-lg px-4 py-2 shadow-sm">
        <span class="text-sm font-semibold text-gray-600">Slug:</span>
        <span id="slug"
            class="text-sm font-bold text-blue-600 ">{{ old('slug', isset($gallery) ? $gallery->slug : '') }}</span>
    </div>
    <input type="hidden" name="slug" value="{{ old('slug', isset($gallery) ? $gallery->slug : '') }}">
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- Name EN -->
    <div>
        <label for="name_en" class="block text-sm font-medium text-gray-700">Name En <span
                class="text-red-600">*</span></label>
        <input type="text" id="name_en" name="name_en"
            value="{{ old('name_en', isset($gallery) ? $gallery->name_en : null) }}"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name_en') border-red-500 @enderror">

        @error('name_en')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Name NP -->
    <div>
        <label for="name_np" class="block text-sm font-medium text-gray-700">Name Np</label>
        <input type="text" id="name_np" name="name_np"
            value="{{ old('name_np', isset($gallery) ? $gallery->name_np : null) }}"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('name_np') border-red-500 @enderror">

        @error('name_np')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- type -->
    <div>
        <label for="type" class="block text-sm font-medium text-gray-700">Type <span
                class="text-red-600">*</span></label>
        <select name="type" id="type"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('type') border-red-500 @enderror">
            @foreach ($types as $type)
                <option value="{{ $type->value }}"
                    {{ old('type') == $type->value ? 'selected' : (isset($gallery) && $gallery->type == $type ? 'selected' : '') }}>
                    {{ GalleryTypeEnum::map($type->value) }}</option>
            @endforeach
        </select>

        @error('type')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Cover Image -->
    <div class="imageTypeSection hidden">
        <label class="block text-sm font-medium text-gray-700" for="cover_image">Cover Image <span
                class="text-red-600">*</span></label>
        <input type="file" name="cover_image" id="cover_image" accept="image/*"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('cover_image') border-red-500 @enderror image-type-input">

        @error('cover_image')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror

        @if (isset($gallery) && $gallery->cover_image)
            <div class="mt-4" id="currentCoverImageDiv">
                <input type="hidden" name="cover_image" value="{{ $gallery->cover_image }}" id="currentCoverImage">

                <div
                    class="w-24 h-24 rounded-xl overflow-hidden shadow-md ring-1 ring-gray-300 hover:ring-blue-400 transition-all duration-300">
                    <img src="{{ asset($gallery->cover_image) }}" alt="Current Cover Image"
                        class="w-full h-full object-cover">
                </div>
            </div>
        @endif
    </div>

    <!-- Images -->
    <div class="imageTypeSection hidden">
        <label class="block text-sm font-medium text-gray-700" for="images">Images <span
                class="text-red-600">*</span></label>
        <input type="file" name="images[]" id="images" accept="image/*" multiple
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('images') border-red-500 @enderror image-type-input">

        @error('images')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror

        @if (isset($gallery) && $gallery->value && $gallery->type == GalleryTypeEnum::IMAGE)
            <div class="mt-4 flex flex-wrap gap-3" id="currentImageDiv">
                <input type="hidden" name="current_images[]" value="{{ $gallery->value }}" id="currentImage">
                @foreach (json_decode($gallery->value) as $key => $image)
                    <div class="relative ml-2 group">

                        <!-- Remove Icon -->
                        <button type="button"
                            class="absolute top-1 right-1 bg-white text-gray-600 w-5 h-5 rounded-full flex items-center justify-center text-xs shadow-md hover:bg-red-600 hover:text-white  transition"
                            onclick="removeImage(this, '{{ $image }}')" data-index="{{ $key }}">
                            <i class="fa fa-times"></i>
                        </button>

                        <!-- Image Preview -->
                        <a href="{{ asset($image) }}" target="_blank">
                            <div
                                class="w-20 h-20 rounded-xl overflow-hidden shadow-md ring-1 ring-gray-300 hover:ring-blue-400 transition-all duration-300">
                                <img src="{{ asset($image) }}" alt="Current Image" class="w-full h-full object-cover">
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    <!-- Video Link -->
    <div class="col-span-3 videoTypeSection hidden">
        <label for="videoLink" class="block text-sm font-medium text-gray-700">Video Link <span
                class="text-red-600">*</span></label>
        <input type="text" name="video_link" id="videoLink"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('video_link') border-red-500 @enderror video-type-input"
            value="{{ old('video_link', isset($gallery) ? $gallery->value : '') }}">

        @error('video_link')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Published Date -->
    <div>
        <label for="published_date" class="block text-sm font-medium text-gray-700">Published Date <span
                class="text-red-600">*</span></label>
        <input type="date" id="published_date" name="published_date"
            value="{{ old('published_date', isset($gallery) ? $gallery->published_date : null) }}"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('published_date') border-red-500 @enderror">

        @error('published_date')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Display Order -->
    <div>
        <label for="display_order" class="block text-sm font-medium text-gray-700">Display Order <span
                class="text-red-600">*</span></label>
        <input type="number" id="display_order" name="display_order" min="1"
            value="{{ old('display_order', isset($gallery) ? $gallery->display_order : $displayOrder ?? 0) }}"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 @error('display_order') border-red-500 @enderror">

        @error('display_order')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Is Published -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Is Published? <span
                class="text-red-600">*</span></label>
        <div class="flex space-x-6 mt-1">
            <label class="inline-flex items-center">
                <input type="radio" name="is_published" value="1" class="form-radio text-blue-600"
                    {{ isset($gallery) ? ($gallery->is_published == 1 ? 'checked' : '') : 'checked' }}>
                <span class="ml-2 text-gray-700">Yes</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" name="is_published" value="0" class="form-radio text-blue-600"
                    {{ isset($gallery) ? ($gallery->is_published == 0 ? 'checked' : '') : '' }}>
                <span class="ml-2 text-gray-700">No</span>
            </label>
        </div>
    </div>

    <!-- Is Field Activities -->
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Is Field Activities? <span
                class="text-red-600">*</span></label>
        <div class="flex space-x-6 mt-1">
            <label class="inline-flex items-center">
                <input type="radio" name="is_field_activities" value="1" class="form-radio text-blue-600"
                    {{ isset($gallery) ? ($gallery->is_field_activities == 1 ? 'checked' : '') : '' }}>
                <span class="ml-2 text-gray-700">Yes</span>
            </label>
            <label class="inline-flex items-center">
                <input type="radio" name="is_field_activities" value="0" class="form-radio text-blue-600"
                    {{ isset($gallery) ? ($gallery->is_field_activities == 0 ? 'checked' : '') : 'checked' }}>
                <span class="ml-2 text-gray-700">No</span>
            </label>
        </div>
    </div>

    <!-- district -->
    <div class="fieldActivitySection hidden">
        <label for="district" class="block text-sm font-medium text-gray-700">District <span
                class="text-red-600">*</span></label>
        <select name="district" id="district"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm bg-white focus:ring-blue-500 focus:border-blue-500 @error('district') border-red-500 @enderror">
            <option value="">-- Select District --</option>
            @foreach ($districts as $district)
                <option value="{{ $district->value }}"
                    {{ old('district') == $district->value ? 'selected' : (isset($gallery) && $gallery->district == $district->value ? 'selected' : '') }}>
                    {{ DistrictEnum::map($district->value) }}</option>
            @endforeach
        </select>

        @error('district')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Description En -->
    <div class="lg:col-span-3">
        <label for="description_en" class="block text-sm font-medium text-gray-700">Description En</label>
        <textarea id="description_en"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 editor summernote"
            name="description_en">{{ old('description_en', isset($gallery) ? $gallery->description_en : null) }}</textarea>
        @error('description_en')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>

    <!-- Description Np -->
    <div class="lg:col-span-3">
        <label for="description_np" class="block text-sm font-medium text-gray-700">Description Np</label>
        <textarea id="description_np"
            class="mt-1 block w-full px-3 py-2 border rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 editor summernote"
            name="description_np">{{ old('description_np', isset($gallery) ? $gallery->description_np : null) }}</textarea>
        @error('description_np')
            <p class="text-sm text-red-600 mt-1">{{ $message }}</p>
        @enderror
    </div>
</div>


@push('scripts')
    <script>
        //Image delete section
        function removeImage(button, imagePath) {
            index = $(button).data('index');
            url = @json(route('gallery.delete', [':id', ':imageIndex']));

            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#b1b1b0',
                confirmButtonText: 'Yes, remove it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    const csrfToken = $('meta[name="csrf-token"]').attr('content');

                    const pathParts = window.location.pathname.split('/')
                    url = url.replace(':id', pathParts[2]).replace(':imageIndex', index);

                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': csrfToken
                        },
                        type: "DELETE",
                        url: url,
                        success: function(response) {
                            if (response.status == true) {
                                button.parentElement.remove();

                                currentName = @json('currentImage');
                                $('#' + currentName).val(response.images);

                                successToast(response.message);
                            } else {
                                errorToast(response.message);
                            }
                        },
                        error: function() {
                            errorToast(
                                'Sorry, there was some issue. Please try again!!'
                            );
                        }
                    });
                }
            });
        }



        $(document).ready(function() {
            checkType();
            checkFieldActivity();
        });

        $(document).on('input', '#name_en', function() {
            let nameEnValue = $(this).val();
            let slug = generateSlug(nameEnValue);
            $('input[name=slug]').val(slug);
            $('#slug').text(slug);
        });

        $('#cover_image').on('change', function() {
            if (this.files.length > 0) {
                $('#currentCoverImageDiv').addClass('hidden'); // Hide the primary logo preview
                $('#currentCoverImage').val(null); // Clear the current primary logo value
            }
        });

        $('#type').change(function(e) {
            e.preventDefault();

            checkType();
        });

        $('input[name="is_field_activities"]').on('change', function() {
            checkFieldActivity();
        });

        function checkType() {
            type = $('#type').val();

            if (type == @json(GalleryTypeEnum::IMAGE->value)) {
                $('.imageTypeSection').removeClass('hidden');
                $('.videoTypeSection').addClass('hidden');

                $('.video-type-input').val(null);
            } else {
                $('.imageTypeSection').addClass('hidden');
                $('.videoTypeSection').removeClass('hidden');

                $('.image-type-input').val(null);
            }
        }

        function checkFieldActivity() {
            activity = $('input[name="is_field_activities"]:checked').val();

            if (activity == 1) {
                $('.fieldActivitySection').removeClass('hidden');
            } else {
                $('.fieldActivitySection').addClass('hidden');
                $('#district').val('').trigger('change');
            }
        }

        function generateSlug(text) {
            return text
                .toLowerCase()
                .trim()
                .replace(/[^a-z0-9\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/-+/g, '-');
        }
    </script>
@endpush