<form action="{{ route('admin.episode.update', ['id' => $episode->id]) }}" method="post" enctype="multipart/form-data"
    class="form-validate">
    @csrf
    <div class="mb-2">
        <label for="episode_name" class="form-label"> {{ __('episode_name(unique)') }} <span class="text-danger">*</span>
        </label>
        <input type="text" class="form-control rounded-2" id="episode_name" name="episode_name"
            value="{{ $episode->episode_name }}" placeholder="{{ __('enter_episode_name') }}">
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('episode_name') }}</p>
        </div>
    </div>
    <div class="mb-2">
        <label for="description" class="form-label"> {{ __('episode_description') }} </label>
        <textarea name="description" id="description" cols="30" rows="4" class="form-control rounded-2"
            placeholder="{{ __('enter_description') }}">{{ $episode->description }}</textarea>
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('description') }}</p>
        </div>
    </div>
    <div class="mb-4">
        <label for="runtime" class="form-label"> {{ __('runtime(in_minutes)') }} <span
                class="text-danger">*</span> </label>
        <input type="number" class="form-control rounded-2 timepicker" id="runtime"
            name="runtime" value="{{ old('runtime', $episode->runtime) }}"
            placeholder="{{ __('minute_duration') }}">
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('runtime') }}</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 mb-2">
            <label for="order" class="form-label"> {{ __('episode_order') }} <span
                    class="text-danger">*</span></label>
            <input type="number" class="form-control rounded-2" id="order" name="order"
                value="{{ $episode->order }}" placeholder="{{ __('enter_episode_order') }}">
            <div class="nk-block-des text-danger">
                <p class="error">{{ $errors->first('order') }}</p>
            </div>
        </div>
        <div class="col-md-6 mb-2">
            <label for="source_type" class="form-label d-flex align-items-center gap-1">
                {{ __('source_type') }} <span class="text-danger">*</span>
                <a href="javascript:void(0)" class="video-source-help-btn text-muted ms-1" title="{{ __('video_source_help_btn_title') }}" aria-label="{{ __('video_source_help_btn_title') }}"><i class="las la-info-circle"></i></a>
            </label>
            <select class="form-select form-select-lg mb-3 with_search select2" name="source_type" id="source_type" required>
                <option value=""> {{ __('select_video_source') }} </option>
                <option value="gdrive" {{ $episode->source_type == 'gdrive' ? 'selected' : '' }}>
                    {{ __('google_drive') }} </option>
                <option value="youtube" {{ $episode->source_type == 'youtube' ? 'selected' : '' }}>{{ __('youtube') }}
                </option>
                <option value="video" {{ $episode->source_type == 'video' ? 'selected' : '' }}>
                    {{ __('local_video_file') }}</option>
                <option value="s3" {{ $episode->source_type == 's3' ? 'selected' : '' }}>
                    {{ __('s3') }}</option>
                <option value="wasabi" {{ $episode->source_type == 'wasabi' ? 'selected' : '' }}>
                    {{ __('wasabi') }}</option>
                <option value="do" {{ $episode->source_type == 'do' ? 'selected' : '' }}>
                    {{ __('digital_ocean') }}</option>
                <option value="mp4" {{ $episode->source_type == 'mp4' ? 'selected' : '' }}>{{ __('mp4_from_url') }}
                </option>
                <option value="mkv" {{ $episode->source_type == 'mkv' ? 'selected' : '' }}>{{ __('mkv_from_url') }}
                </option>
                <option value="webm" {{ $episode->source_type == 'webm' ? 'selected' : '' }}>
                    {{ __('webm_from_url') }}</option>
                <option value="m3u8" {{ $episode->source_type == 'm3u8' ? 'selected' : '' }}>
                    {{ __('m3u8_from_url') }}</option>
                <option value="embed" {{ $episode->source_type == 'embed' ? 'selected' : '' }}>{{ __('embed_url') }}
                </option>
            </select>
            <div class="nk-block-des text-danger">
                <p class="error">{{ $errors->first('source_type') }}</p>
            </div>
            <div class="alert alert-info small mt-1 mb-0 d-none" id="gdrive-api-key-info" role="alert">
                <i class="las la-info-circle"></i> {{ __('gdrive_api_key_info') }}
            </div>
        </div>
    </div>

    <div class="mb-2">
        <label for="file_url" class="form-label"> {{ __('file_url') }} <span class="text-danger">*</span> </label>
        <input type="url" class="form-control rounded-2" id="file_url" name="file_url"
            value="{{ old('file_url', $episode->file_url) }}" placeholder="{{ __('enter_file_url') }}">
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('file_url') }}</p>
        </div>
    </div>
    <div class="video_file_input mb-2 d-none">
        <label for="file" class="form-label"> {{ __('video_file') }} <span class="text-danger">*</span> </label>
        <input type="file" class="form-control rounded-2" id="file" name="file"
            placeholder="{{ __('select_video_file') }}">
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('file') }}</p>
        </div>
    </div>

    <div class="input_file_div d-flex align-items-center gap-3 mb-2">
        <div class="mb-3 w-75">
            <label for="posterUpload" class="form-label mb-1">{{ __('episode_thumbnail_(500x750)') }}</label>
            <label for="posterUpload" class="file-upload-text">{{ __('select_file_from_device') }}</label>
            <input class="d-none file_picker" type="file" name="poster" id="posterUpload" accept=".jpg,.png">
            <div class="nk-block-des text-danger">
                <p class="error"></p>
            </div>
        </div>
        <div class="selected-files d-flex flex-wrap gap-20">
            <div class="selected-files-item">
                <img class="selected-img" src="{{ getFileLink('thumbnail', $episode->poster, 'episodes', '500x750') }}"
                    alt="poster">
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-start align-items-center">
        <button type="submit" id="uploadBtn" class="btn sg-btn-primary">
            {{ __('submit') }}
        </button>

        {{-- Hidden loading button --}}
        <button class="btn sg-btn-primary d-none" id="loadingBtn" type="button" disabled>
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            {{ __('uploading') }}...
        </button>
    </div>
</form>
<script>
    "use strict";
    $('.with_search').select2({
        dropdownParent: $('#ajaxModal') // Ensure dropdown appears inside modal
    });

    $(".form-validate").on("submit", function () {
        // Hide submit button
        $("#uploadBtn").addClass("d-none");

        // Show loading button
        $("#loadingBtn").removeClass("d-none");
    });

    $(document).ready(function() {
        // Initially set field visibility based on default or old value
        toggleSourceFields($('#source_type').val());

        // On change of source_type
        $('#source_type').on('change', function() {
            toggleSourceFields($(this).val());
        });

        function toggleSourceFields(sourceType) {
            if (sourceType === 'video' || sourceType == 's3' || sourceType == 'wasabi' || sourceType == 'do') {
                $('.video_file_input').removeClass('d-none');
                $('#file_url').closest('.mb-2').addClass('d-none');
                $('#file_url').prop('disabled', true); // ✅ Disable when hidden
            } else {
                $('.video_file_input').addClass('d-none');
                $('#file_url').closest('.mb-2').removeClass('d-none');
                $('#file_url').prop('disabled', false); // ✅ Enable when visible
            }
            $('#gdrive-api-key-info').toggleClass('d-none', sourceType !== 'gdrive');
        }

    });
</script>
@include('admin.partials.video_source_help_modal')
