@extends('layouts.app', ['activePage' => 'familia', 'titlePage' => __('Familias')])
@section('content')

<style>
  .dataTables_scrollHeadInner {
    width: 100% !important;
  }

  .dataTables_scrollHeadInner table {
    width: 100% !important;
  }
</style>

<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-primary">
            <h4 class="card-title ">Familias / Sub-Familias</h4>
            <div class="nav-tabs-navigation">
              <div class="nav-tabs-wrapper">
                <ul class="nav nav-pills nav-pills-primary" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#familia" role="tablist" aria-expanded="true" aria-selected="true">
                      Familias
                    </a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#subfamilia" role="tablist" aria-expanded="false">
                      Sub Familias
                    </a>
                  </li>

                </ul>
              </div>
            </div>
            <hr>
          </div>
          <div class="card-body">
            <div class="tab-content tab-space">
              <div class="tab-pane active" id="familia" aria-expanded="true">
                <div class="row">
                  <div class="col-12" align="right">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#crearFamilia">
                      <i class="fa fa-user-plus" aria-hidden="true"></i> Nueva Familia
                    </button>
                  </div>
                </div>
                <div class="row tablesss">
                  <div class=" col-12 table-responsive">
                    <table id="table_familia" class="table table-bordered table-hover" width="100%">
                      <thead>
                        <tr>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">Descripcion</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">PorcentajeComision</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">FactorListaPrecios</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                        </tr>
                      </thead>
                    </table>

                  </div>
                </div>
              </div>
              <!--  fin de contenido familia -->

              <div class="tab-pane" id="subfamilia" aria-expanded="true">

                <div class="row">
                  <div class="col-12" align="right">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#crearSubFamilia">
                      <i class="fa fa-user-plus" aria-hidden="true"></i> Nueva Sub-Familia
                    </button>
                  </div>
                </div>

                <div class="row tablesss">
                  <div class="col-12 table-responsive">
                    <table id="table_subfamilia" class="table table-bordered table-hover" width="100%">
                      <thead>
                        <tr>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">ID</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">Descripción</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">Familia</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">Web</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">Porcentaje</th>
                          <th class="text-white text-xxs font-weight-bolder opacity-7">Acciones</th>
                        </tr>
                      </thead>
                    </table>
                  </div>
                </div>

              </div>
            </div>
            <!-- fin de contenido subfamilia -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Create Familia-->
<div class="modal fade" id="crearFamilia" tabindex="-1" role="dialog" aria-labelledby="crearFamiliaLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal" id="crearFamiliaLabel">Nueva familia</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <form id="form_create_familia" action="{{url('/catalogo/familia/crear')}}" method="POST">
          @csrf
          <div class="input-group input-group-static mb-2">
            <label>Descripción: <span class="text-danger">*</span></label>
            <input id="descripcion" name="descripcion" type="text" class="form-control">
          </div>

          <div class="input-group input-group-static mb-2">
            <label>Porcentaje de comisión: <span class="text-danger">*</span></label>
            <input id="porcentaje" name="porcentaje" type="number" step="any" class="form-control">
          </div>

          <div class="input-group input-group-static mb-2">
            <label>Factor lista de precios: <span class="text-danger">*</span></label>
            <input id="factorPrecios" name="factorPrecios" type="text" class="form-control">
          </div>
      </div>
      <div class="modal-footer">
        <button id="btnCancelar" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Guardar</button>
      </div>
      </form>
    </div>
  </div>
