@extends('backend.layouts.app')

@section('title', 'Edit Photo Gallery')

@section('content')
    @php
        $pageTitle = 'Edit Photo Gallery';
        $indexRoute = 'content-photo-gallery.index';
        $indexLabel = 'Photo Galleries';
    @endphp
    @include('backend.layouts.partials._page_header')

    <script>
        function gallerySlug() {
            return {
                manual: false,
                checkTimer: null,
                init() {
                    document.addEventListener('gallery-title-changed', (e) => {
                        if (!this.manual && this.$refs.slugInput) {
                            this.$refs.slugInput.value = this.slugify(e.detail || '');
                            this.checkSlug();
                        }
                    });
                },
                slugify(str) {
                    return (str || '')
                        .toLowerCase()
                        .trim()
                        .replace(/[^\w\s-]/g, '')
                        .replace(/[\s_]+/g, '-')
                        .replace(/-+/g, '-')
                        .replace(/^-|-$/g, '');
                },
                onManualEdit() {
                    this.manual = true;
                    this.checkSlug();
                },
                checkSlug() {
                    const el = this.$refs.slugInput;
                    const msg = this.$refs.slugMsg;
                    if (!el || !msg) return;
                    clearTimeout(this.checkTimer);
                    const code = el.value.trim();
                    if (!code) {
                        msg.className = 'hidden mt-1.5 text-xs';
                        msg.textContent = '';
                        return;
                    }
                    this.checkTimer = setTimeout(() => {
                        fetch('{{ route('content-photo-gallery.check-slug') }}?code=' + encodeURIComponent(code) + '&exclude_id={{ $gallery->gallery_id }}', {
                            headers: { 'X-Requested-With': 'XMLHttpRequest' }
                        })
                        .then(r => r.json())
                        .then(data => {
                            if (data.exists) {
                                msg.className = 'mt-1.5 text-xs text-warning-500';
                                msg.textContent = 'Slug already used — will be saved as "' + data.suggestion + '"';
                            } else {
                                msg.className = 'mt-1.5 text-xs text-success-500';
                                msg.textContent = 'Slug is available';
                            }
                        })
                        .catch(() => {
                            msg.className = 'hidden mt-1.5 text-xs';
                        });
                    }, 350);
                }
            };
        }
    </script>

