@extends('layouts.admin')

@section('title', trans('admin.Courses'))
@section('page-title', trans('admin.Courses'))
@section('page-subtitle', trans('admin.courses subtitle'))

@section('content')

<style>
  #dpage-courses .filters-bar{ display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-bottom:16px;box-shadow:var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
  #dpage-courses .filters-label{ display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);padding-inline-end:12px;border-inline-end:1px solid var(--border); }
  #dpage-courses .filters-label svg{ width:15px;height:15px; }
  #dpage-courses .filter-field{ position:relative;display:flex;align-items:center; }
  #dpage-courses .filter-field.grow{ flex:1 1 260px;min-width:200px; }
  #dpage-courses .filter-field.select{ flex:0 1 220px;min-width:170px; }
  #dpage-courses .filter-field > svg{ position:absolute;inset-inline-start:12px;width:16px;height:16px;color:var(--text-faint);pointer-events:none; }
  #dpage-courses .filter-field input[type=search],
  #dpage-courses .filter-field select{ width:100%;height:40px;padding:0 14px;padding-inline-start:38px;border-radius:10px;border:1px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:13px;outline:none;transition:border-color .2s,box-shadow .2s,background .2s; }
  #dpage-courses .filter-field select{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:34px; }
  #dpage-courses .filter-field .chev{ position:absolute;inset-inline-end:12px;inset-inline-start:auto;width:14px;height:14px; }
  #dpage-courses .filter-field input:hover,
  #dpage-courses .filter-field select:hover{ border-color:var(--border-strong, var(--text-faint)); }
  #dpage-courses .filter-field input:focus,
  #dpage-courses .filter-field select:focus{ border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
  #dpage-courses .filter-field.active select{ border-color:var(--primary);background:color-mix(in srgb, var(--primary) 7%, var(--surface));color:var(--primary);font-weight:600; }
  #dpage-courses .filters-reset{ display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:10px;border:1px dashed var(--border);background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;transition:all .2s; }
  #dpage-courses .filters-reset svg{ width:14px;height:14px; }
  #dpage-courses .filters-reset:hover{ color:var(--red);border-color:var(--red);background:var(--red-soft); }
  #dpage-courses .filters-reset[hidden]{ display:none; }
  @media (max-width:640px){ #dpage-courses .filters-label{ display:none; } #dpage-courses .filter-field.select,#dpage-courses .filter-field.grow{ flex:1 1 100%; } }
  #dpage-courses .filter-field.combo select{ display:none; }
  #dpage-courses .combo-trigger{ width:100%;height:40px;padding:0 34px 0 38px;padding-inline:38px 34px;border-radius:10px;border:1px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:13px;text-align:start;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:border-color .2s,box-shadow .2s,background .2s; }
  #dpage-courses .combo-trigger:hover{ border-color:var(--border-strong, var(--text-faint)); }
  #dpage-courses .filter-field.open .combo-trigger{ border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
  #dpage-courses .filter-field.active .combo-trigger{ border-color:var(--primary);background:color-mix(in srgb, var(--primary) 7%, var(--surface));color:var(--primary);font-weight:600; }
  #dpage-courses .filter-field.open .chev{ transform:rotate(180deg); }
  #dpage-courses .filter-field .chev{ transition:transform .2s; }
  #dpage-courses .combo-panel{ display:none;position:absolute;top:calc(100% + 6px);inset-inline-start:0;min-width:100%;width:280px;max-width:90vw;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-md);padding:8px;z-index:50; }
  #dpage-courses .filter-field.open .combo-panel{ display:block; }
  #dpage-courses .combo-search{ width:100%;height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg-alt);color:var(--text);font-size:13px;outline:none; }
  #dpage-courses .combo-search:focus{ border-color:var(--primary); }
  #dpage-courses .combo-list{ list-style:none;margin:8px 0 0;padding:0;max-height:240px;overflow-y:auto; }
  #dpage-courses .combo-list li{ padding:8px 10px;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer; }
  #dpage-courses .combo-list li:hover,
  #dpage-courses .combo-list li.hl{ background:var(--bg-alt); }
  #dpage-courses .combo-list li.sel{ color:var(--primary);font-weight:600; }
  #dpage-courses .combo-list li.empty{ color:var(--text-faint);cursor:default;text-align:center; }
  #dpage-courses .combo-list li.empty:hover{ background:transparent; }
</style>

<section class="dpage active" id="dpage-courses">
  <div class="page-head">
    <div><h2>{{ trans('admin.Courses') }}</h2><p>{{ trans('admin.courses subtitle') }}</p></div>
    <div class="page-head-actions">
      @if(auth('user')->user()->has_permission('create-courses'))
        <button class="btn btn-primary btn-sm" onclick="openCourseModal('create')">＋ {{ trans('admin.Add course') }}</button>
      @endif
    </div>
  </div>

  <div class="filters-bar">
    <span class="filters-label">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 5h18l-7 8v6l-4 2v-8z"/></svg>
      {{ trans('admin.Filters') }}
    </span>
    <div class="filter-field grow">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
      <input type="search" id="courseSearch" placeholder="{{ trans('admin.search') }} {{ trans('admin.Courses') }}…">
    </div>
    @unless(auth('user')->user()->isInstructor())
    <div class="filter-field select combo" id="courseInstructorField">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 3.6-7 8-7s8 3 8 7"/></svg>
      <select id="courseInstructorFilter">
        <option value="">{{ trans('admin.All instructors') }}</option>
        @foreach($instructors as $instructor)
          <option value="{{ $instructor->id }}">{{ $instructor->user->name }}</option>
        @endforeach
      </select>
      <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
    </div>
    @endunless
    <div class="filter-field select" id="courseStatusField">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M8 12.5l3 3 5-6"/></svg>
      <select id="courseStatusFilter">
        <option value="">{{ trans('admin.All statuses') }}</option>
        <option value="published">{{ trans('admin.Published') }}</option>
        <option value="draft">{{ trans('admin.Draft') }}</option>
      </select>
      <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
    </div>
    <button type="button" class="filters-reset" id="courseFiltersReset" hidden>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
      {{ trans('admin.Reset filters') }}
    </button>
  </div>

  <div class="card">
    <div class="table-wrap">
      <table class="table" id="coursesTable" style="width:100%">
        <thead>
          <tr>
            <th>#</th>
            <th>{{ trans('admin.Course title') }}</th>
            <th>{{ trans('admin.Instructors') }}</th>
            <th>{{ trans('admin.Price') }}</th>
            <th>{{ trans('admin.Views') }}</th>
            <th>{{ trans('admin.Reviews') }}</th>
            <th>{{ trans('admin.Students') }}</th>
            <th>{{ trans('admin.Rating') }}</th>
            <th>{{ trans('admin.Status') }}</th>
            <th>{{ trans('admin.Created at') }}</th>
            <th>{{ trans('admin.Actions') }}</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</section>

<!-- ============ MODAL: Add / Edit course ============ -->
@if(auth('user')->user()->has_permission('create-courses') || auth('user')->user()->has_permission('update-courses'))
<div class="modal-backdrop" id="courseModal">
  <div class="modal-box wide">
    <div class="modal-head">
      <h3 id="courseModalTitle">{{ trans('admin.Upload a new course') }}</h3>
      <button class="modal-close" onclick="closeModal('courseModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>
    <form id="courseForm" enctype="multipart/form-data">
      @csrf
      <input type="hidden" name="course_id" id="courseId" value="">
      <div class="modal-body">
        <div class="form-grid">
          <div class="field full">
            <label>{{ trans('admin.Thumbnail') }}</label>
            <div class="upload-box" id="courseImageBox" style="padding:16px;" onclick="document.getElementById('courseImage').click()">
              <img id="courseImagePreview" src="" alt="" style="display:none;max-width:100%;max-height:140px;border-radius:8px;margin-bottom:8px;object-fit:cover;">
              <svg id="courseImageIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" width="20" height="20"><path d="M12 16V4M7 9l5-5 5 5"/><path d="M4 16v3a2 2 0 002 2h12a2 2 0 002-2v-3"/></svg>
              <b id="courseImageLabel">{{ trans('admin.Upload thumbnail') }}</b><span id="courseImageName">{{ trans('admin.PNG, JPG up to 5MB') }}</span>
            </div>
            <input type="file" name="image" id="courseImage" accept="image/png,image/jpeg,image/webp" style="display:none;">
          </div>
          @foreach(\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
            <div class="field full">
              <label>{{ trans('admin.Course title') }} ({{ $properties['native'] }}){{ $localeCode !== config('app.locale') ? ' — ' . trans('admin.optional') : '' }}</label>
              <input type="text" name="{{ $localeCode }}[title]" id="courseTitle_{{ $localeCode }}" placeholder="e.g. Advanced Prototyping in Figma" @if($localeCode === config('app.locale')) required @endif>
            </div>
          @endforeach
          <div class="field">
            <label>{{ trans('admin.Category') }}</label>
            <select name="category_id" id="courseCategory">
              <option value="">—</option>
              @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->translated_name }}</option>
              @endforeach
            </select>
          </div>
          <div class="field">
            <label>{{ trans('admin.Price') }}</label>
            <input type="number" name="price" id="coursePrice" step="0.01" min="0" placeholder="990">
          </div>
          @foreach(\Mcamara\LaravelLocalization\Facades\LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
            <div class="field full">
              <label>{{ trans('admin.Short description') }} ({{ $properties['native'] }})</label>
              <textarea name="{{ $localeCode }}[description]" id="courseDescription_{{ $localeCode }}" placeholder="What will students learn?"></textarea>
            </div>
          @endforeach
          <div class="field">
            <label>{{ trans('admin.Status') }}</label>
            <select name="status" id="courseStatus">
              <option value="draft">{{ trans('admin.Draft') }}</option>
              <option value="published">{{ trans('admin.Published') }}</option>
            </select>
          </div>
          <div class="field">
            <label>{{ trans('admin.Level') }}</label>
            <select name="level" id="courseLevel">
              <option value="beginner">{{ trans('admin.Beginner') }}</option>
              <option value="intermediate">{{ trans('admin.Intermediate') }}</option>
              <option value="advanced">{{ trans('admin.Advanced') }}</option>
            </select>
          </div>
          <div class="field">
            <label>{{ trans('admin.Access type') }}</label>
            <select name="access_type" id="courseAccessType">
              <option value="buy_once">{{ trans('admin.Buy once') }}</option>
              <option value="subscription">{{ trans('admin.Included in subscription') }}</option>
            </select>
          </div>
          @include('Dashboard.courses._video_source_fields', ['prefix' => 'course'])
          <div id="courseReelGroup" style="display:contents;">
            <div class="field full">
              <label>{{ trans('admin.Reel video') }}</label>
              <span class="hint" style="display:block;margin-bottom:10px;">{{ trans('admin.Reel video hint') }}</span>
            </div>
            @include('Dashboard.courses._video_source_fields', ['prefix' => 'reel', 'fieldPrefix' => 'reel_'])
          </div>
        </div>
        <div id="courseUploadProgressWrap" style="display:none;margin-top:14px;">
            <div style="height:8px;border-radius:6px;background:var(--bg-alt);overflow:hidden;">
                <div id="courseUploadProgressBar" style="height:100%;width:0%;background:var(--primary);transition:width .15s ease;"></div>
            </div>
            <span class="hint" id="courseUploadProgressText">{{ trans('admin.Uploading') }}… 0%</span>
        </div>
        <div class="hint" id="courseErrors" style="color:var(--red); margin-top:14px;"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="closeModal('courseModal')">{{ trans('admin.Close') }}</button>
        <button type="submit" class="btn btn-primary" id="courseSubmitBtn">{{ trans('admin.Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endif

@endsection

@section('script')
@if(auth('user')->user()->has_permission('export-courses'))
<script src="{{ asset('theme/dashboard/plugins/datatables-buttons/js/buttons.colVis.js') }}"></script>
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
@endif
<script type="text/javascript">
    var coursesTable = $('#coursesTable').DataTable({
        processing: true,
        serverSide: true,
        dom: '{{ auth('user')->user()->has_permission('export-courses') ? 'Blrtip' : 'lrtip' }}',
        order: [[0, 'desc']],
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        ajax: {
          "url": "{{ route('dashboard.courses.index') }}",
          "data": function(d){
            d.search_term = $('#courseSearch').val();
            d.instructor_id = $('#courseInstructorFilter').val();
            d.status = $('#courseStatusFilter').val();
          }
        },
        columns: [
            {data: 'id', name: 'courses.id'},
            {data: 'title', name: 'courses.title'},
            {data: 'instructor_name', name: 'users.name'},
            {data: 'price_formatted', name: 'courses.price', searchable: false},
            {data: 'views_count', name: 'views_count', searchable: false},
            {data: 'ratings_count', name: 'ratings_count', searchable: false},
            {data: 'students_count', name: 'students_count', searchable: false},
            {data: 'rating', name: 'ratings_avg_rating', searchable: false},
            {data: 'status_badge', name: 'courses.status', orderable: false, searchable: false},
            {data: 'created_at', name: 'courses.created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        @if(auth('user')->user()->has_permission('export-courses'))
        buttons: [
            { extend: 'colvis', text: '{{ __('admin.column_visibility') }}' },
            { extend: 'postExcelVisibleColumns', text: '{{ __('admin.excel') }}' },
            { extend: 'postCsvVisibleColumns', text: '{{ __('admin.csv') }}' },
            { extend: 'postPdfVisibleColumns', text: '{{ __('admin.pdf') }}' },
        ],
        @endif
        language: {
            search: "{{ __('admin.search') }}: ",
            loadingRecords: "{{ __('admin.loading') }}",
            emptyTable: "{{ __('admin.no_result') }}",
            zeroRecords: "{{ __('admin.no_result') }}",
            lengthMenu: "{{ __('admin.Show') }} _MENU_ {{ __('admin.entries') }}",
            paginate: {
                previous: "{{ __('admin.previous') }}",
                next: "{{ __('admin.next') }}",
            }
        },
    });

    (function(){
        var field = $('#courseInstructorField');
        var select = $('#courseInstructorFilter');
        if (!field.length) return;

        var trigger = $('<button type="button" class="combo-trigger"></button>');
        var panel = $('<div class="combo-panel"><input type="text" class="combo-search" placeholder="{{ trans('admin.search') }}…" autocomplete="off"><ul class="combo-list"></ul></div>');
        var search = panel.find('.combo-search');
        var list = panel.find('.combo-list');
        select.after(trigger, panel);

        function renderTrigger(){ trigger.text(select.find('option:selected').text()); }

        function renderList(term){
            term = (term || '').toLowerCase();
            list.empty();
            select.find('option').each(function(){
                var text = $(this).text();
                if (term && text.toLowerCase().indexOf(term) === -1) return;
                var li = $('<li></li>').text(text).attr('data-value', this.value);
                if (this.value === select.val()) li.addClass('sel');
                list.append(li);
            });
            if (!list.children().length) list.append($('<li class="empty"></li>').text("{{ __('admin.no_result') }}"));
        }

        function close(){ field.removeClass('open'); }

        trigger.on('click', function(){
            var opening = !field.hasClass('open');
            field.toggleClass('open', opening);
            if (opening) { search.val(''); renderList(''); setTimeout(function(){ search.trigger('focus'); }, 0); }
        });
        search.on('input', function(){ renderList(this.value); });
        search.on('keydown', function(e){
            if (e.key === 'Escape') { close(); trigger.trigger('focus'); }
            if (e.key === 'Enter') { e.preventDefault(); list.find('li').not('.empty').first().trigger('click'); }
        });
        list.on('click', 'li:not(.empty)', function(){
            select.val($(this).attr('data-value')).trigger('change');
            renderTrigger();
            close();
        });
        $(document).on('click', function(e){ if (!field.is(e.target) && !field.has(e.target).length) close(); });

        renderTrigger();
        select.on('reset-combo', renderTrigger);
    })();

    function syncCourseFilterUi(){
        var hasInstructor = !!$('#courseInstructorFilter').val();
        var hasStatus = !!$('#courseStatusFilter').val();
        var hasSearch = !!$('#courseSearch').val();
        $('#courseInstructorField').toggleClass('active', hasInstructor);
        $('#courseStatusField').toggleClass('active', hasStatus);
        $('#courseFiltersReset').prop('hidden', !(hasInstructor || hasStatus || hasSearch));
    }

    $('#courseSearch').on('keyup', function(){ syncCourseFilterUi(); coursesTable.ajax.reload(); });
    $('#courseInstructorFilter, #courseStatusFilter').on('change', function(){ syncCourseFilterUi(); coursesTable.ajax.reload(); });
    $('#courseFiltersReset').on('click', function(){
        $('#courseSearch').val('');
        $('#courseInstructorFilter, #courseStatusFilter').val('');
        $('#courseInstructorFilter').trigger('reset-combo');
        syncCourseFilterUi();
        coursesTable.ajax.reload();
    });

    @include('Dashboard.courses._video_source_script')

    $('#courseImage').on('change', function(){
        var file = this.files.length ? this.files[0] : null;
        $('#courseImageName').text(file ? file.name : "{{ trans('admin.PNG, JPG up to 5MB') }}");

        if (file) {
            var reader = new FileReader();
            reader.onload = function(e){
                $('#courseImagePreview').attr('src', e.target.result).show();
                $('#courseImageIcon').hide();
            };
            reader.readAsDataURL(file);
        } else {
            $('#courseImagePreview').hide().attr('src', '');
            $('#courseImageIcon').show();
        }
    });

    function openCourseModal(mode, id){
        $('#courseForm')[0].reset();
        $('#courseId').val('');
        $('#courseErrors').html('');
        setVideoSourceMode('course', 'youtube');
        $('#courseVideoFileName').text("{{ trans('admin.Click to upload or drag and drop') }}");
        $('#courseYoutubeInput').val('');
        setVideoSourceMode('reel', 'file');
        $('#reelVideoFileName').text("{{ trans('admin.Click to upload or drag and drop') }}");
        $('#reelYoutubeInput').val('');
        $('#courseImageName').text("{{ trans('admin.PNG, JPG up to 5MB') }}");
        $('#courseImagePreview').hide().attr('src', '');
        $('#courseImageIcon').show();
        $('#courseUploadProgressWrap').hide();
        $('#courseUploadProgressBar').css('width', '0%');
        $('#courseUploadProgressText').text("{{ trans('admin.Uploading') }}… 0%");
        $('#courseReelGroup').toggle(mode === 'edit');

        if (mode === 'edit') {
            $('#courseModalTitle').text("{{ trans('admin.Edit course') }}");
            $.get("{{ url('dashboard/courses') }}/" + id + "/edit", function(res){
                var data = res.data;
                $('#courseId').val(data.id);
                $('#courseTitle').val(data.title);
                $('#courseDescription').val(data.description);
                $('#courseCategory').val(data.category_id);
                $('#coursePrice').val(data.price);
                $('#courseStatus').val(data.status);
                $('#courseLevel').val(data.level);
                $('#courseAccessType').val(data.access_type);
                if (data.video_path) {
                    $('#courseVideoFileName').text("{{ trans('admin.Course video') }}: " + data.video_path.split('/').pop());
                }
                openModal('courseModal');
            }).fail(function(){
                dashToast('✕', "{{ trans('admin.faild') }}");
            });
        } else {
            $('#courseModalTitle').text("{{ trans('admin.Upload a new course') }}");
            openModal('courseModal');
        }
    }

    $(document).on('click', '.edit-course', function(){
        openCourseModal('edit', $(this).data('id'));
    });

    $('#courseForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#courseSubmitBtn');
        var id = $('#courseId').val();
        var url = id
            ? "{{ url('dashboard/courses') }}/" + id + "/edit"
            : "{{ route('dashboard.courses.store') }}";
        $('#courseErrors').html('');
        $btn.prop('disabled', true);

        var formData = new FormData(this);

        var hasUpload = ($('#courseVideoSource').val() !== 'youtube' && $('#courseVideoFile')[0].files.length > 0) || $('#courseImage')[0].files.length > 0;
        if (hasUpload) {
            $('#courseUploadProgressWrap').show();
            $('#courseUploadProgressBar').css('width', '0%');
            $('#courseUploadProgressText').text("{{ trans('admin.Uploading') }}… 0%");
        }

        $.ajax({
            url: url,
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            xhr: function(){
                var xhr = $.ajaxSettings.xhr();
                if (hasUpload && xhr.upload) {
                    xhr.upload.addEventListener('progress', function(evt){
                        if (!evt.lengthComputable) return;
                        var pct = Math.round((evt.loaded / evt.total) * 100);
                        $('#courseUploadProgressBar').css('width', pct + '%');
                        $('#courseUploadProgressText').text("{{ trans('admin.Uploading') }}… " + pct + '%');
                    }, false);
                }
                return xhr;
            },
            success: function(res){
                closeModal('courseModal');
                $('#courseForm')[0].reset();
                coursesTable.ajax.reload(null, false);
                dashToast('✓', "{{ trans('admin.success') }}");
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#courseErrors').html(html);
                } else {
                    var msg = (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}";
                    dashToast('✕', msg);
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
                $('#courseUploadProgressWrap').hide();
            }
        });
    });
</script>
@endsection