@extends('layouts.app', ['activePage' => 'vendedores', 'menuParent' => 'catalogos', 'titlePage' => ''])
@section('content')
@include('includes.tailwind')

<div class="content">
  <div class="container-fluid mt-4">
    <div class="bg-white border border-slate-200 rounded-lg shadow-sm px-4 pt-4 pb-3 mb-4">
      <div class="flex items-start justify-between gap-3 flex-wrap">
        <div class="flex items-center gap-3">
          <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-slate-900">
            <i class="material-icons text-base">badge</i>
          </span>
          <div>
            <h6 class="text-xl font-semibold text-slate-900 mb-0">Gestor de Vendedores</h6>
            <p class="text-sm text-slate-500 mb-0">Administra, registra y actualiza vendedores en una vista moderna y clara.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row gy-3">
      <div class="col-lg-4">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 h-100">
          <section class="rounded-lg border border-gray-200 p-3">
            <div class="flex items-center gap-3 mb-4">
              <span class="h-10 w-10 rounded-lg border border-slate-900 flex items-center justify-center text-lg text-slate-900">
                <i class="material-icons text-lg text-slate-500">person_add</i>
              </span>
              <div>
                <h6 class="text-base font-semibold text-slate-900 mb-0">ALTA / EDICIÓN</h6>
                <p class="text-sm text-slate-700 mb-0">Captura los datos principales del vendedor.</p>
              </div>
            </div>

            <input type="hidden" id="idDestinoHidden">

            <div class="space-y-3">
              <div>
                <label class="block text-sm font-medium text-slate-700">Clave: <span class="text-red-500">*</span></label>
                <input type="text" class="pf-input" id="clave">
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-700">Nombre: <span class="text-red-500">*</span></label>
                <input type="text" class="pf-input" id="nombre">
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-700">Correo:</label>
                <input type="text" class="pf-input" id="email">
              </div>

              <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                <div>
                  <label class="block text-sm font-medium text-slate-700">Comisión titular:</label>
                  <input type="number" step="any" class="pf-input" id="comision_titular">
                </div>
                <div>
                  <label class="block text-sm font-medium text-slate-700">Comisión auxiliar:</label>
                  <input type="number" step="any" class="pf-input" id="comision_auxiliar">
                </div>
              </div>

              <div>
                <label class="block text-sm font-medium text-slate-700">Estatus: <span class="text-red-500">*</span></label>
                <select id="estatus" class="js-select2">
                  <option value="1" selected>Activo</option>
                  <option value="0">Inactivo</option>
                </select>
              </div>
            </div>

            <div class="flex flex-wrap justify-end gap-2 border-t border-slate-100 pt-4 mt-4">
              <button type="button" class="inline-flex items-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200" onclick="limpiarSection()">
                <i class="material-icons text-base leading-none">refresh</i>
                Limpiar
              </button>
              <button type="button" class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 text-sm rounded-md font-medium transition-colors duration-200" onclick="guardarVendedor()">
                <i class="material-icons text-base leading-none">save</i>
                Guardar
              </button>
            </div>
          </section>
        </div>
      </div>

      <div class="col-lg-8">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4" id="tourVendedoresTabla">
          <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-2 mb-2">
            <div>
              <h6 class="text-base font-semibold text-slate-900 mb-1">Listado de Vendedores</h6>
              <p class="text-xs text-slate-500 mb-0">Consulta clave, nombre, estatus y acciones administrativas en una sola tabla.</p>
            </div>
          </div>

          <div class="table-scroll">
            <table class="min-w-full" id="tableDestinos" width="100%">
              <thead class="sticky-top bg-gray-50 px-6 py-3 text-[10px] font-semibold text-left text-gray-500 uppercase tracking-wider">
                <tr>
                  <th class="px-2 py-2">ID</th>
                  <th class="px-2 py-2">Clave</th>
                  <th class="px-2 py-2">Nombre</th>
                  <th class="px-2 py-2">Correo</th>
                  <th class="px-2 py-2">Comisión Titular</th>
                  <th class="px-2 py-2">Comisión Auxiliar</th>
                  <th class="px-2 py-2">Estatus</th>
                  <th class="px-2 py-2">Acciones</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .pf-input {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
  }

  .pf-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
  }

  .select2-container {
    width: 100% !important;
  }

  .select2-container .select2-selection--single {
    height: 40px !important;
  }

  .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_processing,
  .dataTables_wrapper .dataTables_paginate {
    font-size: 10px;
  }

  .dataTables_wrapper .dataTables_length select,
  .dataTables_wrapper .dataTables_filter input {
    font-size: 10px !important;
  }

  table.dataTable thead th,
  table.dataTable thead td,
  table.dataTable tbody td {
    font-size: 10px !important;
  }

  table.dataTable tbody tr:hover {
    background-color: #f8f9fa;
    cursor: pointer;
  }

  .dataTables_wrapper .dataTables_filter input {
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    border: 1px solid #e2e8f0 !important;
  }

  .dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    border-color: #0A415F !important;
    box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important;
  }

  .table-scroll {
    max-height: 560px;
    overflow-y: auto;
  }