<form id="main-form" action="{{ route('content-photo-gallery.update', $gallery->gallery_id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="space-y-6">

                {{-- Translations --}}
                <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="px-5 py-4 sm:px-6 sm:py-5">
                        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Translations</h3>
                    </div>
                    <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                        @php
                            $inputClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30';
                            $firstLang = array_key_first($languages->toArray());
                            $mainLangCode = $firstLang;
                            foreach ($languages as $code => $descr) {
                                $oldMain = old('translations.' . $code . '.main');
                                if ($oldMain !== null && $oldMain) {
                                    $mainLangCode = $code;
                                    break;
                                }
                            }
                            if (!old('translations')) {
                                $mainTrans = $gallery->translations->firstWhere('gallery_translation_main', 1);
                                $mainLangCode = $mainTrans ? $mainTrans->gallery_translation_language : $firstLang;
                            }

                            $titleErrorLang = null;
                            foreach ($languages as $code => $descr) {
                                if ($errors->has('translations.' . $code . '.title')) {
                                    $titleErrorLang = $code;
                                    break;
                                }
                            }
                            $initialLang = $titleErrorLang ?? $mainLangCode;
                        @endphp
                        <div x-data="{ selectedLang: '{{ $initialLang }}', mainLang: '{{ $mainLangCode }}' }" class="space-y-6">
                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Language</label>
                                    <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                                        <select x-model="selectedLang"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                            :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                                            @change="isOptionSelected = true">
                                            @foreach ($languages as $code => $descr)
                                                <option value="{{ $code }}"
                                                    class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                                                    {{ $descr }}</option>
                                            @endforeach
                                        </select>
                                        <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                            <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                                <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            </svg>
                                        </span>
                                    </div>
                                </div>
                                <div>
                                    <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Title <span class="text-error-500">*</span></label>
                                    @foreach ($languages as $code => $descr)
                                        @php
                                            $translation = $gallery->translations->firstWhere('gallery_translation_language', $code);
                                            $titleVal = old("translations.$code.title", $translation->gallery_translation_title ?? '');
                                        @endphp
                                    <div x-show="selectedLang === '{{ $code }}'"
                                        x-transition:enter="transition ease-out duration-200"
                                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100">
                                        <input type="text" name="translations[{{ $code }}][title]"
                                            value="{{ old('translations.' . $code . '.title', $translation->gallery_translation_title ?? '') }}"
                                            @input="$dispatch('gallery-title-changed', $event.target.value)"
                                            class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('translations.' . $code . '.title') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror">
                                        @error('translations.' . $code . '.title')
                                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                                        @enderror
                                    </div>
                                    @endforeach
                                </div>
                            </div>

                            @foreach ($languages as $code => $descr)
                                @php
                                    $translation = $gallery->translations->firstWhere('gallery_translation_language', $code);
                                    $titleVal = old("translations.$code.title", $translation->gallery_translation_title ?? '');
                                    $descrVal = old("translations.$code.descr", $translation->gallery_translation_descr ?? '');
                                @endphp
                                <div x-show="selectedLang === '{{ $code }}'"
                                    x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
                                    x-transition:enter-end="opacity-100">
                                    <div class="space-y-4">
                                        <div>
                                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Description ({{ $descr }})</label>
                                            <textarea name="translations[{{ $code }}][descr]" rows="5"
                                                class="summernote-editor w-full"
                                                id="summernote-{{ $code }}">{{ $descrVal }}</textarea>
                                            @error('translations.' . $code . '.descr')
                                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                                            @enderror
                                        </div>

                                        <div class="flex items-center gap-2">
                                            <input type="hidden" name="translations[{{ $code }}][main]"
                                                :value="mainLang === '{{ $code }}' ? 1 : 0">
                                            <label class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                                                <div class="relative">
                                                    <div @click="mainLang = '{{ $code }}'"
                                                        :class="mainLang === '{{ $code }}' ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'"
                                                        class="hover:border-brand-500 dark:hover:border-brand-500 flex h-5 w-5 items-center justify-center rounded-md border-[1.25px] cursor-pointer">
                                                        <span :class="mainLang === '{{ $code }}' ? '' : 'opacity-0'">
                                                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                                                                <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white" stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round"/>
                                                            </svg>
                                                        </span>
                                                    </div>
                                                </div>
                                                Main Translation ({{ $descr }})
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
                    <div class="px-5 py-4 sm:px-6 sm:py-5">
                        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Gallery Information</h3>
                    </div>
                    <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
                        @php $inputClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30'; @endphp

                        {{-- Portal --}}
                        <div class="mb-6">
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Portal Display</label>
                            <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                                <select name="gallery_portal"
                                    class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                                    :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                                    @change="isOptionSelected = true">
                                    <option value="" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">-- Select Portal --</option>
                                    @foreach ($portals as $code => $descr)
                                        <option value="{{ $code }}"
                                            class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
                                            {{ old('gallery_portal', $gallery->gallery_portal) == $code ? 'selected' : '' }}>{{ $descr }}
                                        </option>
                                    @endforeach
                                </select>
                                <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                    <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </span>
                            </div>
                            @error('gallery_portal')
                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Gallery Slug --}}
                        <div class="mb-6">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1.5">Gallery Slug</label>
                            <div x-data="gallerySlug()" x-init="init()">
                                <input type="text" name="gallery_code" x-ref="slugInput"
                                    value="{{ old('gallery_code', $gallery->gallery_code) }}"
                                    @input="onManualEdit()"
                                    placeholder="Leave empty to auto-generate from Title, or type a custom slug"
                                    class="{{ $inputClass }} bg-gray-50 dark:bg-gray-800">
                                <p x-ref="slugMsg" class="hidden mt-1.5 text-xs"></p>
                            </div>
                            @error('gallery_code')
                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Status + Category --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Status <span class="text-error-500">*</span></label>
                                <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                                    <select name="gallery_status"
                                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('gallery_status') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror"
                                        :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                                        @change="isOptionSelected = true">
                                        <option value="" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">-- Select Status --</option>
                                        @foreach ($statuses as $code => $descr)
                                            <option value="{{ $code }}"
                                                class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
                                                {{ old('gallery_status', $gallery->gallery_status) == $code ? 'selected' : '' }}>{{ $descr }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                        <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </span>
                                </div>
                                @error('gallery_status')
                                    <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Category <span class="text-error-500">*</span></label>
                                <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                                    <select name="gallery_cat"
                                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent bg-none px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 @error('gallery_cat') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 @else border-gray-300 dark:border-gray-700 @enderror"
                                        :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                                        @change="isOptionSelected = true">
                                        <option value="" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">-- Select Category --</option>
                                        @foreach ($categories as $code => $descr)
                                            <option value="{{ $code }}"
                                                class="text-gray-700 dark:bg-gray-900 dark:text-gray-400"
                                                {{ old('gallery_cat', $gallery->gallery_cat) == $code ? 'selected' : '' }}>{{ $descr }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                        <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                            <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg>
                                    </span>
                                </div>
                                @error('gallery_cat')
                                    <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        {{-- Date + Location --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Date</label>
                                <div class="relative">
                                    <input type="date" name="gallery_date"
                                        value="{{ old('gallery_date', $gallery->gallery_date ? \Carbon\Carbon::parse($gallery->gallery_date)->format('Y-m-d') : '') }}"
                                        onclick="this.showPicker()"
                                        class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30">
                                    <span class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                        <svg class="fill-current" width="20" height="20" viewBox="0 0 20 20">
                                            <path d="M6 2a1 1 0 0 1 1 1v1h6V3a1 1 0 1 1 2 0v1h1a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1V3a1 1 0 0 1 1-1Zm8 4H6v1a1 1 0 0 0 2 0V6h4v1a1 1 0 0 0 2 0V6ZM4 8v8h12V8H4Z"/>
                                        </svg>
                                    </span>
                                </div>
                                @error('gallery_date')
                                    <p class="text-error-500 mt-1.5 text-xs">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Location</label>
                                <input type="text" name="gallery_location" value="{{ old('gallery_location', $gallery->gallery_location) }}" class="{{ $inputClass }}">
                                @error('gallery_location')
                                    <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        {{-- Thumbnail --}}
                        <div class="mb-6">
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Thumbnail</label>
                            <div class="mb-3">
                                <img src="{{ image_url($gallery->gallery_thumbnail) }}" alt="Current Thumbnail" class="h-20 w-auto rounded border">
                                @if($gallery->gallery_thumbnail)
                                    <p class="text-xs text-gray-500 mt-1">Current: {{ str_starts_with($gallery->gallery_thumbnail, 'http') ? $gallery->gallery_thumbnail : basename($gallery->gallery_thumbnail) }}</p>
                                @endif
                            </div>
                            <input type="file" name="gallery_thumbnail" class="filepond w-full" accept="image/png, image/jpeg, image/jpg, image/webp">
                            <p class="text-xs text-gray-400 mt-1">Thumbnail · 425 × 300 px · JPG, PNG, WebP · Max 15MB.</p>
                            @error('gallery_thumbnail')
                                <p class="text-error-500 mt-1.5 text-xs">{{ $message }}</p>
                            @enderror
                        </div>

                </div>
            </div>

            <div class="flex justify-end gap-3">
                <a href="{{ route('content-photo-gallery.index') }}"
                    class="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300">Cancel</a>
                <button type="submit"
                    class="rounded-lg bg-brand-500 px-4 py-2 text-sm text-white hover:bg-brand-600">Update</button>
            </div>
        </div>
    </form>
</div>

    <link href="{{ asset('vendor/summernote/summernote-lite.min.css') }}" rel="stylesheet">
    <link href="{{ asset('vendor/summernote/summernote-tailadmin.css') }}" rel="stylesheet">
    <script src="{{ asset('vendor/summernote/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('vendor/summernote/summernote-lite.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {

            @foreach ($languages as $code => $descr)
                jQuery('#summernote-{{ $code }}').summernote({
                    height: 300,
                    tabsize: 2,
                    codeviewFilter: false,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'italic', 'clear']],
                        ['fontname', ['fontname']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['insert', ['link', 'picture', 'video']],
                        ['view', ['codeview', 'help']],
                    ],
                });
            @endforeach

            jQuery('form#main-form').on('submit', function() {
                @foreach ($languages as $code => $descr)
                    jQuery('#summernote-{{ $code }}').val(jQuery('#summernote-{{ $code }}').summernote('code'));
                @endforeach
            });

            document.querySelectorAll('.filepond').forEach((el) => {
                const isMultiple = el.hasAttribute('multiple');
                FilePond.create(el, {
                    credits: false,
                    allowImagePreview: true,
                    imagePreviewHeight: 170,
                    storeAsFile: true,
                    allowMultiple: isMultiple,
                });
            });
        });
    </script>
@endsection