@extends('backend.layouts.app')

@section('title', 'Create Video')

@section('content')
    @php
        $pageTitle = 'Create Video';
        $indexRoute = 'content-video.index';
        $indexLabel = 'Videos';
    @endphp
    @include('backend.layouts.partials._page_header')

    <script>
        function videoSlug() {
            return {
                manual: false,
                checkTimer: null,
                init() {
                    document.addEventListener('video-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-video.check-slug') }}?code=' + encodeURIComponent(code), {
                            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 action="{{ route('content-video.store') }}" method="POST" enctype="multipart/form-data">
        @csrf
        <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">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) {
                            if (old('translations.' . $code . '.main')) {
                                $mainLangCode = $code;
                                break;
                            }
                        }

                        $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)
                                    <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') }}"
                                            @input="$dispatch('video-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)
                            <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 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">Video Information</h3>
                </div>
                <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">

                    @php
                        $inputBaseClass = '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';
                        $inputClass = $inputBaseClass . ' border-gray-300 dark:border-gray-700';
                    @endphp

                    <!-- Video Slug -->
                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Video Slug</label>
                        <div x-data="videoSlug()" x-init="init()">
                            <input type="text" name="video_code" x-ref="slugInput"
                                @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('video_code')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- ROW: Category, Status, Date, Source, Sort -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
                        <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="video_category" id="video_category" onchange="displayvideourl()"
                                    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('video_category') 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('video_category') == $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" xmlns="http://www.w3.org/2000/svg">
                                        <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('video_category')
                                <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">Status <span class="text-error-500">*</span></label>
                            <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                                <select name="video_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('video_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"
                                            {{ $loop->first ? '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" xmlns="http://www.w3.org/2000/svg">
                                        <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('video_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">Date</label>
                            <div class="relative">
                                <input type="date" name="video_date" value="{{ old('video_date') }}"
                                    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 bg-none px-4 py-2.5 pr-11 pl-4 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" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66659 1.5415C7.0808 1.5415 7.41658 1.87729 7.41658 2.2915V2.99984H12.5833V2.2915C12.5833 1.87729 12.919 1.5415 13.3333 1.5415C13.7475 1.5415 14.0833 1.87729 14.0833 2.2915V2.99984L15.4166 2.99984C16.5212 2.99984 17.4166 3.89527 17.4166 4.99984V7.49984V15.8332C17.4166 16.9377 16.5212 17.8332 15.4166 17.8332H4.58325C3.47868 17.8332 2.58325 16.9377 2.58325 15.8332V7.49984V4.99984C2.58325 3.89527 3.47868 2.99984 4.58325 2.99984L5.91659 2.99984V2.2915C5.91659 1.87729 6.25237 1.5415 6.66659 1.5415ZM6.66659 4.49984H4.58325C4.30711 4.49984 4.08325 4.7237 4.08325 4.99984V6.74984H15.9166V4.99984C15.9166 4.7237 15.6927 4.49984 15.4166 4.49984H13.3333H6.66659ZM15.9166 8.24984H4.08325V15.8332C4.08325 16.1093 4.30711 16.3332 4.58325 16.3332H15.4166C15.6927 16.3332 15.9166 16.1093 15.9166 15.8332V8.24984Z" fill=""/>
                                    </svg>
                                </span>
                            </div>
                            @error('video_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">Source</label>
                            <input type="text" name="video_source" value="{{ old('video_source') }}"
                                class="{{ $inputClass }}">
                            @error('video_source')
                                <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">Sort</label>
                            <input type="number" name="video_sorting" value="{{ old('video_sorting', 0) }}"
                                class="{{ $inputBaseClass }} @error('video_sorting') 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('video_sorting')
                                <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- URL (shown when category=youtube) -->
                    <div id="wrapper-url" class="mb-6" style="display:none;">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">URL</label>
                        <input type="text" name="video_url" value="{{ old('video_url') }}"
                            placeholder="https://www.youtube.com/embed/xxxxx"
                            class="{{ $inputClass }}">
                        @error('video_url')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Upload (shown when category=upload) -->
                    <div id="wrapper-upload" class="mb-6" style="display:none;">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Upload Video</label>
                        <input type="file" name="video_upload" class="filepond w-full" accept="video/mp4, video/x-msvideo, video/quicktime, video/x-ms-wmv, video/x-flv, video/x-matroska">
                        @include('backend.layouts.partials._upload-hint', ['text' => 'Video · MP4, AVI, MOV, WMV, FLV, MKV · Max 300MB'])
                        @error('video_upload')
                            <p class="text-error-500 mt-1.5 text-xs">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- External (shown when category=external) -->
                    <div id="wrapper-external" class="mb-6" style="display:none;">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">External Link</label>
                        <input type="text" name="video_external" value="{{ old('video_external') }}"
                            placeholder="https://youtube.com/watch?v=..."
                            class="{{ $inputClass }}">
                        @error('video_external')
                            <p class="text-theme-xs text-error-500 mt-1.5">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Thumbnail Image -->
                    <div class="mb-6">
                        <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Video Thumbnail</label>
                        <input type="file" name="video_img" class="filepond w-full" accept="image/png, image/jpeg, image/jpg, image/webp">
                        @include('backend.layouts.partials._upload-hint', ['text' => 'Video thumbnail · 1280 × 720 px · JPG, PNG, WebP · Max 15MB'])
                        @error('video_img')
                            <p class="text-error-500 mt-1.5 text-xs">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Publish Dates -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                        <div>
                            <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">Publish Start
                                Date</label>
                            <div class="relative">
                                <input type="date" name="publish_date_start" value="{{ old('publish_date_start') }}"
                                    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 bg-none px-4 py-2.5 pr-11 pl-4 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" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66659 1.5415C7.0808 1.5415 7.41658 1.87729 7.41658 2.2915V2.99984H12.5833V2.2915C12.5833 1.87729 12.919 1.5415 13.3333 1.5415C13.7475 1.5415 14.0833 1.87729 14.0833 2.2915V2.99984L15.4166 2.99984C16.5212 2.99984 17.4166 3.89527 17.4166 4.99984V7.49984V15.8332C17.4166 16.9377 16.5212 17.8332 15.4166 17.8332H4.58325C3.47868 17.8332 2.58325 16.9377 2.58325 15.8332V7.49984V4.99984C2.58325 3.89527 3.47868 2.99984 4.58325 2.99984L5.91659 2.99984V2.2915C5.91659 1.87729 6.25237 1.5415 6.66659 1.5415ZM6.66659 4.49984H4.58325C4.30711 4.49984 4.08325 4.7237 4.08325 4.99984V6.74984H15.9166V4.99984C15.9166 4.7237 15.6927 4.49984 15.4166 4.49984H13.3333H6.66659ZM15.9166 8.24984H4.08325V15.8332C4.08325 16.1093 4.30711 16.3332 4.58325 16.3332H15.4166C15.6927 16.3332 15.9166 16.1093 15.9166 15.8332V8.24984Z" fill=""/>
                                    </svg>
                                </span>
                            </div>
                            @error('publish_date_start')
                                <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">Publish Start
                                Time</label>
                            <div class="relative" x-data="{ v: @js(old('publish_time_start')) }">
                                <input type="time" name="publish_time_start" x-model="v" value="{{ old('publish_time_start') }}"
                                    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 bg-none px-4 py-2.5 pr-16 pl-4 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">
                                <button type="button" x-show="v" x-cloak @click="v = ''" class="absolute top-1/2 right-9 z-10 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full bg-gray-200 text-gray-500 transition-colors hover:bg-gray-300 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" aria-label="Clear time"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
                                <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" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.04175 9.99984C3.04175 6.15686 6.1571 3.0415 10.0001 3.0415C13.8431 3.0415 16.9584 6.15686 16.9584 9.99984C16.9584 13.8428 13.8431 16.9582 10.0001 16.9582C6.1571 16.9582 3.04175 13.8428 3.04175 9.99984ZM10.0001 1.5415C5.32867 1.5415 1.54175 5.32843 1.54175 9.99984C1.54175 14.6712 5.32867 18.4582 10.0001 18.4582C14.6715 18.4582 18.4584 14.6712 18.4584 9.99984C18.4584 5.32843 14.6715 1.5415 10.0001 1.5415ZM9.99998 10.7498C9.58577 10.7498 9.24998 10.4141 9.24998 9.99984V5.4165C9.24998 5.00229 9.58577 4.6665 9.99998 4.6665C10.4142 4.6665 10.75 5.00229 10.75 5.4165V9.24984H13.3334C13.7476 9.24984 14.0834 9.58562 14.0834 9.99984C14.0834 10.4141 13.7476 10.7498 13.3334 10.7498H10.0001H9.99998Z" fill=""/>
                                    </svg>
                                </span>
                            </div>
                            @error('publish_time_start')
                                <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">Publish End
                                Date</label>
                            <div class="relative">
                                <input type="date" name="publish_date_end" value="{{ old('publish_date_end') }}"
                                    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 bg-none px-4 py-2.5 pr-11 pl-4 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" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.66659 1.5415C7.0808 1.5415 7.41658 1.87729 7.41658 2.2915V2.99984H12.5833V2.2915C12.5833 1.87729 12.919 1.5415 13.3333 1.5415C13.7475 1.5415 14.0833 1.87729 14.0833 2.2915V2.99984L15.4166 2.99984C16.5212 2.99984 17.4166 3.89527 17.4166 4.99984V7.49984V15.8332C17.4166 16.9377 16.5212 17.8332 15.4166 17.8332H4.58325C3.47868 17.8332 2.58325 16.9377 2.58325 15.8332V7.49984V4.99984C2.58325 3.89527 3.47868 2.99984 4.58325 2.99984L5.91659 2.99984V2.2915C5.91659 1.87729 6.25237 1.5415 6.66659 1.5415ZM6.66659 4.49984H4.58325C4.30711 4.49984 4.08325 4.7237 4.08325 4.99984V6.74984H15.9166V4.99984C15.9166 4.7237 15.6927 4.49984 15.4166 4.49984H13.3333H6.66659ZM15.9166 8.24984H4.08325V15.8332C4.08325 16.1093 4.30711 16.3332 4.58325 16.3332H15.4166C15.6927 16.3332 15.9166 16.1093 15.9166 15.8332V8.24984Z" fill=""/>
                                    </svg>
                                </span>
                            </div>
                            @error('publish_date_end')
                                <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">Publish End
                                Time</label>
                            <div class="relative" x-data="{ v: @js(old('publish_time_end')) }">
                                <input type="time" name="publish_time_end" x-model="v" value="{{ old('publish_time_end') }}"
                                    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 bg-none px-4 py-2.5 pr-16 pl-4 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">
                                <button type="button" x-show="v" x-cloak @click="v = ''" class="absolute top-1/2 right-9 z-10 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full bg-gray-200 text-gray-500 transition-colors hover:bg-gray-300 hover:text-gray-700 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600" aria-label="Clear time"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>
                                <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" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.04175 9.99984C3.04175 6.15686 6.1571 3.0415 10.0001 3.0415C13.8431 3.0415 16.9584 6.15686 16.9584 9.99984C16.9584 13.8428 13.8431 16.9582 10.0001 16.9582C6.1571 16.9582 3.04175 13.8428 3.04175 9.99984ZM10.0001 1.5415C5.32867 1.5415 1.54175 5.32843 1.54175 9.99984C1.54175 14.6712 5.32867 18.4582 10.0001 18.4582C14.6715 18.4582 18.4584 14.6712 18.4584 9.99984C18.4584 5.32843 14.6715 1.5415 10.0001 1.5415ZM9.99998 10.7498C9.58577 10.7498 9.24998 10.4141 9.24998 9.99984V5.4165C9.24998 5.00229 9.58577 4.6665 9.99998 4.6665C10.4142 4.6665 10.75 5.00229 10.75 5.4165V9.24984H13.3334C13.7476 9.24984 14.0834 9.58562 14.0834 9.99984C14.0834 10.4141 13.7476 10.7498 13.3334 10.7498H10.0001H9.99998Z" fill=""/>
                                    </svg>
                                </span>
                            </div>
                            @error('publish_time_end')
                                <p class="text-error-500 mt-1.5 text-xs">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                </div>
            </div>

            <div class="flex justify-end gap-3">
                <a href="{{ route('content-video.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">Save</button>
            </div>

        </div>
    </form>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.filepond').forEach((el) => {
                FilePond.create(el, {
                    credits: false,
                    allowImagePreview: true,
                    imagePreviewHeight: 170,
                    storeAsFile: true
                });
            });
            displayvideourl();
        });

        function displayvideourl() {
            var cat = document.getElementById('video_category').value;
            document.getElementById('wrapper-url').style.display = 'none';
            document.getElementById('wrapper-upload').style.display = 'none';
            document.getElementById('wrapper-external').style.display = 'none';
            if (cat === 'YOUTUBE') document.getElementById('wrapper-url').style.display = 'block';
            if (cat === 'UPLOAD') document.getElementById('wrapper-upload').style.display = 'block';
            if (cat === 'EXTERNAL') document.getElementById('wrapper-external').style.display = 'block';
        }
    </script>
@endpush