@extends('layouts.admin')

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

@section('content')

<style>
  #dpage-instructors .row-actions{ justify-content:flex-end; }
  #dpage-instructors .actions-toggle{ width:30px;height:30px;border-radius:9px;border:1px solid var(--border);background:transparent;color:var(--text-faint);display:flex;align-items:center;justify-content:center;cursor:pointer; }
  #dpage-instructors .actions-toggle svg{ width:16px;height:16px; }
  #dpage-instructors .actions-toggle:hover,
  #dpage-instructors .actions-toggle.open{ color:var(--primary);border-color:var(--primary); }
  #dpage-instructors .actions-menu{ display:none;position:fixed;min-width:190px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:6px;z-index:1000; }
  #dpage-instructors .actions-menu.open{ display:block; }
  #dpage-instructors .actions-menu .dropdown-item{ display:flex;align-items:center;justify-content:flex-start;gap:9px;width:100%;text-align:start;padding:8px 10px;border-radius:7px;border:none;background:transparent;font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap; }
  #dpage-instructors .actions-menu .dropdown-item:hover{ background:var(--bg-alt); }
  #dpage-instructors .actions-menu .dropdown-item svg{ width:15px;height:15px;flex-shrink:0; }
  #dpage-instructors .actions-menu .dropdown-item.text-danger{ color:var(--red); }
  #dpage-instructors .actions-menu .dropdown-item.text-danger:hover{ background:var(--red-soft); }
  #dpage-instructors .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-instructors .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-instructors .filters-label svg{ width:15px;height:15px; }
  #dpage-instructors .filter-field{ position:relative;display:flex;align-items:center; }
  #dpage-instructors .filter-field.grow{ flex:1 1 260px;min-width:200px; }
  #dpage-instructors .filter-field.select{ flex:0 1 220px;min-width:170px; }
  #dpage-instructors .filter-field > svg{ position:absolute;inset-inline-start:12px;width:16px;height:16px;color:var(--text-faint);pointer-events:none; }
  #dpage-instructors .filter-field input[type=search],
  #dpage-instructors .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-instructors .filter-field select{ appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:34px; }
  #dpage-instructors .filter-field .chev{ position:absolute;inset-inline-end:12px;inset-inline-start:auto;width:14px;height:14px; }
  #dpage-instructors .filter-field input:hover,
  #dpage-instructors .filter-field select:hover{ border-color:var(--border-strong, var(--text-faint)); }
  #dpage-instructors .filter-field input:focus,
  #dpage-instructors .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-instructors .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-instructors .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-instructors .filters-reset svg{ width:14px;height:14px; }
  #dpage-instructors .filters-reset:hover{ color:var(--red);border-color:var(--red);background:var(--red-soft); }
  #dpage-instructors .filters-reset[hidden]{ display:none; }
  @media (max-width:640px){ #dpage-instructors .filters-label{ display:none; } #dpage-instructors .filter-field.select,#dpage-instructors .filter-field.grow{ flex:1 1 100%; } }
</style>

<section class="dpage active" id="dpage-instructors">
  <div class="page-head">
    <div><h2>{{ trans('admin.Instructors') }}</h2><p>{{ trans('admin.instructors subtitle') }}</p></div>
    <div class="page-head-actions">
      @if(auth('user')->user()->has_permission('create-instructors'))
        <button class="btn btn-primary btn-sm" onclick="openInviteModal()">＋ {{ trans('admin.Invite instructor') }}</button>
      @endif
    </div>
  </div>

  <div class="tab-strip">
    <button class="active" onclick="switchInstructorTab('active', this)">{{ trans('admin.Active instructors') }}</button>
    <button onclick="switchInstructorTab('suspended', this)">{{ trans('admin.Suspended') }}</button>
    <button onclick="switchInstructorTab('pending', this)">{{ trans('admin.Pending applications') }} <span class="count-badge" id="pendingCountBadge">{{ $pendingCount ?: '' }}</span></button>
    <button onclick="switchInstructorTab('rejected', this)">{{ trans('admin.Rejected') }}</button>
  </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="instructorSearch" placeholder="{{ trans('admin.search') }} {{ trans('admin.Instructors') }}…">
    </div>
    <div class="filter-field select" id="instructorSpecialtyField">
      <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="instructorSpecialtyFilter">
        <option value="">{{ trans('admin.All specialties') }}</option>
        @foreach($specialties as $specialty)
          <option value="{{ $specialty->id }}">{{ $specialty->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>
    <button type="button" class="filters-reset" id="instructorFiltersReset" 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 id="itab-active" class="itab-panel active" data-itab-panel="active">
    <div class="card">
      <div class="table-wrap">
        <table class="table" id="activeInstructorsTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>{{ trans('admin.Name') }}</th>
              <th>{{ trans('admin.Email') }}</th>
              <th>{{ trans('admin.Specialty') }}</th>
              <th>{{ trans('admin.Courses') }}</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>
  </div>

  <div id="itab-suspended" class="itab-panel" data-itab-panel="suspended">
    <div class="card">
      <div class="table-wrap">
        <table class="table" id="suspendedInstructorsTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>{{ trans('admin.Name') }}</th>
              <th>{{ trans('admin.Email') }}</th>
              <th>{{ trans('admin.Specialty') }}</th>
              <th>{{ trans('admin.Courses') }}</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>
  </div>

  <div id="itab-pending" class="itab-panel" data-itab-panel="pending">
    <div class="card">
      <div class="table-wrap">
        <table class="table" id="pendingInstructorsTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>{{ trans('admin.Name') }}</th>
              <th>{{ trans('admin.Email') }}</th>
              <th>{{ trans('admin.Specialty') }}</th>
              <th>{{ trans('admin.Applied') }}</th>
              <th>{{ trans('admin.Created at') }}</th>
              <th>{{ trans('admin.Actions') }}</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>

  <div id="itab-rejected" class="itab-panel" data-itab-panel="rejected">
    <div class="card">
      <div class="table-wrap">
        <table class="table" id="rejectedInstructorsTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>{{ trans('admin.Name') }}</th>
              <th>{{ trans('admin.Email') }}</th>
              <th>{{ trans('admin.Specialty') }}</th>
              <th>{{ trans('admin.Status') }}</th>
              <th>{{ trans('admin.Created at') }}</th>
              <th>{{ trans('admin.Actions') }}</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</section>

<!-- ============ MODAL: Invite instructor ============ -->
@if(auth('user')->user()->has_permission('create-instructors'))
<style>
  .invite-choice-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .invite-choice-card{ text-align:start; border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px; background:transparent; cursor:pointer; display:flex; flex-direction:column; gap:6px; }
  .invite-choice-card:hover{ border-color:var(--primary); background:var(--bg-alt); }
  .invite-choice-card svg{ width:22px; height:22px; color:var(--primary); }
  .invite-choice-card b{ font-size:14px; }
  .invite-choice-card span{ font-size:12.5px; color:var(--text-faint); }
</style>
<div class="modal-backdrop" id="inviteModal">
  <div class="modal-box">
    <div class="modal-head">
      <h3>{{ trans('admin.Invite a new instructor') }}</h3>
      <button class="modal-close" onclick="closeInviteModal()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>

    <div id="inviteStepChoice">
      <div class="modal-body">
        <p class="hint" style="margin-bottom:14px;">{{ trans('admin.Invite via link or email') }}</p>
        <div class="invite-choice-grid">
          <button type="button" class="invite-choice-card" id="chooseCopyLink">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 007.07 0l2.83-2.83a5 5 0 00-7.07-7.07l-1.5 1.5"/><path d="M14 11a5 5 0 00-7.07 0L4.1 13.83a5 5 0 007.07 7.07l1.5-1.5"/></svg>
            <b>{{ trans('admin.Copy invitation link') }}</b>
            <span>{{ trans('admin.Copy invitation link hint') }}</span>
          </button>
          <button type="button" class="invite-choice-card" id="chooseSendEmail">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>
            <b>{{ trans('admin.Send invitation to email') }}</b>
            <span>{{ trans('admin.Send invitation to email hint') }}</span>
          </button>
        </div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="closeInviteModal()">{{ trans('admin.Close') }}</button>
      </div>
    </div>

    <form id="inviteEmailForm" style="display:none;">
      @csrf
      <div class="modal-body">
        <div class="field">
          <label>{{ trans('admin.Instructor email') }}</label>
          <input type="email" name="email" id="inviteEmailInput" placeholder="instructor@email.com" required>
        </div>
        <div class="hint" id="inviteEmailErrors" style="color:var(--red); margin-top:10px;"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="backToInviteChoice()">{{ trans('admin.Back') }}</button>
        <button type="submit" class="btn btn-primary" id="inviteEmailSubmitBtn">{{ trans('admin.Send invitation') }}</button>
      </div>
    </form>

    <div id="inviteStepResult" style="display:none;">
      <div class="modal-body">
        <div class="field">
          <label>{{ trans('admin.Invite link') }}</label>
          <div class="invite-link-box">
            <input type="text" readonly id="inviteLinkInput" value="">
            <button class="btn btn-soft btn-sm" onclick="copyInviteLink()" id="copyInviteBtn" type="button">{{ trans('admin.Copy') }}</button>
          </div>
          <span class="hint" id="inviteResultHint">{{ trans('admin.invite link hint') }}</span>
        </div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-primary" onclick="closeInviteModal()">{{ trans('admin.Close') }}</button>
      </div>
    </div>
  </div>
</div>
@endif

<!-- ============ MODAL: View instructor ============ -->
<div class="modal-backdrop" id="viewInstructorModal">
  <div class="modal-box wide">
    <div class="modal-head">
      <h3>{{ trans('admin.Instructor details') }}</h3>
      <button class="modal-close" onclick="closeModal('viewInstructorModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>

    <div class="modal-body" id="viewInstructorBody">
      <div class="cell-person" style="margin-bottom:20px;">
        <div class="cell-avatar" style="width:52px;height:52px;">
          <img id="viewInstructorAvatar" src="" alt="" style="display:none;width:100%;height:100%;object-fit:cover;">
          <svg id="viewInstructorAvatarIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:46%;height:46%;"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>
        </div>
        <div>
          <b id="viewInstructorName" style="font-size:16px;display:block;"></b>
          <span id="viewInstructorEmail" style="color:var(--text-faint);font-size:13px;"></span>
        </div>
        <span class="pill" id="viewInstructorStatus" style="margin-inline-start:auto;"></span>
      </div>

      <div class="stat-grid" style="grid-template-columns:repeat(3,1fr);margin-bottom:20px;">
        <div class="stat-card"><div class="stat-val" id="viewInstructorCourses">—</div><div class="stat-label">{{ trans('admin.Courses') }}</div></div>
        <div class="stat-card"><div class="stat-val" id="viewInstructorStudents">—</div><div class="stat-label">{{ trans('admin.Students') }}</div></div>
        <div class="stat-card"><div class="stat-val" id="viewInstructorRating">—</div><div class="stat-label">{{ trans('admin.Rating') }}</div></div>
      </div>

      <div class="form-grid">
        <div class="field">
          <label>{{ trans('admin.Phone') }}</label>
          <div id="viewInstructorPhone">—</div>
        </div>
        <div class="field">
          <label>{{ trans('admin.Specialty') }}</label>
          <div id="viewInstructorSpecialty">—</div>
        </div>
        <div class="field">
          <label>{{ trans('admin.Title') }}</label>
          <div id="viewInstructorTitle">—</div>
        </div>
        <div class="field">
          <label>{{ trans('admin.Created at') }}</label>
          <div id="viewInstructorCreatedAt">—</div>
        </div>
        <div class="field full">
          <label>{{ trans('admin.Bio') }}</label>
          <div id="viewInstructorBio">—</div>
        </div>
      </div>
    </div>

    <div class="modal-foot">
      <button type="button" class="btn btn-ghost" onclick="closeModal('viewInstructorModal')">{{ trans('admin.Close') }}</button>
    </div>
  </div>
</div>

<!-- ============ MODAL: Edit instructor ============ -->
@if(auth('user')->user()->has_permission('update-instructors'))
<div class="modal-backdrop" id="editInstructorModal">
  <div class="modal-box wide">
    <div class="modal-head">
      <h3>{{ trans('admin.Edit instructor') }}</h3>
      <button class="modal-close" onclick="closeModal('editInstructorModal')"><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="editInstructorForm">
      @csrf
      <input type="hidden" name="instructor_id" id="editInstructorId" value="">
      <div class="modal-body">
        <div class="form-grid">
          <div class="field">
            <label>{{ trans('admin.Name') }}</label>
            <input type="text" name="name" id="editInstructorName" required>
          </div>
          <div class="field">
            <label>{{ trans('admin.Email') }}</label>
            <input type="email" name="email" id="editInstructorEmail" required>
          </div>
          <div class="field">
            <label>{{ trans('admin.Phone') }}</label>
            <input type="text" name="phone" id="editInstructorPhone">
          </div>
          <div class="field">
            <label>{{ trans('admin.Title') }}</label>
            <input type="text" name="title" id="editInstructorTitle">
          </div>
          <div class="field">
            <label>{{ trans('admin.Specialty') }}</label>
            <select name="specialty_id" id="editInstructorSpecialty">
              <option value="">—</option>
              @foreach($specialties as $specialty)
                <option value="{{ $specialty->id }}">{{ $specialty->name }}</option>
              @endforeach
            </select>
          </div>
          <div class="field full">
            <label>{{ trans('admin.Bio') }}</label>
            <textarea name="bio" id="editInstructorBio"></textarea>
          </div>
          <div class="field">
            <label>{{ trans('admin.New password') }}</label>
            <input type="password" name="password" id="editInstructorPassword" autocomplete="new-password" placeholder="{{ trans('admin.leave password blank') }}">
          </div>
          <div class="field">
            <label>{{ trans('admin.Confirm new password') }}</label>
            <input type="password" name="password_confirmation" id="editInstructorPasswordConfirmation" autocomplete="new-password">
          </div>
        </div>
        <div class="hint" id="editInstructorErrors" style="color:var(--red); margin-top:14px;"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="closeModal('editInstructorModal')">{{ trans('admin.Close') }}</button>
        <button type="submit" class="btn btn-primary" id="editInstructorSubmitBtn">{{ trans('admin.Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endif

@endsection

@section('script')
@if(auth('user')->user()->has_permission('export-instructors'))
<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>
  function closeAllActionMenus(){
    document.querySelectorAll('#dpage-instructors .actions-menu.open').forEach(function(m){ m.classList.remove('open'); });
    document.querySelectorAll('#dpage-instructors .actions-toggle.open').forEach(function(b){ b.classList.remove('open'); });
  }

  $(document).on('click', '#dpage-instructors .actions-toggle', function(e){
    e.stopPropagation();

    var menu = document.getElementById(this.dataset.menuTarget);
    var wasOpen = menu.classList.contains('open');

    closeAllActionMenus();

    if (wasOpen) return;

    menu.classList.add('open');
    this.classList.add('open');

    var rect = this.getBoundingClientRect();
    var menuRect = menu.getBoundingClientRect();

    var left = Math.max(8, rect.right - menuRect.width);
    var top = rect.bottom + 6;
    if (top + menuRect.height > window.innerHeight - 8) {
      top = rect.top - menuRect.height - 6;
    }

    menu.style.left = left + 'px';
    menu.style.top = top + 'px';
  });

  $(document).on('click', '#dpage-instructors .actions-menu', function(e){ e.stopPropagation(); });
  $(document).on('click', function(){ closeAllActionMenus(); });
  $(window).on('scroll resize', closeAllActionMenus);

  function dtLanguage(){
    return {
      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') }}",
      }
    };
  }

  @if(auth('user')->user()->has_permission('export-instructors'))
  function dtButtons(){
    return [
      { extend: 'colvis', text: '{{ __('admin.column_visibility') }}' },
      { extend: 'postExcelVisibleColumns', text: '{{ __('admin.excel') }}' },
      { extend: 'postCsvVisibleColumns', text: '{{ __('admin.csv') }}' },
      { extend: 'postPdfVisibleColumns', text: '{{ __('admin.pdf') }}' },
    ];
  }
  @endif

  var instructorFilters = { specialty_id: '' };

  function dtAjaxData(status){
    return function(d){
      d.status = status;
      d.specialty_id = instructorFilters.specialty_id;
    };
  }

  var activeInstructorsTable = $('#activeInstructorsTable').DataTable({
    processing: true,
    serverSide: true,
    dom: '{{ auth('user')->user()->has_permission('export-instructors') ? 'Blrtip' : 'lrtip' }}',
    pageLength: 10,
    lengthMenu: [10, 25, 50, 100],
    ajax: {
      url: "{{ route('dashboard.instructors.index') }}",
      data: dtAjaxData('active')
    },
    columns: [
      {data: 'id', name: 'instructors.id'},
      {data: 'name', name: 'users.name'},
      {data: 'email', name: 'users.email'},
      {data: 'specialty', name: 'categories_translations.name'},
      {data: 'courses_count', name: 'courses_count', orderable: false, searchable: false},
      {data: 'students_count', name: 'students_count', orderable: false, searchable: false},
      {data: 'rating', name: 'courses_rating_avg', orderable: false, searchable: false},
      {data: 'status_badge', name: 'status', orderable: false, searchable: false},
      {data: 'created_at', name: 'created_at'},
      {data: 'action', name: 'action', orderable: false, searchable: false},
    ],
    @if(auth('user')->user()->has_permission('export-instructors'))
    buttons: dtButtons(),
    @endif
    language: dtLanguage(),
  });

  var pendingInstructorsTable = $('#pendingInstructorsTable').DataTable({
    processing: true,
    serverSide: true,
    dom: '{{ auth('user')->user()->has_permission('export-instructors') ? 'Blrtip' : 'lrtip' }}',
    pageLength: 10,
    lengthMenu: [10, 25, 50, 100],
    ajax: {
      url: "{{ route('dashboard.instructors.index') }}",
      data: dtAjaxData('pending')
    },
    columns: [
      {data: 'id', name: 'instructors.id'},
      {data: 'name', name: 'users.name'},
      {data: 'email', name: 'users.email'},
      {data: 'specialty', name: 'categories_translations.name'},
      {data: 'invite_status', name: 'invite_accepted_at', orderable: false, searchable: false},
      {data: 'created_at', name: 'created_at'},
      {data: 'action', name: 'action', orderable: false, searchable: false},
    ],
    @if(auth('user')->user()->has_permission('export-instructors'))
    buttons: dtButtons(),
    @endif
    language: dtLanguage(),
  });

  var suspendedInstructorsTable = $('#suspendedInstructorsTable').DataTable({
    processing: true,
    serverSide: true,
    dom: '{{ auth('user')->user()->has_permission('export-instructors') ? 'Blrtip' : 'lrtip' }}',
    pageLength: 10,
    lengthMenu: [10, 25, 50, 100],
    ajax: {
      url: "{{ route('dashboard.instructors.index') }}",
      data: dtAjaxData('suspended')
    },
    columns: [
      {data: 'id', name: 'instructors.id'},
      {data: 'name', name: 'users.name'},
      {data: 'email', name: 'users.email'},
      {data: 'specialty', name: 'categories_translations.name'},
      {data: 'courses_count', name: 'courses_count', orderable: false, searchable: false},
      {data: 'students_count', name: 'students_count', orderable: false, searchable: false},
      {data: 'rating', name: 'courses_rating_avg', orderable: false, searchable: false},
      {data: 'status_badge', name: 'status', orderable: false, searchable: false},
      {data: 'created_at', name: 'created_at'},
      {data: 'action', name: 'action', orderable: false, searchable: false},
    ],
    @if(auth('user')->user()->has_permission('export-instructors'))
    buttons: dtButtons(),
    @endif
    language: dtLanguage(),
  });

  var rejectedInstructorsTable = $('#rejectedInstructorsTable').DataTable({
    processing: true,
    serverSide: true,
    dom: '{{ auth('user')->user()->has_permission('export-instructors') ? 'Blrtip' : 'lrtip' }}',
    pageLength: 10,
    lengthMenu: [10, 25, 50, 100],
    ajax: {
      url: "{{ route('dashboard.instructors.index') }}",
      data: dtAjaxData('rejected')
    },
    columns: [
      {data: 'id', name: 'instructors.id'},
      {data: 'name', name: 'users.name'},
      {data: 'email', name: 'users.email'},
      {data: 'specialty', name: 'categories_translations.name'},
      {data: 'status_badge', name: 'status', orderable: false, searchable: false},
      {data: 'created_at', name: 'created_at'},
      {data: 'action', name: 'action', orderable: false, searchable: false},
    ],
    @if(auth('user')->user()->has_permission('export-instructors'))
    buttons: dtButtons(),
    @endif
    language: dtLanguage(),
  });

  var tableByTab = { active: activeInstructorsTable, pending: pendingInstructorsTable, suspended: suspendedInstructorsTable, rejected: rejectedInstructorsTable };
  var currentInstructorTab = 'active';

  function switchInstructorTab(tab, el){
    document.querySelectorAll('.tab-strip button').forEach(b => b.classList.remove('active'));
    el.classList.add('active');

    document.querySelectorAll('[data-itab-panel]').forEach(p => p.classList.toggle('active', p.dataset.itabPanel === tab));

    currentInstructorTab = tab;
    tableByTab[tab].search($('#instructorSearch').val()).ajax.reload(null, false);
  }

  $('#instructorSearch').on('keyup', function(){
    tableByTab[currentInstructorTab].search(this.value).draw();
  });

  function syncFilterUi(){
    var hasSpecialty = !!$('#instructorSpecialtyFilter').val();
    var hasSearch = !!$('#instructorSearch').val();
    $('#instructorSpecialtyField').toggleClass('active', hasSpecialty);
    $('#instructorFiltersReset').prop('hidden', !(hasSpecialty || hasSearch));
  }

  $('#instructorSearch').on('input', syncFilterUi);

  $('#instructorSpecialtyFilter').on('change', function(){
    instructorFilters.specialty_id = this.value;
    syncFilterUi();
    tableByTab[currentInstructorTab].ajax.reload();
  });

  $('#instructorFiltersReset').on('click', function(){
    $('#instructorSearch').val('');
    $('#instructorSpecialtyFilter').val('');
    instructorFilters.specialty_id = '';
    syncFilterUi();
    tableByTab[currentInstructorTab].search('').ajax.reload();
  });

  function refreshPendingCount(){
    $.get("{{ route('dashboard.instructors.index') }}", { status: 'pending', draw: 1, start: 0, length: 1 }, function(res){
      $('#pendingCountBadge').text(res.recordsTotal || '');
    });
  }

  function postAction(url, onSuccess){
    $.ajax({
      url: url,
      method: 'POST',
      data: { _token: "{{ csrf_token() }}" },
      success: function(){
        dashToast('✓', "{{ trans('admin.success') }}");
        onSuccess();
      },
      error: function(){
        dashToast('✕', "{{ trans('admin.faild') }}");
      }
    });
  }

  $(document).on('click', '.view-instructor', function(){
    var id = $(this).data('id');

    $('#viewInstructorName').text('…');
    $('#viewInstructorEmail').text('');
    $('#viewInstructorStatus').attr('class', 'pill').text('');
    $('#viewInstructorAvatar').hide().attr('src', '');
    $('#viewInstructorAvatarIcon').show();
    $('#viewInstructorCourses, #viewInstructorStudents, #viewInstructorRating').text('—');
    $('#viewInstructorPhone, #viewInstructorSpecialty, #viewInstructorTitle, #viewInstructorCreatedAt, #viewInstructorBio').text('—');

    openModal('viewInstructorModal');

    $.get("{{ url('dashboard/instructors') }}/" + id + "/show", function(res){
      var data = res.data;

      $('#viewInstructorName').text(data.name);
      $('#viewInstructorEmail').text(data.email);

      var statusMap = { active: 'pill-green', pending: 'pill-gold', rejected: 'pill-red', suspended: 'pill-muted' };
      $('#viewInstructorStatus').attr('class', 'pill ' + (statusMap[data.status] || 'pill-muted')).text(data.status_label);

      if (data.image) {
        $('#viewInstructorAvatar').attr('src', data.image).show();
        $('#viewInstructorAvatarIcon').hide();
      }

      $('#viewInstructorCourses').text(data.courses_count);
      $('#viewInstructorStudents').text(data.students_count);
      $('#viewInstructorRating').text(data.rating ? '★ ' + data.rating : '—');

      $('#viewInstructorPhone').text(data.phone || '—');
      $('#viewInstructorSpecialty').text(data.specialty || "{{ trans('admin.No specialty yet') }}");
      $('#viewInstructorTitle').text(data.title || '—');
      $('#viewInstructorCreatedAt').text(data.created_at || '—');
      $('#viewInstructorBio').text(data.bio || "{{ trans('admin.No description yet') }}");
    }).fail(function(){
      dashToast('✕', "{{ trans('admin.faild') }}");
      closeModal('viewInstructorModal');
    });
  });

  $(document).on('click', '.edit-instructor', function(){
    var id = $(this).data('id');

    $('#editInstructorForm')[0].reset();
    $('#editInstructorErrors').html('');
    $('#editInstructorId').val(id);

    $.get("{{ url('dashboard/instructors') }}/" + id + "/show", function(res){
      var data = res.data;

      $('#editInstructorName').val(data.name);
      $('#editInstructorEmail').val(data.email);
      $('#editInstructorPhone').val(data.phone);
      $('#editInstructorTitle').val(data.title);
      $('#editInstructorSpecialty').val(data.specialty_id || '');
      $('#editInstructorBio').val(data.bio);

      openModal('editInstructorModal');
    }).fail(function(){
      dashToast('✕', "{{ trans('admin.faild') }}");
    });
  });

  $('#editInstructorForm').on('submit', function(e){
    e.preventDefault();
    var $btn = $('#editInstructorSubmitBtn');
    var id = $('#editInstructorId').val();
    $('#editInstructorErrors').html('');
    $btn.prop('disabled', true);

    $.ajax({
      url: "{{ url('dashboard/instructors') }}/" + id + "/update",
      method: 'POST',
      data: $(this).serialize(),
      success: function(){
        closeModal('editInstructorModal');
        dashToast('✓', "{{ trans('admin.success') }}");
        tableByTab[currentInstructorTab].ajax.reload(null, false);
      },
      error: function(xhr){
        if (xhr.status === 422) {
          var errors = xhr.responseJSON.errors;
          var html = '';
          $.each(errors, function(key, val){ html += val[0] + '<br>'; });
          $('#editInstructorErrors').html(html);
        } else {
          var msg = (xhr.responseJSON && xhr.responseJSON.message) || "{{ trans('admin.faild') }}";
          dashToast('✕', msg);
        }
      },
      complete: function(){
        $btn.prop('disabled', false);
      }
    });
  });

  $(document).on('click', '.approve-application', function(){
    postAction("{{ url('dashboard/instructors') }}/" + $(this).data('id') + "/approve", function(){
      pendingInstructorsTable.ajax.reload(null, false);
      activeInstructorsTable.ajax.reload(null, false);
      refreshPendingCount();
    });
  });

  $(document).on('click', '.reject-application', function(){
    postAction("{{ url('dashboard/instructors') }}/" + $(this).data('id') + "/reject", function(){
      pendingInstructorsTable.ajax.reload(null, false);
      rejectedInstructorsTable.ajax.reload(null, false);
      refreshPendingCount();
    });
  });

  $(document).on('click', '.suspend-instructor', function(){
    postAction("{{ url('dashboard/instructors') }}/" + $(this).data('id') + "/suspend", function(){
      activeInstructorsTable.ajax.reload(null, false);
      suspendedInstructorsTable.ajax.reload(null, false);
    });
  });

  $(document).on('click', '.reactivate-instructor', function(){
    postAction("{{ url('dashboard/instructors') }}/" + $(this).data('id') + "/reactivate", function(){
      suspendedInstructorsTable.ajax.reload(null, false);
      rejectedInstructorsTable.ajax.reload(null, false);
      activeInstructorsTable.ajax.reload(null, false);
      pendingInstructorsTable.ajax.reload(null, false);
      refreshPendingCount();
    });
  });

  function openInviteModal(){
    showInviteStep('choice');
    openModal('inviteModal');
  }

  function showInviteStep(step){
    $('#inviteStepChoice').toggle(step === 'choice');
    $('#inviteEmailForm').toggle(step === 'email');
    $('#inviteStepResult').toggle(step === 'result');
  }

  function backToInviteChoice(){
    $('#inviteEmailForm')[0].reset();
    $('#inviteEmailErrors').html('');
    showInviteStep('choice');
  }

  function closeInviteModal(){
    closeModal('inviteModal');
    showInviteStep('choice');
    $('#inviteEmailForm')[0].reset();
    $('#inviteEmailErrors').html('');
  }

  function copyInviteLink(){
    var input = document.getElementById('inviteLinkInput');
    input.select();
    input.setSelectionRange(0, 99999);
    navigator.clipboard.writeText(input.value).then(function(){
      var $btn = $('#copyInviteBtn');
      var original = $btn.text();
      $btn.text("{{ trans('admin.Copied') }}");
      setTimeout(function(){ $btn.text(original); }, 2000);
    });
  }

  $('#chooseCopyLink').on('click', function(){
    var $btn = $(this).prop('disabled', true);

    $.ajax({
      url: "{{ route('dashboard.instructors.invite.copyLink') }}",
      method: 'POST',
      data: { _token: "{{ csrf_token() }}" },
      success: function(res){
        $('#inviteLinkInput').val(res.data.invite_url);
        $('#inviteResultHint').text("{{ trans('admin.invite link hint') }}");
        showInviteStep('result');
      },
      error: function(){
        dashToast('✕', "{{ trans('admin.faild') }}");
      },
      complete: function(){
        $btn.prop('disabled', false);
      }
    });
  });

  $('#chooseSendEmail').on('click', function(){
    showInviteStep('email');
  });

  $('#inviteEmailForm').on('submit', function(e){
    e.preventDefault();
    var $btn = $('#inviteEmailSubmitBtn');
    $('#inviteEmailErrors').html('');
    $btn.prop('disabled', true);

    $.ajax({
      url: "{{ route('dashboard.instructors.invite.email') }}",
      method: 'POST',
      data: $(this).serialize(),
      success: function(res){
        $('#inviteLinkInput').val(res.data.invite_url);
        $('#inviteResultHint').text("{{ trans('admin.invitation sent') }}");
        showInviteStep('result');
        dashToast('✓', "{{ trans('admin.invitation sent') }}");
      },
      error: function(xhr){
        if (xhr.status === 422) {
          var errors = xhr.responseJSON.errors;
          var html = '';
          if (errors) {
            $.each(errors, function(key, val){ html += val[0] + '<br>'; });
          } else if (xhr.responseJSON && xhr.responseJSON.message) {
            html = xhr.responseJSON.message;
          }
          $('#inviteEmailErrors').html(html);
        } else {
          dashToast('✕', "{{ trans('admin.faild') }}");
        }
      },
      complete: function(){
        $btn.prop('disabled', false);
      }
    });
  });
</script>
@endsection