<form action="{{ route('admin.movie.file.store') }}" method="post" enctype="multipart/form-data" class="form-validate">
    @csrf
    <input type="text" class="d-none" name="video_id" value="{{ $movie_id }}">
    <div class="mb-2">
        <label for="label" class="form-label"> {{ __('video_label') }} <span class="text-danger">*</span> </label>
        <input type="text" class="form-control rounded-2" id="label" name="label" value="{{ old('label') }}"
            placeholder="{{ __('video_label') }}" required>
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('label') }}</p>
        </div>
    </div>
    <div class="mb-2">
        <label for="order" class="form-label"> {{ __('video_order') }} <span class="text-danger">*</span></label>
        <input type="number" class="form-control rounded-2" id="order" name="order" value="{{ old('order') }}"
            placeholder="{{ __('video_order') }}" required>
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('order') }}</p>
        </div>
    </div>
    <div class="mb-2">
        <label for="source" class="form-label d-flex align-items-center gap-1">
            {{ __('video_source') }} <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" id="source" required>
            <option value=""> {{ __('select_video_source') }} </option>
            <option value="local"> {{ __('local_video') }} </option>
            <option value="gdrive"> {{ __('google_drive') }} </option>
            <option value="youtube">{{ __('youtube') }}</option>
            <option value="wasabi">{{ __('wasabi_S3') }}</option>
            <option value="s3">{{ __('S3') }}</option>
            <option value="do">{{ __('digital_ocean') }}</option>
            <option value="mp4">{{ __('mp4_from_url') }}</option>
            <option value="mkv">{{ __('mkv_from_url') }}</option>
            <option value="webm">{{ __('webm_from_url') }}</option>
            <option value="m3u8">{{ __('m3u8_from_url') }}</option>
            <option value="embed">{{ __('embed_url') }}</option>
        </select>
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('source') }}</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>

    {{-- File Upload Field (only for "local" source) --}}
    <div class="mb-2 d-none" id="file_upload_wrapper">
        <label for="video_file" class="form-label">{{ __('upload_video_file') }} <span
                class="text-danger">*</span></label>
        <input type="file" class="form-control" name="video_file" id="video_file" accept="video/*">
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('video_file') }}</p>
        </div>
    </div>

    {{-- URL Input Field (for all non-local sources) --}}
    <div class="mb-2" id="file_url_wrapper">
        <label for="file_url" class="form-label">{{ __('video_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') }}" placeholder="{{ __('video_file_url') }}">
        <div class="nk-block-des text-danger">
            <p class="error">{{ $errors->first('file_url') }}</p>
        </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') // Optional for modal use
    });

    $('#source').on('change', function() {
        let source = $(this).val();
        if (source === 'local' || source === 'wasabi' || source === 's3' || source === 'do') {
            $('#file_url_wrapper').addClass('d-none');
            $('#file_upload_wrapper').removeClass('d-none');
        } else {
            $('#file_url_wrapper').removeClass('d-none');
            $('#file_upload_wrapper').addClass('d-none');
        }
        $('#gdrive-api-key-info').toggleClass('d-none', source !== 'gdrive');
    });

    // Trigger once on page load in case of old value
    $(document).ready(function() {
        $('#source').trigger('change');
    });

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

        // Show loading button
        $("#loadingBtn").removeClass("d-none");
    });
</script>
@include('admin.partials.video_source_help_modal')
