@php
  $configData = appClasses();
@endphp

@extends('layouts/contentNavbarLayout')

@section('vendor-style')
  @vite(['resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss', 'resources/assets/vendor/libs/select2/select2.scss'])

  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
@endsection

@section('title', 'Staffs')

@section('content')
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="fw-bold">Staff Account</h2>
    <a href="{{ route('staffs.create') }}" class="btn btn-outline-warning"
      style="background: #ff6a00; color: #fff; border: none; font-weight: 500;">
      <i class="bx bx-plus"></i> Add Staff
    </a>
  </div>

  <ul class="nav nav-tabs mb-4" id="staffTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="all-staff-tab" data-bs-toggle="tab" data-bs-target="#all-staff" type="button"
        role="tab" aria-controls="all-staff" aria-selected="true">All Staff</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="archived-staff-tab" data-bs-toggle="tab" data-bs-target="#archived-staff"
        type="button" role="tab" aria-controls="archived-staff" aria-selected="false">Archived Staff</button>
    </li>
  </ul>

  <div class="tab-content" id="staffTabsContent">
    <div class="tab-pane fade show active" id="all-staff" role="tabpanel" aria-labelledby="all-staff-tab">
      <div class="card">
        <div class="card-body">
          <div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
            <div class="d-flex align-items-center mb-2 mb-md-0">
              <span class="fw-semibold me-3">All Staff</span>
              <input type="text" class="form-control form-control-sm" placeholder="Search Memebrs"
                style="width: 250px;">
            </div>
            <div>
              <select class="form-select form-select-sm select2" style="width: 140px; display: inline-block;">
                <option selected>Bulk Action</option>
                <option>Archive</option>
                <option>Delete</option>
              </select>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-hover align-middle" id="staffsTable">
              <thead>
                <tr>
                  <th><input class="dt-checkboxes form-check-input" type="checkbox"></th>
                  <th>Name <i class="bx bx-chevron-down small"></i></th>
                  <th>Staff Role <i class="bx bx-chevron-down small"></i></th>
                  <th>Mobile <i class="bx bx-chevron-down small"></i></th>
                  <th>Email <i class="bx bx-chevron-down small"></i></th>
                  <th>Status <i class="bx bx-chevron-down small"></i></th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane fade" id="archived-staff" role="tabpanel" aria-labelledby="archived-staff-tab">
      <!-- Archived staff content goes here -->
      <div class="alert alert-info mt-4">No archived staff found.</div>
    </div>
  </div>
@endsection

@section('vendor-script')
  @vite([
      'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
      'resources/assets/vendor/libs/select2/select2.js',
      // 'resources/assets/js/staff.js',
      'resources/assets/js/tables-datatables-basic.js',
  ])
@endsection
@section('page-script')

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      if (window.$ && $.fn.select2) {
        $('.select2').select2({
          width: '100%'
        });
      }
    });
    $(function() {
      $('#staffsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route('staffs.index') }}',
        columns: [{
            // For Checkboxes
            targets: 0,
            orderable: false,
            searchable: false,
            responsivePriority: 3,
            render: DataTable.render.select()
          },
          {
            data: 'full_name',
            name: 'full_name'
          },
          {
            data: 'role',
            name: 'role'
          },
          {
            data: 'phone',
            name: 'phone'
          },
          {
            data: 'email',
            name: 'email'
          },
          {
            data: 'status',
            name: 'status'
          },
          {
            data: 'action',
            name: 'action',
            orderable: false,
            searchable: false
          }
        ]
      });
    });
    setTimeout(() => {
      const elementsToModify = [{
          selector: '.dt-search .form-control',
          classToRemove: 'form-control-sm'
        },
        {
          selector: '.dt-length .form-select',
          classToRemove: 'form-select-sm',
          classToAdd: 'ms-0'
        },
        {
          selector: '.dt-length',
          classToAdd: 'mb-md-6 mb-0'
        },
        {
          selector: '.dt-buttons',
          classToAdd: 'justify-content-center'
        },
        {
          selector: '.dt-layout-table',
          classToRemove: 'row mt-2'
        },
        {
          selector: '.dt-layout-end',
          classToAdd: 'gap-md-2 gap-0 mt-0'
        },
        {
          selector: '.dt-layout-full',
          classToRemove: 'col-md col-12',
          classToAdd: 'table-responsive'
        }
      ];

      // Delete record
      elementsToModify.forEach(({
        selector,
        classToRemove,
        classToAdd
      }) => {
        document.querySelectorAll(selector).forEach(element => {
          if (classToRemove) {
            classToRemove.split(' ').forEach(className => element.classList.remove(className));
          }
          if (classToAdd) {
            classToAdd.split(' ').forEach(className => element.classList.add(className));
          }
        });
      });
    }, 100);
  </script>
@endsection