<div
    data-te-modal-init
    id="modalEditEpisode"
    tabindex="-1"
    aria-modal="true"
    role="dialog"
    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
        <div class="relative w-full max-w-7xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
            <x-modal-header :title="__('Edit Episode')"/>

            <!--Modal body-->
            <div class="relative p-4 pt-0">
                <form method="POST" action="{{ route('admin.episode.edit') }}" enctype="multipart/form-data">
                    @csrf
                    <div class="flex flex-col gap-2 p-2">
                        <div>
                            <label class="leading-tight text-gray-800 dark:text-gray-200 w-full" for="title">Title:</label>
                            <x-text-input id="title" value="{{ $episode->title }}" class="block w-full" type="text" name="title" required autofocus/>
                        </div>

                        <div>
                            <label class="leading-tight text-gray-800 dark:text-gray-200 w-full" for="title_jpn">Title JPN:</label>
                            <x-text-input id="title_jpn" value="{{ $episode->title_jpn }}" class="block w-full" type="text" name="title_jpn" required />
                        </div>
                    </div>

                    <div class="grid grid-cols-3 p-2">
                        <div class="col-span-2">
                            <!-- Tags -->
                            <div class="row-span-2 p-0">
                                <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="tags">Tags:</label>
                                <x-text-input id="tags" class="block w-full" type="text" name="tags" required />
                            </div>
                        </div>

                        @if(auth()->user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
                        <div class="grid grid-rows-2">
                            <!-- Studio -->
                            <div class="p-2 pt-0">
                                <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="studio">Studio:</label>
                                <x-text-input id="studio" class="block w-full" type="text" name="studio" value="{{ $episode->studio->name }}" required />
                            </div>

                            <div class="grid grid-cols-3">
                                <!-- Interpolation -->
                                <div class="p-2 pt-0">
                                    <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="interpolated">Interpolated:</label>
                                    <select class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" name="interpolated" id="interpolated" required>
                                        <option value="yes" @if ($episode->interpolated == true) selected @endif>Yes</option>
                                        <option value="no" @if ($episode->interpolated == false) selected @endif>No</option>
                                    </select>
                                </div>
                                <!-- DVD -->
                                <div class="p-2 pt-0">
                                    <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="dvd">DVD Aspect:</label>
                                    <select class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" name="dvd" id="dvd" required>
                                        <option value="yes" @if ($episode->is_dvd_aspect == true) selected @endif>Yes</option>
                                        <option value="no" @if ($episode->is_dvd_aspect == false) selected @endif>No</option>
                                    </select>
                                </div>
                                <!-- Date -->
                                <div class="p-2 pt-0">
                                    <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="releasedate">Release Date:</label>
                                    <input class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" type="date" name="releasedate" id="releasedate" value="{{ $episode->release_date }}" required>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>

                    @if(auth()->user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
                    <!-- Stream URL -->
                    <div class="p-2 pt-0">
                        <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="baseurl">Stream:</label>
                        <x-text-input id="baseurl" class="block w-full" type="text" name="baseurl" value="{{ $episode->url }}" required />
                    </div>
                    @endif

                    <input name="episode_id" id="episode_id" type="hidden" value="{{ $episode->id }}" />

                    <div class="p-2 pt-0">
                        <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="description">Description:</label>
                        <textarea rows="4" cols="50" id="description" name="description" class="block mt-1 w-full rounded-md border-gray-300 shadow-sm dark:border-gray-700 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600" required>{{ $episode->description }}</textarea>
                    </div>

                    @if(auth()->user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
                    <!-- Episodes -->
                    <div class="grid grid-cols-2">
                        <!-- Cover -->
                        <div class="p-2 pt-0">
                            <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="episodecover1">Cover 1:</label>
                            <input class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" type="file" name="episodecover1" id="episodecover1">
                        </div>
                        <!-- Thumbs -->
                        <div class="p-2 pt-0">
                            <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="episodegallery1">Gallery 1:</label>
                            <input class="block w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" type="file" name="episodegallery1[]" id="episodegallery1" multiple="">
                        </div>
                    </div>

                    <div class="p-2 pt-0">
                        <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="episodedlurl1">Download 1080p:</label>
                        <x-text-input id="episodedlurl1" class="block w-full" type="text" name="episodedlurl1" value="{{ $episode->getDownloadByType('FHD')->url ?? '' }}" required />
                    </div>

                    <div class="p-2 pt-0">
                        <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="episodedlurlinterpolated1">Download 1080p Interpolated:</label>
                        <x-text-input id="episodedlurlinterpolated1" class="block w-full" type="text" name="episodedlurlinterpolated1" value="{{ $episode->getDownloadByType('FHDi')->url ?? '' }}" />
                    </div>

                    <div class="p-2 pt-0">
                        <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="episodedlurl4k1">Download 4k:</label>
                        <x-text-input id="episodedlurl4k1" class="block w-full" type="text" name="episodedlurl4k1" value="{{ $episode->getDownloadByType('UHD')->url ?? '' }}" />
                    </div>

                    <div class="p-2 pt-0">
                        <label class="w-full leading-tight text-gray-800 dark:text-gray-200" for="downloadUHDi1">Download 4k Interpolated:</label>
                        <x-text-input id="downloadUHDi1" class="block w-full" type="text" name="downloadUHDi1" value="{{ $episode->getDownloadByType('UHDi')->url ?? '' }}" />
                    </div>
                    @endif

                    <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
                        @if(auth()->user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
                        <div class="inline-block mr-2">
                            <input class="w-4 h-4 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                type="checkbox" value="true" id="v2" name="v2" />
                            <label class="inline-block hover:cursor-pointer dark:text-white" for="v2">
                                v2 Re-Release Notification
                            </label>
                        </div>
                        <div class="inline-block mr-2">
                            <input class="w-4 h-4 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                                type="checkbox" value="true" id="dmca_takedown" name="dmca_takedown" />
                            <label class="inline-block hover:cursor-pointer dark:text-white" for="dmca_takedown">
                                DMCA Takedown
                            </label>
                        </div>
                        @endif
                        <button 
                            type="button"
                            data-te-modal-dismiss
                            class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800">
                            Cancel
                        </button>
                        <button 
                            type="submit"
                            data-te-ripple-init
                            class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
                            Edit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- Modals JS -->
    @vite(['resources/js/admin-edit.js'])
</div>
