@extends('backend.layouts.app')

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

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

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

                <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</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 class="flex gap-2">
                                <input type="text" name="gallery_code"
                                    value="{{ old('gallery_code', $gallery->gallery_code) }}"
                                    class="{{ $inputClass }} bg-gray-50 dark:bg-gray-800">
                                <button type="button"
                                    @click="$el.previousElementSibling.value = crypto.randomUUID ? crypto.randomUUID() : '{{ Illuminate\Support\Str::uuid() }}'"
                                    class="px-3 py-2 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400"
                                    title="Regenerate">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                                    </svg>
                                </button>
                            </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</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 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 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-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">Category</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 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 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-error-500 mt-1.5 text-xs">{{ $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>
                            @if($gallery->gallery_thumbnail)
                                <div class="mb-3">
                                    <img src="{{ Storage::url($gallery->gallery_thumbnail) }}" alt="Current Thumbnail" class="h-20 w-auto rounded border">
                                    <p class="text-xs text-gray-500 mt-1">Current: {{ basename($gallery->gallery_thumbnail) }}</p>
                                </div>
                            @endif
                            <input type="file" name="gallery_thumbnail" class="filepond w-full">
                            <p class="text-xs text-gray-400 mt-1">* PNG, JPG or JPEG, max 1MB, dimensions 425x300 px.</p>
                            @error('gallery_thumbnail')
                                <p class="text-error-500 mt-1.5 text-xs">{{ $message }}</p>
                            @enderror
                        </div>

                </div>
            </div>

            {{-- 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
                        $firstLang = array_key_first($languages->toArray());
                        $mainLangCode = $firstLang;
                        foreach ($languages as $code => $descr) {
                            $oldMain = old('translations.' . $code . '.main');
                            if ($oldMain !== null) {
                                if ($oldMain) {
                                    $mainLangCode = $code;
                                }
                                break;
                            }
                        }
                        if (!old('translations')) {
                            $mainTrans = $gallery->translations->firstWhere('gallery_translation_main', 1);
                            $mainLangCode = $mainTrans ? $mainTrans->gallery_translation_language : $firstLang;
                        }
                    @endphp
                    <div x-data="{ selectedLang: '{{ $firstLang }}', 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="{{ $titleVal }}"
                                            class="{{ $inputClass }}">
                                        @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="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,
                    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