@extends('layouts.app-repairs')

@section('content')
  <div class="page-header d-print-none m-0 p-0 pb-5">
    <div class="mt-3 w-100 pb-5">
      <div class="container-xl">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 w-100">
          <div>
            <b style="color:#3478f6">Administración de Técnicos</b>
          </div>
          <div class="d-flex flex-row flex-wrap align-items-center gap-1 px-3">
            {{-- back button --}}
            <x-buttons.button-action icon="fas fa-arrow-left" text="Volver"
              onclick="window.location.href='{{ route('repair-orders.index') }}'" />
          </div>
        </div>

        <div class="row mt-3">

        </div>



        <div class="col-md-12 mt-3 mb-4">
          <div class="card card-sm" style="overflow: hidden; border-radius:10px;">
            <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
              <b style="color:#3478f6">Lista de Técnicos</b>
              <div>
                {{-- <x-buttons.button-action text="Nuevo Técnico" class="btn-primary" --}}
                {{-- onclick="window.location.href='{{ route('technicians.create') }}'" /> --}}

                <x-buttons.button-action id="btn-crear-tecnico" icon="fas fa-plus" text="Crear Técnico"
                  data-bs-toggle="modal" data-bs-target="#modal-techinicians" />
              </div>
            </div>

            <div id="table-container" class="p-3 table-responsive">
              {{-- <div class="p-3 table-responsive"> --}}
              <table class="table" id="technicians-table" style="width: 100%">
                <!-- La tabla se llenará dinámicamente con DataTables -->
              </table>
            </div>

          </div>

        </div>
      </div>



    </div>
  </div>
  @include('technician.modal-technician')
@endsection
@push('jsstack')
  <script>
    // Construir la URL del endpoint
    const url = "{{ route('technicians.index') }}";

    // DataTable
    techniciansTable = $('#technicians-table').DataTable({
      processing: true,
      serverSide: true,
      ordering: false, // Deshabilita ordenado por columna
      ajax: {
        url: url,
        data: function(d) {
          // d.priority_filter = $("#priorityFilter").val() // Filtrar por prioridad seleccionado
        },
        beforeSend: function(xhr, settings) {
          // Deshabilita los selects de select2 mientras se procesa la operacion
          $(".action-select2").prop("disabled", true);

        },
        complete: function(d) {

          console.log('Respuesta del servidor:', d);

          // Habilita los selects mientras se procesa la operacion
          $(".action-select2").prop("disabled", false);
        },
        error: function(xhr, status, error) {
          console.log('Error en la solicitud AJAX:', error);
        }
      },
      columns: [{
          data: 'DT_RowIndex',
          name: 'DT_RowIndex',
          searchable: false,
          title: "Nro."
        },
        {
          data: 'technician_type_name',
          title: "Tipo"
        },
        {
          data: "first_name",
          title: "Nombre"
        },
        {
          data: "last_name",
          title: "Apellido",
        },
        {
          data: "email",
          title: "email",
        },
        {
          data: "action",
          name: "action",
          title: "Acciones",
          orderable: false,
          searchable: false
        }
      ],
    });

    function updateTable() {
      techniciansTable.ajax.reload(); // Recargar la tabla con los nuevos filtros
    }
  </script>
@endpush