@extends('layouts.admin')

@section('title', trans('admin.Exams'))
@section('page-title', trans('admin.Exams'))
@section('page-subtitle', trans('admin.exams subtitle'))

@section('content')

<style>
  #dpage-exams .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-exams .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-exams .filters-label svg{ width:15px;height:15px; }
  #dpage-exams .filter-field{ position:relative;display:flex;align-items:center; }
  #dpage-exams .filter-field.grow{ flex:1 1 260px;min-width:200px; }
  #dpage-exams .filter-field.select{ flex:0 1 220px;min-width:170px; }
  #dpage-exams .filter-field > svg{ position:absolute;inset-inline-start:12px;width:16px;height:16px;color:var(--text-faint);pointer-events:none; }
  #dpage-exams .filter-field input[type=search],
  #dpage-exams .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-exams .filter-field select{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:34px; }
  #dpage-exams .filter-field .chev{ position:absolute;inset-inline-end:12px;inset-inline-start:auto;width:14px;height:14px; }
  #dpage-exams .filter-field input:hover,
  #dpage-exams .filter-field select:hover{ border-color:var(--border-strong, var(--text-faint)); }
  #dpage-exams .filter-field input:focus,
  #dpage-exams .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-exams .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-exams .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-exams .filters-reset svg{ width:14px;height:14px; }
  #dpage-exams .filters-reset:hover{ color:var(--red);border-color:var(--red);background:var(--red-soft); }
  #dpage-exams .filters-reset[hidden]{ display:none; }
  @media (max-width:640px){ #dpage-exams .filters-label{ display:none; } #dpage-exams .filter-field.select,#dpage-exams .filter-field.grow{ flex:1 1 100%; } }
  #dpage-exams .filter-field.combo select{ display:none; }
  #dpage-exams .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-exams .combo-trigger:hover{ border-color:var(--border-strong, var(--text-faint)); }
  #dpage-exams .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-exams .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-exams .filter-field.open .chev{ transform:rotate(180deg); }
  #dpage-exams .filter-field .chev{ transition:transform .2s; }
  #dpage-exams .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-exams .filter-field.open .combo-panel{ display:block; }
  #dpage-exams .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-exams .combo-search:focus{ border-color:var(--primary); }
  #dpage-exams .combo-list{ list-style:none;margin:8px 0 0;padding:0;max-height:240px;overflow-y:auto; }
  #dpage-exams .combo-list li{ padding:8px 10px;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer; }
  #dpage-exams .combo-list li:hover,
  #dpage-exams .combo-list li.hl{ background:var(--bg-alt); }
  #dpage-exams .combo-list li.sel{ color:var(--primary);font-weight:600; }
  #dpage-exams .combo-list li.empty{ color:var(--text-faint);cursor:default;text-align:center; }
  #dpage-exams .combo-list li.empty:hover{ background:transparent; }
</style>

<section class="dpage active" id="dpage-exams">
  <div class="page-head">
    <div><h2>{{ trans('admin.Exams') }}</h2><p>{{ trans('admin.exams subtitle') }}</p></div>
    <div class="page-head-actions">
      @if(auth('user')->user()->has_permission('create-exams'))
        <button class="btn btn-primary btn-sm" onclick="openExamBuilder()">＋ {{ trans('admin.Create exam') }}</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="examSearch" placeholder="{{ trans('admin.search') }} {{ trans('admin.Exams') }}…">
    </div>
    <div class="filter-field select combo" id="examCourseField">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5A2.5 2.5 0 016.5 3H20v16H6.5A2.5 2.5 0 004 21.5z"/><path d="M4 21.5V5.5"/></svg>
      <select id="examCourseFilter">
        <option value="">{{ trans('admin.All courses') }}</option>
        @foreach($courses as $course)
          <option value="{{ $course->id }}">{{ $course->title }}</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>
    <div class="filter-field select" id="examStatusField">
      <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="examStatusFilter">
        <option value="">{{ trans('admin.All statuses') }}</option>
        <option value="live">{{ trans('admin.Live') }}</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="examFiltersReset" 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="examsTable" style="width:100%">
        <thead>
          <tr>
            <th>#</th>
            <th>{{ trans('admin.Exam') }}</th>
            <th>{{ trans('admin.Course') }}</th>
            <th>{{ trans('admin.Questions') }}</th>
            <th>{{ trans('admin.Attempts') }}</th>
            <th>{{ trans('admin.Average score') }}</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>

@if(auth('user')->user()->has_permission('create-exams'))
  @include('Dashboard.exams._create_modal', ['coursesNoExam' => $coursesNoExam])
@endif

@endsection

@section('script')
@if(auth('user')->user()->has_permission('export-exams'))
<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 examsTable = $('#examsTable').DataTable({
        processing: true,
        serverSide: true,
        dom: '{{ auth('user')->user()->has_permission('export-exams') ? 'Blrtip' : 'lrtip' }}',
        order: [[0, 'desc']],
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        ajax: {
          "url": "{{ route('dashboard.exams.index') }}",
          "data": function(d){
            d.search_term = $('#examSearch').val();
            d.course_id = $('#examCourseFilter').val();
            d.status = $('#examStatusFilter').val();
          }
        },
        columns: [
            {data: 'id', name: 'exams.id'},
            {data: 'title', name: 'exams.title'},
            {data: 'course_title', name: 'courses.title'},
            {data: 'questions_count', name: 'questions_count', orderable: false, searchable: false},
            {data: 'results_count', name: 'results_count', orderable: false, searchable: false},
            {data: 'avg_score', name: 'avg_score', orderable: false, searchable: false},
            {data: 'status_badge', name: 'exams.status', orderable: false, searchable: false},
            {data: 'created_at', name: 'exams.created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        @if(auth('user')->user()->has_permission('export-exams'))
        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 = $('#examCourseField');
        var select = $('#examCourseFilter');
        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 syncExamFilterUi(){
        var hasCourse = !!$('#examCourseFilter').val();
        var hasStatus = !!$('#examStatusFilter').val();
        var hasSearch = !!$('#examSearch').val();
        $('#examCourseField').toggleClass('active', hasCourse);
        $('#examStatusField').toggleClass('active', hasStatus);
        $('#examFiltersReset').prop('hidden', !(hasCourse || hasStatus || hasSearch));
    }

    $('#examSearch').on('keyup', function(){ syncExamFilterUi(); examsTable.ajax.reload(); });
    $('#examCourseFilter, #examStatusFilter').on('change', function(){ syncExamFilterUi(); examsTable.ajax.reload(); });
    $('#examFiltersReset').on('click', function(){
        $('#examSearch').val('');
        $('#examCourseFilter, #examStatusFilter').val('');
        $('#examCourseFilter').trigger('reset-combo');
        syncExamFilterUi();
        examsTable.ajax.reload();
    });

    @if(auth('user')->user()->has_permission('create-exams'))
    function onExamPublished(res){
        examsTable.ajax.reload(null, false);
    }

    @include('Dashboard.exams._builder_script')
    @endif
</script>
@endsection