</style>


@endsection

@push('js')
<script>
  function initSelect2(context) {
    if (!$.fn.select2) {
      return;
    }

    var $scope = context ? $(context) : $(document);
    $scope.find('.js-select2').each(function() {
      var $select = $(this);
      if ($select.hasClass('select2-hidden-accessible')) {
        return;
      }

      $select.select2({
        width: '100%',
        placeholder: '-Selecciona-',
        allowClear: false
      });
    });
  }

  $(document).ready(function() {
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });
    initSelect2();
    loadGrid()
  });


  function loadGrid() {

    //$('#').DataTable();
    $('#tableDestinos').dataTable().fnDestroy();
    $('#tableDestinos').DataTable({
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      ajax: {
        url: "{{route('travelagent.catalogos.vendedores.get-vendedores')}}",
        type: "POST",
      },
      columns: [{
          data: "id"
        },
        {
          data: "clave"
        },
        {
          data: "nombre"
        },
        {
          data: "email"
        },
        {
          data: "comision_titular"
        },
        {
          data: "comision_auxiliar"
        },

        {
          data: "estatus",
          render: function(data, type, row) {
            if (row.estatus == 1) {
              return '<span class="badge badge-success">Activo</span>';
            } else {
              return '<span class="badge badge-danger btn-sm">InActivo</span>';
            }

          }
        },
        {
          data: "estatus",
          render: function(data, type, row) {
            let html = '<button type="button" class="inline-flex items-center justify-center h-8 w-8 rounded-md bg-slate-100 hover:bg-slate-200 text-slate-700 mr-1" title="Editar" onclick="editar(' + row.id + ');"><i class="material-icons text-base">edit</i></button>';
            html += '<button type="button" class="inline-flex items-center justify-center h-8 w-8 rounded-md bg-rose-100 hover:bg-rose-200 text-rose-700" title="Eliminar" onclick="eliminar(' + row.id + ');"><i class="material-icons text-base">close</i></button>';
            return html
          }
        },

      ],
      order: [
        [0, "asc"]
      ],

    });

  }

  function guardarVendedor() {
    var id = $('#idDestinoHidden').val();
    var clave = $('#clave').val();
    var nombre = $('#nombre').val();
    var email = $('#email').val();
    var comision_titular = $('#comision_titular').val();
    var comision_auxiliar = $('#comision_auxiliar').val();
    var estatus = $('#estatus option:selected').val();

    if (clave == '' || nombre == '' || estatus == '') {
      showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar toda la información');
      return false;
    }
    $.ajax({
        url: "{{ route('travelagent.catalogos.vendedores.save-vendedor') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
          clave: clave,
          nombre: nombre,
          email: email,
          comision_titular: comision_titular,
          comision_auxiliar: comision_auxiliar,
          estatus: estatus,
        },
      })
      .done(function(resp) {
        if (resp.result == 1) {
          showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
          limpiarSection();
          $('#tableDestinos').DataTable().ajax.reload();

        } else {
          showNotification('thumb_up', 'top', 'center', 'success', '¡BIEN!', resp.mensaje)
          limpiarSection();
          $('#tableDestinos').DataTable().ajax.reload();
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }


  function limpiarSection() {
    $('#idDestinoHidden').val('');
    $('#clave').val('');
    $('#nombre').val('');
    $('#estatus').val('1').trigger('change');
    $('#email').val('');
    $('#comision_auxiliar').val('');
    $('#comision_titular').val('');

  }


  function editar(id) {
    $.ajax({
        url: "{{route('travelagent.catalogos.vendedores.get-vendedor')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
        }
      })
      .done(function(resp) {
        console.log("success");
        if (resp.result == 1) {
          $('.filled').addClass('is-filled');
          $('#idDestinoHidden').val(resp.data.id);
          $('#clave').val(resp.data.clave);
          $('#nombre').val(resp.data.nombre);
          $('#email').val(resp.data.email);
          $('#comision_titular').val(resp.data.comision_titular);
          $('#comision_auxiliar').val(resp.data.comision_auxiliar);
          $('#estatus').val(String(resp.data.estatus)).trigger('change');
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });
  }

  function eliminar(id) {
    Swal.fire({
      title: '¿Estás seguro de eliminar?',
      text: "Esta acción no es reversible",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      cancelButtonText: 'Cancelar',
      confirmButtonText: 'Si, eliminado!'
    }).then((result) => {
      if (result.value) {
        //$('#cargandoModal').modal()
        $.ajax({
            url: "{{route('travelagent.catalogos.vendedores.delete-vendedor')}}",
            type: 'POST',
            dataType: 'json',
            data: {
              id: id,
            }
          })
          .done(function(resp) {
            console.log("success");
            if (resp.result == 1) {
              showNotification('thumb_up', 'top', 'center', 'success', resp.mensaje, '¡BIEN!')
              $('#tableDestinos').DataTable().ajax.reload();

            }
          })
          .fail(function() {
            console.log("error");
          })
          .always(function() {
            console.log("complete");
          });

      }
    })
  }
</script>
@endpush