@extends('layouts.admin')

@section('title', trans('admin.Students'))
@section('page-title', trans('admin.Students'))

@section('content')

<style>
  #dpage-students .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-students .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-students .filters-label svg{ width:15px;height:15px; }
  #dpage-students .filter-field{ position:relative;display:flex;align-items:center; }
  #dpage-students .filter-field.grow{ flex:1 1 260px;min-width:200px; }
  #dpage-students .filter-field.select{ flex:0 1 220px;min-width:170px; }
  #dpage-students .filter-field > svg{ position:absolute;inset-inline-start:12px;width:16px;height:16px;color:var(--text-faint);pointer-events:none; }
  #dpage-students .filter-field input[type=search],
  #dpage-students .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-students .filter-field select{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:34px; }
  #dpage-students .filter-field .chev{ position:absolute;inset-inline-end:12px;inset-inline-start:auto;width:14px;height:14px; }
  #dpage-students .filter-field input:hover,
  #dpage-students .filter-field select:hover{ border-color:var(--border-strong, var(--text-faint)); }
  #dpage-students .filter-field input:focus,
  #dpage-students .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-students .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-students .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-students .filters-reset svg{ width:14px;height:14px; }
  #dpage-students .filters-reset:hover{ color:var(--red);border-color:var(--red);background:var(--red-soft); }
  #dpage-students .filters-reset[hidden]{ display:none; }
  @media (max-width:640px){ #dpage-students .filters-label{ display:none; } #dpage-students .filter-field.select,#dpage-students .filter-field.grow{ flex:1 1 100%; } }
  #dpage-students .filter-field.open .chev{ transform:rotate(180deg); }
  #dpage-students .filter-field .chev{ transition:transform .2s; }
  #dpage-students .row-actions{ display:flex;gap:6px;align-items:center;flex-wrap:wrap; }
  #dpage-students .row-actions .text-danger{ color:var(--red); }
</style>

<section class="dpage active" id="dpage-students">
  <div class="page-head">
    <div><h2>{{ trans('admin.Students') }}</h2><p>{{ trans('admin.students subtitle') }}</p></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="studentSearch" placeholder="{{ trans('admin.search') }} {{ trans('admin.Students') }}…">
    </div>
    <div class="filter-field select" id="studentStatusField">
      <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="studentStatusFilter">
        <option value="">{{ trans('admin.All statuses') }}</option>
        <option value="active">{{ trans('admin.Active') }}</option>
        <option value="suspended">{{ trans('admin.Suspended') }}</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>
    <div class="filter-field select" id="studentSortField">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3 6.5 7 .8-5.2 4.8 1.5 7-6.3-3.6-6.3 3.6 1.5-7L2 9.3l7-.8z"/></svg>
      <select id="studentSortFilter">
        <option value="">{{ trans('admin.Newest first') }}</option>
        <option value="desc">{{ trans('admin.Points') }}: {{ trans('admin.High to low') }}</option>
        <option value="asc">{{ trans('admin.Points') }}: {{ trans('admin.Low to high') }}</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="studentFiltersReset" 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="studentsTable" style="width:100%">
        <thead>
          <tr>
            <th>{{ trans('admin.Name') }}</th>
            <th>{{ trans('admin.Email') }}</th>
            <th>{{ trans('admin.Status') }}</th>
            <th>{{ trans('admin.Points') }}</th>
            <th>{{ trans('admin.Joined') }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>
</section>

@endsection

@section('script')
@if(auth('user')->user()->has_permission('export-students'))
<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 studentsTable = $('#studentsTable').DataTable({
        processing: true,
        serverSide: true,
        dom: '{{ auth('user')->user()->has_permission('export-students') ? 'Blrtip' : 'lrtip' }}',
        order: [[4, 'desc']],
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        ajax: {
          "url": "{{ route('dashboard.students.index') }}",
          "data": function(d){
            d.search_term = $('#studentSearch').val();
            d.status = $('#studentStatusFilter').val();
          }
        },
        columns: [
            {data: 'name', name: 'users.name'},
            {data: 'email', name: 'users.email'},
            {data: 'status_badge', name: 'students.status', orderable: false, searchable: false},
            {data: 'points_formatted', name: 'students.points', searchable: false},
            {data: 'created_at', name: 'students.created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        @if(auth('user')->user()->has_permission('export-students'))
        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 syncStudentFilterUi(){
        var hasStatus = !!$('#studentStatusFilter').val();
        var hasSort = !!$('#studentSortFilter').val();
        var hasSearch = !!$('#studentSearch').val();
        $('#studentStatusField').toggleClass('active', hasStatus);
        $('#studentSortField').toggleClass('active', hasSort);
        $('#studentFiltersReset').prop('hidden', !(hasStatus || hasSort || hasSearch));
    }

    $('#studentSearch').on('keyup', function(){ syncStudentFilterUi(); studentsTable.ajax.reload(); });
    $('#studentStatusFilter').on('change', function(){ syncStudentFilterUi(); studentsTable.ajax.reload(); });
    $('#studentSortFilter').on('change', function(){
        syncStudentFilterUi();
        studentsTable.order(this.value ? [3, this.value] : [4, 'desc']).draw();
    });
    function postStudentAction(url){
        $.ajax({
            url: url,
            method: 'POST',
            data: { _token: "{{ csrf_token() }}" },
            success: function(){
                dashToast('✓', "{{ trans('admin.success') }}");
                studentsTable.ajax.reload(null, false);
            },
            error: function(){ dashToast('✕', "{{ trans('admin.faild') }}"); }
        });
    }

    $(document).on('click', '.suspend-student', function(){
        if (!confirm("{{ trans('admin.confirm suspend student') }}")) return;
        postStudentAction("{{ url('dashboard/students') }}/" + $(this).data('id') + "/suspend");
    });

    $(document).on('click', '.reactivate-student', function(){
        postStudentAction("{{ url('dashboard/students') }}/" + $(this).data('id') + "/reactivate");
    });

    $('#studentFiltersReset').on('click', function(){
        $('#studentSearch').val('');
        $('#studentStatusFilter, #studentSortFilter').val('');
        syncStudentFilterUi();
        studentsTable.order([4, 'desc']).draw();
    });
</script>
@endsection