<form id="subtitle-form" class="form-validate form">
    @csrf
    <input type="hidden" name="subtitleable_type" value="{{ $type }}">
    <input type="hidden" name="subtitleable_id" value="{{ $videoId }}">

    <div class="mb-2">
        <label class="form-label">{{ __('label') }} <span class="text-danger">*</span></label>
        <input type="text" name="label" class="form-control rounded-2" placeholder="{{ __('label') }}" required maxlength="100">
        <div class="nk-block-des text-danger">
            <p class="error" id="error-label"></p>
        </div>
    </div>
    <div class="mb-2">
        <label class="form-label">{{ __('language_code') }}</label>
        <input type="text" name="language_code" class="form-control rounded-2" placeholder="e.g. en" maxlength="10">
    </div>
    <div class="mb-2">
        <label class="form-label">{{ __('subtitle_file') }} (.srt / .vtt) <span class="text-danger">*</span></label>
        <input type="file" name="subtitle_file" class="form-control rounded-2" accept=".srt,.vtt" required>
        <div class="nk-block-des text-danger">
            <p class="error" id="error-file"></p>
        </div>
    </div>

    <div id="subtitle-form-message" class="small mb-2"></div>
    <button type="submit" class="btn sg-btn-primary" id="subtitle-submit-btn">{{ __('add_subtitle') }}</button>
</form>

<script>
    "use strict";
    (function() {
        var form = document.getElementById('subtitle-form');
        var btn = document.getElementById('subtitle-submit-btn');
        var msg = document.getElementById('subtitle-form-message');
        var storeUrl = '{{ route("admin.subtitle.store") }}';
        var token = '{{ csrf_token() }}';

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            var fd = new FormData(form);
            fd.append('_token', token);
            btn.disabled = true;
            msg.textContent = '';
            msg.className = 'small mb-2';
            document.getElementById('error-label').textContent = '';
            document.getElementById('error-file').textContent = '';

            fetch(storeUrl, {
                method: 'POST',
                body: fd,
                headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json' }
            }).then(function(r) { return r.json(); }).then(function(res) {
                btn.disabled = false;
                if (res.status === 'success') {
                    msg.className = 'small mb-2 text-success';
                    msg.textContent = res.message;
                    form.reset();
                    setTimeout(function() {
                        $('#ajaxModal').modal('hide');
                        location.reload();
                    }, 600);
                } else {
                    msg.className = 'small mb-2 text-danger';
                    msg.textContent = res.message || '';
                }
            }).catch(function() {
                btn.disabled = false;
                msg.className = 'small mb-2 text-danger';
                msg.textContent = '{{ __("something_went_wrong") }}';
            });
        });
    })();
</script>