</div>
<!-- Modal Edit Familia -->
<div class="modal fade" id="editarFamilia" tabinex="-1" role="dialog" aria-labelledby="editarFamiliaLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal" id="crearFamiliaLabel">Editar Familia</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <form id="form_editar_familia" action="{{url('/catalogo/familia/actualizar')}}" method="POST">
          @csrf
          <div class="input-group input-group-static mb-2">
            <label>Descripción: <span class="text-danger">*</span></label>
            <input id="descripcion_edit_familia" name="descripcion_edit_familia" type="text" class="form-control">
          </div>

          <div class="input-group input-group-static mb-2">
            <label>Porcentaje de comisión: <span class="text-danger">*</span></label>
            <input id="porcentaje_edit_familia" name="descripcion_edit_familia" type="text" class="form-control">
          </div>

          <div class="input-group input-group-static mb-2">
            <label>Factor lista de precios: <span class="text-danger">*</span></label>
            <input id="factorPrecios_edit_familia" name="descripcion_edit_familia" type="text" class="form-control">
          </div>

          <input type="hidden" id="id_edit_familia" name="id_edit_familia" value="">
      </div>
      <div class="modal-footer">
        <button id="btnCancelarEditar" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Guardar</button>
      </div>

      </form>
    </div>
  </div>
</div>
<!-- Modal Delete Familia -->
<div class="modal fade" id="eliminarFamilia" tabinex="-1" role="dialog" aria-labelledby="eliminarFamiliaLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal" id="eliminarFamiliaLabel">Eliminar Familia</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <form id="formEliminarFamilia" action="#" method="post">
          @csrf
          <input type="hidden" id="eliminar_id_familia" name="eliminar_id_familia" value="">
          <p id="message_familia"></p>
          <div class="modal-footer">
            <button id="btnCerrarEliminar" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn bg-gradient-danger">Eliminar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>


<!-- modales SubFamilia -->
<div class="modal fade" id="crearSubFamilia" tabindex="-1" role="dialog" aria-labelledby="crearSubFamilia" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title  font-weight-normal">Nueva Sub-familia</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="form_create_subfamilia" action="#" method="POST">
        <div class="modal-body">
          <div class="input-group input-group-static mb-2">
            <label for="familia_subfamilia">Familia: <span class="text-danger">*</span></label>
            <select id="familia_subfamilia" name="familia_subfamilia" type="text" class="form-control" required>
              <option value="" disabled selected>-Selecciona una opción-</option>
              @foreach($familias as $familia)
              <option value="{{$familia->Id}}">{{$familia->Id}} - {{$familia->Descripcion}}</option>
              @endforeach
            </select>
          </div>
          <div class="input-group input-group-static mb-2">
            <label>Descripción: <span class="text-danger">*</span></label>
            <input id="descripcion_subfamilia" name="descripcion" type="text" class="form-control" aria-describedby="basic-addon1" required>
          </div>
          <div class="input-group input-group-static mb-2">
            <label>Porcentaje de comisión: <span class="text-danger">*</span></label>
            <input id="porcentaje_comision_subfamilia" name="porcentaje_comisión" type="text" class="form-control" aria-describedby="basic-addon1">
          </div>

          <div class="input-group input-group-static mb-2">
            <label for="web">Web:</label>
            <select id="web_subfamilia" name="web" id="web" class="form-control">
              <option value="" disabled selected>-Selecciona una opción-</option>
              <option value="si">Si</option>
              <option value="no">No</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button id="btn_cerrar_subfamilia" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
          <button type="submit" class="btn btn-primary">Guardar</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="editarSubFamilia" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title  font-weight-normal">Editar Sub-Familia</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="form_edit_subfamilia" action="#" method="POST">
          @csrf
          <div class="input-group input-group-static mb-2">
            <label for="familia_subfamilia">Familia: <span class="text-danger">*</span></label>

            <select id="familia_subfamilia_edit" name="familia_subfamilia_edit" type="text" class="form-control" required>
              <option value="" disabled selected>-Selecciona una opción-</option>
            </select>

          </div>

          <div class="input-group input-group-static mb-2">
            <label>Descripción: <span class="text-danger">*</span></label>
            <input id="descripcion_edit" name="descripcion_edit" type="text" class="form-control" placeholder="Descripcion" aria-label="Descripcion" aria-describedby="basic-addon1" required>
          </div>

          <div class="input-group input-group-static mb-2">
            <label>Porcentaje de comisión: <span class="text-danger">*</span></label>
            <input id="porcentaje_edit" name="porcentaje_edit" type="text" class="form-control" placeholder="Porcentaje Comisión" aria-label="Porcentaje Comisión" aria-describedby="basic-addon1">
          </div>

          <div class="input-group input-group-static mb-2">
            <label for="web">Web:</label>
            <select id="web_subfamilia_edit" name="web" id="web" class="form-control">
              <option value="" disabled selected>Selecciona una opción</option>
            </select>
          </div>

          <input type="hidden" id="id_subfamilia_edit" name="id_subfamilia_edit" value="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="submit" class="btn btn-primary">Guardar</button>
      </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="eliminarSubFamilia" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title font-weight-normal">Eliminar SubFamilia</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="form_eliminar_subfamilia" action="#" method="post">
          @csrf
          <input type="hidden" id="eliminar_id_sub" name="eliminar_id_sub" value="">
          <p id="message"></p>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="submit" class="btn bg-gradient-danger">Eliminar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- <script type="application/javascript" src="{{ asset('js/familias/familia.js') }}?1746402466"></script> -->
