@extends('layouts.app', ['activePage' => 'productos', 'menuParent' => 'catalogos', 'titlePage' =>''])

@section('content')
@include('includes.tailwind')

<div class="content">
  <div class="container-fluid mt-4">
    <div class="row">
      <div class="col-lg-8">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-6 mb-4">
          <div class="flex items-start justify-between mb-2">
            <div>
              <h4 class="text-lg uppercase font-semibold text-slate-900">Productos y servicios</h4>
              <p class="text-sm text-slate-500">Administra el catálogo comercial para facturación: códigos, claves SAT, unidad y tipo de IVA.</p>
            </div>
          </div>

          <section class="bg-gray-25 rounded-lg border border-gray-200 p-3 mb-4">
            <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">📦</span>
              <div>
                <h6 class="text-sm font-semibold text-slate-900">Filtros y acciones</h6>
                <p class="text-sm text-slate-500">Filtra por estatus y realiza operaciones rápidas sobre tu catálogo.</p>
              </div>
            </div>

            <div class="row items-end">
              <div class="col-md-4">
                <div class="form-group mb-0">
                  <label class="text-sm font-medium text-slate-700">Estatus:</label>
                  <select id="estatus" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Todos</option>
                    <option value="1">Activos</option>
                    <option value="0">Inactivos</option>
                  </select>
                </div>
              </div>
              <div class="col-md-8 text-right mt-3 mt-md-0">
                <button class="inline-flex items-center gap-2 bg-[#0A415F] hover:bg-slate-800 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="loadGrid();">
                  <i class="material-icons text-sm">search</i>
                  Buscar
                </button>

                <button class="inline-flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200" onclick="nuevoProducto();">
                  <i class="material-icons text-sm">add</i>
                  Nuevo
                </button>
              </div>
            </div>
          </section>


        </div>
      </div>

      <div class="col-lg-4">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4 mb-4 sticky top-4">
          <div class="flex items-center gap-2 mb-3">
            <h6 class="text-sm font-semibold text-slate-900">Ayuda rápida</h6>
          </div>
          <div class="space-y-3">
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">1</div>
              <p class="text-xs text-slate-600 mb-0">Usa el filtro de estatus para acotar resultados antes de buscar.</p>
            </div>
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">2</div>
              <p class="text-xs text-slate-600 mb-0">Captura clave SAT de 8 dígitos y selecciona unidad SAT válida.</p>
            </div>
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">3</div>
              <p class="text-xs text-slate-600 mb-0">Configura correctamente el tipo de IVA para evitar errores al timbrar.</p>
            </div>
            <div class="flex gap-2">
              <div class="h-[24px] w-[24px] rounded-full bg-[#0A415F] flex items-center justify-center text-sm font-semibold text-white shadow-sm flex-shrink-0">4</div>
              <p class="text-xs text-slate-600 mb-0">Desactiva en lugar de eliminar para conservar historial operativo.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-4">
          <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-200 pb-2 mb-3">
            <div>
              <h6 class="text-sm font-semibold text-slate-900 mb-1">Listado de productos y servicios</h6>
              <p class="text-xs text-slate-500 mb-0">Detalle de los productos y servicios disponibles en el catálogo.</p>
            </div>
            <p class="text-xs font-semibold text-slate-600 bg-slate-50 border border-slate-200 rounded-md px-3 py-1 mb-0">Consulta dinámica</p>
          </div>
          <div class="table-scroll">
            <table class="min-w-full display nowrap" cellspacing="0" width="100%" style="width:100%" id="gridProductos">
              <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 width="5%" class="px-2 py-2">ID</th>
                  <th width="10%" class="px-2 py-2">Código</th>
                  <th class="px-2 py-2">Descripción</th>
                  <th class="px-2 py-2" align="center">Clave Producto SAT</th>
                  <th class="px-2 py-2" align="center">Clave Unidad SAT</th>
                  <th class="px-2 py-2">Subtotal</th>
                  <th class="px-2 py-2">IVA</th>
                  <th class="px-2 py-2">Estatus</th>
                  <th width="10%" class="px-2 py-2">Acciones</th>
                </tr>
              </thead>
              <tfoot>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal fade" id="modalAgregarProducto">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
        <h5 class="modal-title text-lg font-semibold text-gray-900">
          <i class="fas fa-box mr-2"></i>Agregar producto/servicio
        </h5>
        <button type="button" class="close text-gray-400 hover:text-gray-600" data-dismiss="modal" aria-label="Close">
          <i class="material-icons">close</i>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Código: <span class="text-danger">*</span></label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="codigo" required>
            </div>
          </div>
          <div class="col-md-8">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Descripción: <span class="text-danger">*</span></label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="descripcion" required>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Clave SAT: <span class="text-danger">*</span></label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="clavesat" maxlength="8" required>
            </div>
          </div>
          <div class="col-md-3 ">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Clave Unidad SAT: <span class="text-danger">*</span></label>
              <select id="unidadsat" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                @foreach ($data['unidad'] as $key => $i)
                <option value="{{ $i->id }}">{{ $i->clave_unidad_sat }} - {{ $i->descripcion }}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-1 mt-3">
            <button class="px-2 py-1 bg-transparent border hover:text-green-600 text-xs font-medium rounded-md transition-colors duration-200 flex mb-2 items-center gap-2" onclick="nuevaUnidad()">+</button>
          </div>
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de IVA: <span class="text-danger">*</span></label>
              <select id="tipoIva" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                @foreach ($data['impuestos'] as $key => $i)
                @if ($i->factor =='Exento')
                <option value="{{ $i->id }}">Exento</option>
                @else
                <option value="{{ $i->id }}">{{ $i->descripcion }} {{ number_format($i->tasa,2) }}%</option>
                @endif
                @endforeach
              </select>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Subtotal:</label>
              <input type="number" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="subtotal" placeholder="0.00">
            </div>
          </div>
          @php

          if ($data['predial']=='1' ) {
          $disp='block' ;
          } else {
          $disp='none' ;
          }
          @endphp
          <div class="col-md-4" style="display: {{ $disp }};padding-top: 2%">
            <div class="mb-2">
              <label class="block text-sm font-medium text-gray-700 mb-1">Predial: </label>
              <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="predial">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button"
          class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">
          <i class="fas fa-times text-sm"></i>
          Cerrar
        </button>
        <button type="button"
          class="flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white border border-green-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="guardaProd();">
          <i class="fas fa-save text-sm"></i>
          Guardar
        </button>
      </div>
    </div>
  </div>
