@extends('layouts.app', ['activePage' => 'unidad_negocio', '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">account_balance</i>
          </span>
          <div>
            <h6 class="text-xl font-semibold text-slate-900 mb-0">Gestor de Unidades de Negocio</h6>
            <p class="text-sm text-slate-500 mb-0">Administra, registra y actualiza unidades 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">domain_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 la información principal de la unidad de negocio.</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">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="tourUnidadNegocioTabla">
          <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 Unidades de Negocio</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">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 showNotification(icon, from, align, type, text, mensaje) {
    $.notify({
      icon: icon,
      message: "<label class='h5 font-weight-bold'>" + text + "</label> " + mensaje
    }, {
      type: type,
      delay: 2000,
      placement: {
        from: from,
        align: align
      }
    });
  }

  function loadGrid() {

    //$('#').DataTable();
    $('#tableDestinos').dataTable().fnDestroy();
    $('#tableDestinos').DataTable({
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      ajax: {
        url: "{{route('travelagent.catalogos.unidad-negocio.get-unidades')}}",
        type: "POST",
      },
      columns: [{
          data: "id"
        },
        {
          data: "clave"
        },
        {
          data: "nombre"
        },
        {
          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 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.unidad-negocio.save-unidad') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
          clave: clave,
          nombre: nombre,
          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');

  }


  function editar(id) {
    $.ajax({
        url: "{{route('travelagent.catalogos.unidad-negocio.get-unidad')}}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
        }
      })
      .done(function(resp) {
        console.log("success");
        if (resp.result == 1) {
          $('#idDestinoHidden').val(resp.data.id);
          $('#clave').val(resp.data.clave);
          $('#nombre').val(resp.data.nombre);
          $('#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.unidad-negocio.delete-unidad')}}",
            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