<script type="application/javascript">
  const obtenerFamilias = async () => {
    let response = await fetchRequest('{{url("/catalogo/familia/get")}}', {})
    const familias = response.familias;
    return familias
  }
  const obtenerSubfamilias = async () => {
    let response = await fetchRequest('{{url("/catalogo/familia/subfamilias")}}', {})
    const subfamilias = response.subFamilias;
    return subfamilias
  }
  const inicializarFamilia = async () => {
    const data = await obtenerFamilias();

    data.forEach(element => {
      element.Acciones =
        `
        <div class="text-center">
        <a class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editarFamilia" href="#" onclick="editaFamilia(${element.Id})">
            <i class="fa fa-pencil" aria-hidden="true" style="margin-right: 3px;"></i>
        </a>
        <a class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#eliminarFamilia" href="#" onclick="eliminarFamilia(${element.Id})">
            <i class="fa fa-times" aria-hidden="true" style="margin-right: 3px;"></i>
        </a>
        <div>
        `;
    });
    $('#table_familia').dataTable().fnDestroy();
    $('#table_familia').DataTable({
      dom: 'Bfrtip',
      processing: true,
      responsive: true,
      scrollY: '37vh',
      scrollCollapse: true,
      data: data,
      columns: [{
          data: "Id"
        },
        {
          data: "Descripcion"
        },
        {
          data: "PorcentajeComision"
        },
        {
          data: "FactorListaPrecios"
        },
        {
          data: "Acciones"
        }
      ],
      order: [
        [1, "asc"]
      ],
      buttons: [{
          extend: 'copyHtml5',
          text: '<i class="fa fa-files-o"></i>',
          titleAttr: 'Copiar'
        },
        {
          extend: 'excelHtml5',
          text: '<i class="fa fa-file-excel-o"></i>',
          titleAttr: 'Excel'
        },
        {
          extend: 'csvHtml5',
          text: '<i class="fa fa-file-text-o"></i>',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdfHtml5',
          text: '<i class="fa fa-file-pdf-o"></i>',
          titleAttr: 'PDF'
        }
      ],
    });

  }

  const inicializarSubFamilia = async () => {
    const subfamilia = await obtenerSubfamilias();

    subfamilia.forEach(element => {
      element.Acciones =
        `
        <div class="text-center">

        <a class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editarSubFamilia" href="#" onclick="editaSubFamilia(${element.Id})">
            <i class="fa fa-pencil" aria-hidden="true" style="margin-right: 3px;"></i>
        </a>
        <a class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#eliminarSubFamilia" href="#" onclick="eliminarSubFamilia(${element.Id})">
            <i class="fa fa-times" aria-hidden="true" style="margin-right: 3px;"></i>
        </a>
        </div>
        `;
    });
    $('#table_subfamilia').dataTable().fnDestroy();
    $('#table_subfamilia').DataTable({
      dom: 'Bfrtip',
      processing: true,
      responsive: true,
      scrollY: '37vh',
      scrollCollapse: true,
      data: subfamilia,
      columns: [{
          data: "Id"
        },
        {
          data: "Descripcion"
        },
        {
          data: "DesFamilia"
        },
        {
          data: "MostrarWeb"
        },
        {
          data: "PorcentajeComision"
        },
        {
          data: "Acciones"
        }
      ],
      order: [
        [0, "desc"]
      ],
      buttons: [{
          extend: 'copyHtml5',
          text: '<i class="fa fa-files-o"></i>',
          titleAttr: 'Copiar'
        },
        {
          extend: 'excelHtml5',
          text: '<i class="fa fa-file-excel-o"></i>',
          titleAttr: 'Excel'
        },
        {
          extend: 'csvHtml5',
          text: '<i class="fa fa-file-text-o"></i>',
          titleAttr: 'CSV'
        },
        {
          extend: 'pdfHtml5',
          text: '<i class="fa fa-file-pdf-o"></i>',
          titleAttr: 'PDF'
        }
      ],

    });

  }

  inicializarFamilia();
  inicializarSubFamilia();


  //Function fetch to made request
  async function fetchRequest(url = '', data = {}) {
    // Default options are marked with *
    // console.log(url, data);
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
      },
      body: JSON.stringify(data)
    });
    return response.json(); // parses JSON response into native JavaScript objects
  }
  //function to reset values
  const resetValues = ($descripcionCampo, $porcentajeCampo, $factorPreciosCampo) => {
    $descripcionCampo.value = ' ';
    $porcentajeCampo.value = ' ';
    $factorPreciosCampo.value = ' ';
  }

  const removeOptions = (select) => {
    if (select.length >= 1) {
      for (let i = select.length - 1; i >= 0; i--) { //Eliminamos del DOM las opciones cargadas
        select.remove(i);
      }
    }
  }

  //Create Familia
  const $form = document.getElementById('form_create_familia');
  const $descripcion = document.getElementById('descripcion');
  const $porcentaje = document.getElementById('porcentaje');
  const $factorPrecios = document.getElementById('factorPrecios');
  const $btnCancelar = document.getElementById('btnCancelar');

  $form.addEventListener('submit', async (event) => {
    event.preventDefault();
    const familia = {
      descripcion: $descripcion.value,
      porcentaje: $porcentaje.value,
      factorPrecios: $factorPrecios.value,
    }

    if ($descripcion.value == '' || $porcentaje.value == '' || $porcentaje.value > 100 && $porcentaje.value < 0 || $factorPrecios.value > 100 && $factorPrecios.value < 0) {
      Swal.fire({
        type: 'error',
        title: 'Oops...',
        text: 'Debes agregar toda la información obligatoria'
      });

    } else {

      fetchRequest('{{url("/catalogo/familia/crear")}}', familia)
        .then(response => {
          ({
            status,
            message
          } = response); //destructuring obj
          if (status == 200) {
            $('#crearFamilia').modal('toggle');
            resetValues($descripcion, $porcentaje, $factorPrecios);
            // $form[0].reset();
            Swal.fire({
              type: 'success',
              title: '¡Se ha guardado correctamente!',
              showConfirmButton: false,
              timer: 2500
            });

            inicializarFamilia();
          }
        })

    } //fin del if-else
  });
  $btnCancelar.onclick = function() {
    resetValues($descripcion, $porcentaje, $factorPrecios);
  }
  //Edit Familia
  const $descripcion_edit_familia = document.getElementById('descripcion_edit_familia');
  const $factorPrecios_edit_familia = document.getElementById('factorPrecios_edit_familia');
  const $porcentaje_edit_familia = document.getElementById('porcentaje_edit_familia');
  const editaFamilia = (idFamilia) => {
    console.log(idFamilia);
    const $id_editar_familia = document.getElementById('id_edit_familia');
    const $descripcion_edit_familia = document.getElementById('descripcion_edit_familia');
    const $factorPrecios_edit_familia = document.getElementById('factorPrecios_edit_familia');
    const $porcentaje_edit_familia = document.getElementById('porcentaje_edit_familia');

    fetchRequest('{{url("/catalogo/familia/editar")}}', {
        id: idFamilia
      })
      .then(data => {
        // console.log(data);
        ({
          Id,
          Descripcion,
          FactorListaPrecios,
          PorcentajeComision
        } = data) //destructuring object
        $id_editar_familia.value = Id;
        $descripcion_edit_familia.value = Descripcion;
        $factorPrecios_edit_familia.value = FactorListaPrecios;
        $porcentaje_edit_familia.value = PorcentajeComision;
      });
  }

  const $form_editar_familia = document.getElementById('form_editar_familia');
  $form_editar_familia.addEventListener('submit', async (event) => {
    event.preventDefault();
    const $id_editar_familia = document.getElementById('id_edit_familia');

    const familia = {
      id: $id_editar_familia.value,
      descripcion: $descripcion_edit_familia.value,
      porcentaje: $porcentaje_edit_familia.value,
      factorPrecios: $factorPrecios_edit_familia.value,
    }

    if ($descripcion_edit_familia.value == ' ' || $porcentaje_edit_familia.value > 100 && $porcentaje_edit_familia.value < 0 || $factorPrecios_edit_familia.value > 100 && $factorPrecios_edit_familia.value < 0) {
      Swal.fire({
        type: 'error',
        title: 'Oops...',
        text: 'Datos incorrectos'
      });

    } else {

      fetchRequest('{{url("/catalogo/familia/actualizar")}}', familia)
        .then(response => {
          ({
            status,
            message
          } = response); //destructuring obj
          if (status == 200) {
            // console.log('actualziar con exito');
            $('#editarFamilia').modal('toggle');
            resetValues($descripcion_edit_familia, $porcentaje_edit_familia, $factorPrecios_edit_familia);
            // $form[0].reset();
            Swal.fire({
              type: 'success',
              title: '¡Se ha actualizado correctamente!',
              showConfirmButton: false,
              timer: 2500
            });

            inicializarFamilia();
          }
        })
        .catch(error => {
          Swal.fire({
            type: 'error',
            title: 'Oops...',
            text: 'Error al actualizar',
            timer: 2500
          });
        });

    } //fin del if-else
  });

  const $btn_cancelar_editar = document.getElementById('btnCancelarEditar');
  $btn_cancelar_editar.onclick = function() {
    resetValues($descripcion_edit_familia, $porcentaje_edit_familia, $factorPrecios_edit_familia);
  }

  //Delete Familia
  const eliminar_id_familia = document.getElementById('eliminar_id_familia');
  const message_familia = document.getElementById('message_familia');
  const $form_eliminar_familia = document.getElementById('formEliminarFamilia')

  const eliminarFamilia = (idFamilia) => {

    fetchRequest('{{url("/catalogo/familia/confirmar")}}', {
        id: idFamilia
      })
      .then(data => {
        // console.log(data);
        eliminar_id_familia.value = data.Id;
        message_familia.innerHTML = `¿Desea eliminar la familia ${data.Descripcion}?`;
      });
  }

  $form_eliminar_familia.addEventListener('submit', async (event) => {
    event.preventDefault();
    console.log(eliminar_id_familia.value);
    fetchRequest('{{url("/catalogo/familia/eliminar")}}', {
        id: eliminar_id_familia.value
      })
      .then(data => {
        console.log(data);
        $('#eliminarFamilia').modal('toggle');
        Swal.fire({
          type: 'success',
          title: '¡Se ha borrado correctamente!',
          showConfirmButton: false,
          timer: 2500
        });

        inicializarFamilia();
      })
      .catch(error => {
        Swal.fire({
          type: 'error',
          title: 'Oops...',
          text: 'Error al Borrar familia',
          timer: 2500
        });
      });

  });

  const btn_familia_eliminar = document.getElementById('btnCerrarEliminar');
  btn_familia_eliminar.onclick = function() {
    eliminar_id_familia.value = ' ';
    message_familia.innerHTML = ' ';
  }

  //***Create Subfamilia ****//

  const $formCreateSubfamilia = document.getElementById('form_create_subfamilia');
  const $btnCerrarSubfamilia = document.getElementById('btn_cerrar_subfamilia');
  const $familiaSubfamilia = document.getElementById('familia_subfamilia');
  const $descripcionSubfamilia = document.getElementById('descripcion_subfamilia');
  const $porcentajeComisionSubfamilia = document.getElementById('porcentaje_comision_subfamilia');
  const $webSubfamilia = document.getElementById('web_subfamilia');

  $btnCerrarSubfamilia.onclick = function() {
    //
  };

  $formCreateSubfamilia.addEventListener('submit', async (event) => {
    event.preventDefault();
    let $familiaValue = $familiaSubfamilia.options[$familiaSubfamilia.selectedIndex].value; //select the value from options estados
    let $webSubfamiliaValue = $webSubfamilia.options[$webSubfamilia.selectedIndex].value;
    if ($familiaValue == '' || $descripcionSubfamilia.value == '' || $porcentajeComisionSubfamilia.value > 100 || $porcentajeComisionSubfamilia.value < 0) {
      Swal.fire({
        type: 'error',
        title: 'Oops...',
        text: 'Datos Invalidos'
      });
    } else {
      const subFamilia = {
        familia: $familiaValue,
        descripcion: $descripcionSubfamilia.value,
        porcentaje: $porcentajeComisionSubfamilia.value,
        web: $webSubfamiliaValue,
      }
      fetchRequest('{{url("/catalogo/subfamilia/crear")}}', subFamilia)
        .then(response => {
          ({
            status,
            message
          } = response);
          if (status == 200) {
            console.log(message);
            $('#crearSubFamilia').modal('toggle');
            Swal.fire({
              type: 'success',
              title: '¡Se ha guardado correctamente!',
              showConfirmButton: false,
              timer: 2500
            });
            // location.reload();
            inicializarSubFamilia();

          }
        })
        .catch(error => {
          Swal.fire({
            type: 'error',
            title: 'Oops...',
            text: 'Error en el Registro',
            timer: 2500
          });
        });

    }

  })
  // ******Edit SubFamilia********//
  $formEditarSubfamilia = document.getElementById('form_edit_subfamilia');
  const familiaSubfamiliaEdit = document.getElementById('familia_subfamilia_edit');
  const descripcionEdit = document.getElementById('descripcion_edit');
  const webEdit = document.getElementById('web_subfamilia_edit');
  const porcentajeEdit = document.getElementById('porcentaje_edit');
  const subfamiliaEdit = document.getElementById('id_subfamilia_edit');

  const getFamilias = async () => {
    let response = await fetchRequest('{{url("/catalogo/familia/get")}}', {})
    const familias = response.familias;
    return familias
  }

  const addOptionSelectEditFamilia = async (data, select) => {
    const familias = await getFamilias();

    let option = document.createElement('option');
    option.setAttribute("selected", "");
    option.setAttribute("disabled", "");
    option.value = data[0].id;
    option.innerHTML = `${data[0].id} - ${data[0].descripcion}`;
    select.appendChild(option);

    familias.forEach(element => {
      let option = document.createElement('option');
      option.value = element.Id;
      option.innerHTML = `${element.Id} - ${element.Descripcion}`;
      select.appendChild(option);
    });

  }
  const addOptionSelectEditWeb = (data, select) => {
    const opcSi = {
      id: "Si",
      descripcion: "Si"
    }
    const opcNo = {
      id: "No",
      descripcion: "No"
    }
    data.push(opcSi, opcNo);
    for (let i = 0; i < data.length; i++) {
      if (i == 0) {
        let option = document.createElement('option');
        option.setAttribute("selected", "");
        option.setAttribute("disabled", "");
        option.value = data[i].id;
        option.innerHTML = data[i].descripcion;
        select.appendChild(option);
      } else {
        let option = document.createElement('option');
        option.value = data[i].id;
        option.innerHTML = data[i].descripcion;
        select.appendChild(option);
      }
    }
  }

  const editaSubFamilia = (idSubFamilia) => {
    fetchRequest('{{url("/catalogo/subfamilia/edit")}}', {
        id: idSubFamilia
      })
      .then(data => {
        const optionFamilia = [{
          id: data[0].familias.Id,
          descripcion: data[0].familias.Descripcion
        }];
        const optionWeb = [{
          id: data[0].MostrarWeb,
          descripcion: data[0].MostrarWeb
        }];

        removeOptions(familiaSubfamiliaEdit);
        addOptionSelectEditFamilia(optionFamilia, familiaSubfamiliaEdit);

        removeOptions(webEdit);
        addOptionSelectEditWeb(optionWeb, webEdit);

        descripcionEdit.value = data[0].Descripcion;
        subfamiliaEdit.value = data[0].Id;
        porcentajeEdit.value = data[0].PorcentajeComision;

      });
  }

  $formEditarSubfamilia.addEventListener('submit', async (event) => {
    event.preventDefault();
    const familiaSubfamiliaEdit = document.getElementById('familia_subfamilia_edit');
    const descripcionEdit = document.getElementById('descripcion_edit');
    const webEdit = document.getElementById('web_subfamilia_edit');
    const porcentajeEdit = document.getElementById('porcentaje_edit');
    const subfamiliaEdit = document.getElementById('id_subfamilia_edit');

    let $familiaValue = familiaSubfamiliaEdit.options[familiaSubfamiliaEdit.selectedIndex].value; //select the value from options estados
    let $descripcionEdit = descripcionEdit.value;
    let $webEdit = webEdit.options[webEdit.selectedIndex].value;
    let $porcentajeEdit = porcentajeEdit.value;
    let $subfamiliaEdit = subfamiliaEdit.value;
    const subFamilia = {
      id: $subfamiliaEdit,
      porcentaje: $porcentajeEdit,
      descripcion: $descripcionEdit,
      web: $webEdit,
      familiaId: $familiaValue,
    }
    console.log(subFamilia);
    fetchRequest('{{url("/catalogo/subfamilia/update")}}', subFamilia)
      .then(response => {
        ({
          status,
          message
        } = response);
        if (status == 200) {
          $('#editarSubFamilia').modal('toggle');
          Swal.fire({
            type: 'success',
            title: '¡Se ha actualizado correctamente!',
            showConfirmButton: false,
            timer: 2500
          });
          inicializarSubFamilia();
        }
      })
      .catch(error => {
        Swal.fire({
          type: 'error',
          title: 'Oops...',
          text: 'Error al Actualizar',
          timer: 2500
        });
      });

  });
  //****Eliminar SubFamilia*****//
  $form_eliminar_subfamilia = document.getElementById('form_eliminar_subfamilia');
  $eliminar_id_sub = document.getElementById('eliminar_id_sub');

  const eliminarSubFamilia = (idSubFamilia) => {
    const eliminar_id_sub = document.getElementById('eliminar_id_sub');
    const message = document.getElementById('message');
    fetchRequest('{{url("/catalogo/subfamilia/confirmar")}}', {
        Id: idSubFamilia
      })
      .then(data => {
        eliminar_id_sub.value = data.Id;
        message.innerHTML = `¿Desea eliminar la subfamilia ${data.Descripcion}?`;
      });
  }

  $form_eliminar_subfamilia.addEventListener('submit', async (event) => {
    event.preventDefault();
    console.log($eliminar_id_sub.value);
    fetchRequest('{{url("/catalogo/subfamilia/eliminar")}}', {
        id: eliminar_id_sub.value
      })
      .then(data => {
        console.log(data);
        if (data.status == 200) {
          $('#eliminarSubFamilia').modal('toggle');
          Swal.fire({
            type: 'success',
            title: '¡Se ha borrado correctamente!',
            showConfirmButton: false,
            timer: 2500
          });
          inicializarSubFamilia();
        } else {
          Swal.fire({
            type: 'error',
            title: '¡ERROR!',
            text: 'No es posible eliminar la subfamilia, debido a que tiene un producto asociado.',
            showConfirmButton: false,
            timer: 2500
          });
        }


      })
      .catch(error => {
        Swal.fire({
          type: 'error',
          title: 'Oops...',
          text: 'Error al Borrar Subfamilia',
          timer: 2500
        });
      });

  })
</script>

@endsection