</div>




<div class="modal fade" id="modalNuevaUnidad">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
        <h5 class="modal-title text-lg font-semibold text-gray-900">
          <i class="fas fa-box mr-2"></i>Agregar unidad
        </h5>
        <button type="button" class="close text-gray-400 hover:text-gray-600" data-dismiss="modal" aria-label="Close">
          <i class="material-icons">close</i>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-12">
            <label class="block text-sm font-medium text-gray-700 mb-1">Unidad SAT:<span class="text-danger">*</span></label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="clave_unidadsat" maxlength="4">
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <label class="block text-sm font-medium text-gray-700 mb-1">Descripción:<span class="text-danger">*</span></label>
            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="descUsat">
          </div>
        </div>
      </div>
      <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
        <button type="button"
          class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 mr-2 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">
          <i class="fas fa-times text-sm"></i>
          Cerrar
        </button>
        <button type="button"
          class="flex items-center gap-2 bg-green-500 hover:bg-green-600 text-white border border-green-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="guardaUnidadSAT();">
          <i class="fas fa-save text-sm"></i>
          Guardar
        </button>
      </div>
    </div>
  </div>
</div>

<input type="hidden" id="idProducto">
<style>
  .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 {
    font-size: 10px !important;
  }

  table.dataTable tfoot th,
  table.dataTable tfoot td {
    font-size: 11px !important;
  }

  table.dataTable tbody td {
    font-size: 11px !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: 550px;
    overflow-y: auto;
  }

  .swal-popup-modern {
    border-radius: 14px !important;
    border: 1px solid #dbe3ee !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16) !important;
    padding: 1.2rem 1.1rem !important;
  }

  .swal-title-modern {
    font-size: 1.1rem !important;

    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .swal-text-modern {
    font-size: 0.875rem !important;
    color: #475569 !important;
  }

  .swal-btn-confirm,
  .swal-btn-cancel {
    border-radius: 10px !important;
    padding: 0.5rem 0.95rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
  }

  .swal-btn-confirm {
    background: #0A415F !important;
    color: #ffffff !important;
    border: 1px solid #0A415F !important;
  }

  .swal-btn-confirm:hover {
    background: #08344b !important;
    border-color: #08344b !important;
  }

  .swal-btn-cancel {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
  }

  .swal-btn-cancel:hover {
    background: #f8fafc !important;
    color: #1e293b !important;
  }
</style>

@endsection

@push('js')
<script>
  const SWAL_THEME = {
    customClass: {
      popup: 'swal-popup-modern',
      title: 'swal-title-modern',
      htmlContainer: 'swal-text-modern',
      confirmButton: 'swal-btn-confirm',
      cancelButton: 'swal-btn-cancel',
      denyButton: 'swal-btn-cancel'
    },
    buttonsStyling: false
  };

  function swalToast(icon, title) {
    return Swal.fire({
      ...SWAL_THEME,
      toast: true,
      position: 'top-end',
      icon: icon,
      title: title,
      showConfirmButton: false,
      timer: 2200,
      timerProgressBar: true
    });
  }

  function swalValidation(title) {
    return Swal.fire({
      ...SWAL_THEME,
      icon: 'warning',
      title: 'Validacion',
      text: title,
      confirmButtonText: 'Entendido'
    });
  }

  $(document).ready(function() {
    $('.select2').select2({
      width: '100%',
    });
    loadGrid();
  });

  function guardaProd() {

    var codigo = $('#codigo').val()
    var desc = $('#descripcion').val()
    var clavesat = $('#clavesat').val()
    var unidadsat = $('#unidadsat').val()
    var subtotal = $('#subtotal').val()
    var id = $('#idProducto').val()
    var tipoIva = $('#tipoIva').val()
    var predial = $('#predial').val()

    if (codigo == '') {
      $('#codigo').focus();
      swalValidation('El codigo esta vacio.');
      return false;
    }
    if (desc == '') {
      $('#descripcion').focus();
      swalValidation('La descripcion esta vacia.');
      return false;
    }
    if (clavesat == '') {
      $('#clavesat').focus();
      swalValidation('La clave producto SAT esta vacia.');
      return false;
    }
    if (clavesat.length < 8) {
      swalValidation('La clave producto SAT debe contener 8 digitos.');
      return false;
    }


    $.ajax({
        url: "{{ url('catalogo/guarda_producto') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id,
          codigo: codigo,
          desc: desc,
          clavesat: clavesat,
          unidadsat: unidadsat,
          subtotal: subtotal,
          tipoIva: tipoIva,
          predial: predial,
        },
      })
      .done(function(resp) {
        console.log("success");
        if (resp.estatus > 0) {
          $('#gridProductos').DataTable().ajax.reload();
          swalToast('success', 'Producto guardado con exito.');
          $('#modalAgregarProducto').modal('hide')
          return false;
        } else {
          swalToast('warning', resp.msj || 'No fue posible guardar el producto.');
          //$('#modalAgregarProducto').modal('hide')
          return false;
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });


  }

  function loadGrid() {
    var estatus = $('#estatus').val();


    $('#gridProductos').dataTable().fnDestroy();
    var table = $('#gridProductos').DataTable({
      lengthMenu: [10, 20, 50, 100, 200, 500],
      // processing: true,
      dom: 'Blfrtip',
      // scrollX: true, 
      language: {
        url: "{{asset('material/datatable_sp.json')}}"
      },
      ajax: {
        url: "{{url('catalogo/get_productos')}}",
        type: "POST",
        data: {
          estatus: estatus,

        },
      },
      columns: [{
          data: "id"
        },
        {
          data: "codigo"
        },
        {
          data: "descripcion"
        },
        {
          data: "clave_sat"
        },
        {
          data: "clave_sat",
          render: function(data, type, row) {
            return row.unidad.clave_unidad_sat
          }
        },
        {
          data: "subtotal",
          render: function(data, type, row) {
            return new Intl.NumberFormat('en-US', {
              style: 'currency',
              currency: 'USD'
            }).format(row.subtotal)
          }
        },
        {
          data: "subtotal",
          render: function(data, type, row) {
            tasa = row.impuestos[0].impuesto.tasa
            if (row.impuestos[0].impuesto.impuesto == 'IVAE') {
              return 'Exento'
            } else {
              return parseFloat(tasa).toFixed(2) + '%'
            }

          }
        },
        {
          data: "estatus",
          render: function(data, type, row) {
            if (row.estatus == '1') {
              return '<div align="center"><span class="badge badge-success">Activo</span></div>'
            } else {
              return '<div align="center"><span class="badge badge-danger">Inactivo</span></div>'
            }
          }
        },
        {
          data: "estatus",
          render: function(data, type, row) {
            if (row.estatus == '1') {
              return '<div align="center"><button class="btn btn-secondary btn-xsm mr-1" title="Editar" onclick="edita(' + row.id + ')"><i class="material-icons">edit</i></button><button class="btn btn-secondary btn-xsm" title="Desactivar" onclick="desactivar(' + row.id + ');"><i class="fa fa-times" aria-hidden="true"></i></button></div>'
            } else {
              return '<div align="center"><span class="badge badge-danger">Inactivo</span></div>'
            }
          }
        },

      ],
      order: [
        [0, "desc"]
      ],
      buttons: [{
          extend: 'excelHtml5',
          text: 'EXCEL',
          titleAttr: 'Excel',
        },
        {
          extend: 'csvHtml5',
          text: 'CSV',
          titleAttr: 'CSV',
        },
        {
          extend: 'pdfHtml5',
          text: 'PDF',
          titleAttr: 'PDF',
        },
        {
          extend: 'copyHtml5',
          text: 'COPIAR',
          titleAttr: 'Copiar',
        },

      ]
    });
  }

  function nuevoProducto() {
    $('#idProducto').val('');
    $('#descripcion').val('');
    $('#codigo').val('');
    $('#subtotal').val('');
    $('#clavesat').val('');
    $('.impuescheck').prop("checked", false)

    $('#modalAgregarProducto').modal('show')
  }

  function nuevaUnidad() {
    $('#modalNuevaUnidad').modal()
  }

  function guardaUnidadSAT() {

    var desc = $('#descUsat').val()
    var unidad = $('#clave_unidadsat').val()
    if (desc == '' || unidad == '') {
      swalValidation('Existen campos vacios.');
      return false;
    }
    $.ajax({
        url: "{{ url('catalogo/guarda_unidad_sat') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          desc: desc,
          unidad: unidad,
        },
      })
      .done(function(resp) {
        console.log(resp);
        if (resp.estatus > 0) {
          swalToast('success', 'Unidad guardada correctamente.');
          option = '<option value="' + resp.estatus + '">' + unidad + ' - ' + desc + '</option>'
          $('#unidadsat').append(option)
          $('#unidadsat').val(resp.estatus)
          $('#unidadsat').trigger('change.select2');
          $('#modalNuevaUnidad').modal('hide')
          return false
        } else {
          swalToast('warning', 'Ya existe una unidad con ese codigo.');
          return false;
        }
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function edita(id) {
    $.ajax({
        url: "{{ url('catalogo/get_producto') }}",
        type: 'POST',
        dataType: 'json',
        data: {
          id: id
        },
      })
      .done(function(resp) {
        console.log("success");
        $('#idProducto').val(resp.info.id)
        $('#codigo').val(resp.info.codigo)
        $('#descripcion').val(resp.info.descripcion)
        $('#clavesat').val(resp.info.clave_sat)
        $('#unidadsat').val(resp.info.id_unidad)
        $('#subtotal').val(resp.info.subtotal)
        $('#tipoIva').val(resp.impuestos)
        $('#predial').val(resp.info.predial)
        $('#unidadsat').trigger('change.select2');
        $('#tipoIva').trigger('change.select2');
        $('#modalAgregarProducto').modal('show')
      })
      .fail(function() {
        console.log("error");
      })
      .always(function() {
        console.log("complete");
      });

  }

  function desactivar(id) {
    Swal.fire({
      ...SWAL_THEME,
      icon: 'warning',
      title: "¿Quieres desactivar el producto/servicio?",
      text: 'El registro se marcara como inactivo y dejara de estar disponible para uso normal.',
      showCancelButton: true,
      confirmButtonText: "Si, desactivar",
      cancelButtonText: "Cancelar"
    }).then((result) => {

      /* Read more about isConfirmed, isDenied below */
      if (result.isConfirmed) {
        $.ajax({
            url: "{{ url('catalogo/desactivar_producto') }}",
            type: 'POST',
            dataType: 'json',
            data: {
              id: id
            },
          })
          .done(function(resp) {
            console.log("success");
            if (resp.estatus > 0) {
              $('#gridProductos').DataTable().ajax.reload();
              swalToast('success', 'Producto desactivado correctamente.');
            }
          })
          .fail(function() {
            console.log("error");
          })
          .always(function() {
            console.log("complete");
          });

      }
    });
  }
</script>
@endpush