@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Catastro @endslot
@slot('title') Conexiones @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                <button type="button" class="btn btn-primary btn-sm px-4 mt-0 mb-3" 
                    data-bs-toggle="modal" 
                    data-bs-target="#modalConexion">
                    <i class="fas fa-plus"></i>  Nueva Conexión
                </button>
                <button type="button" class="btn btn-success btn-sm px-4 mt-0 mb-3 ms-2"
                    data-bs-toggle="modal"
                    data-bs-target="#modalImportarConexion">
                    <i class="fas fa-file-excel"></i>  Importar Excel
                </button>

                <div class="table-responsive">
                    <table id="tablaSectores" class="table table-striped mb-0 table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>ID Cliente</th>
                                
                                <th>N° Documento</th>
                                <th>Cliente</th>
                                <th>Categoria</th>
                                <th>Total Conexiones</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($clientes as $cliente)
                                <tr>
                                    <td>{{ $cliente->id_cliente }}</td>
                                    
                                    <td>{{ $cliente->documento_identidad }}</td>
                                    <td>{{ $cliente->nombres_razon_social ?? '—' }}</td>
                                    <td>{{ $cliente->conexiones->first()?->categoriaTarifa->nombre_categoria ?? '—' }}</td>
                                    <td>{{ $cliente->conexiones->count() }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-info"
                                            data-bs-toggle="modal"
                                            data-bs-target="#modalConexiones{{ $cliente->id_cliente }}">
                                            Ver Conexiones
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <!-- 🔽 Modales de conexiones -->
                    @foreach($clientes as $cliente)
                        <div class="modal fade" id="modalConexiones{{ $cliente->id_cliente }}" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Conexiones de {{ $cliente->nombres_razon_social }}</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        @if($cliente->conexiones->count() > 0)
                                            <table class="table table-bordered table-sm">
                                                <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Dirección</th>
                                                        <th>Medidor</th>
                                                        <th>Tarifa</th>
                                                        <th>Fecha Instalación</th>
                                                        <th>Estado</th>
                                                        <th>Acciones</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach($cliente->conexiones as $conexion)
                                                        <tr>
                                                            <td>{{ $conexion->id_conexion }}</td>
                                                            <td>
                                                                {{ $conexion->via->sector->nombre_sector ?? '—' }}
                                                                /
                                                                {{ $conexion->via->nombre_via ?? '—' }}
                                                                @if($conexion->via->manzana || $conexion->via->lote)
                                                                    / {{ $conexion->via->manzana ?? '' }} - {{ $conexion->via->lote ?? '' }}
                                                                @endif
                                                            </td>
                                                            <td>{{ $conexion->medidor->numero_serie ?? '' }}</td>
                                                            <td>{{ $conexion->categoriaTarifa->nombre_categoria ?? '—' }}</td>
                                                            <td>{{ $conexion->fecha_instalacion }}</td>
                                                            <td>
                                                                <span class="badge bg-{{ $conexion->estado == 'Activo' ? 'success' : ($conexion->estado == 'Suspendido' ? 'warning' : 'danger') }}">
                                                                    {{ $conexion->estado }}
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <button class="btn btn-sm text-warning btn-editar"
                                                                    data-id="{{ $conexion->id_conexion }}"
                                                                    data-id_cliente="{{ $conexion->id_cliente }}"
                                                                    data-id_via="{{ $conexion->id_via }}"
                                                                    data-id_sector="{{ $conexion->via->id_sector ?? '' }}" {{-- 👈 aquí --}}
                                                                    data-id_medidor="{{ $conexion->id_medidor }}"
                                                                    data-id_categoria_tarifa="{{ $conexion->id_categoria_tarifa }}"
                                                                    data-fecha="{{ $conexion->fecha_instalacion }}"
                                                                    data-estado="{{ $conexion->estado }}"
                                                                    data-bs-toggle="modal"
                                                                    data-bs-target="#modalEditarConexion">
                                                                    <i class="las la-pen font-18"></i>
                                                                </button>



                                                                <button class="btn btn-sm text-danger btn-eliminar"
                                                                    data-id="{{ $conexion->id_conexion }}">
                                                                    <i class="las la-trash-alt font-18"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        @else
                                            <p class="text-muted">Este cliente no tiene conexiones registradas.</p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>


            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
</div>



{{-- Modal Editar Conexión --}}
{{-- Modal Editar Conexión --}}
<!-- Modal Editar Conexión -->
<div class="modal fade" id="modalEditarConexion" tabindex="-1">
  <div class="modal-dialog">
    <form id="formEditarConexion" class="modal-content">
      @csrf
      @method('PUT')
      <input type="hidden" id="edit_id">
      <div class="modal-header">
        <h5 class="modal-title">Editar Conexión</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">

        <div class="mb-3">
          <label class="form-label">Cliente</label>
          <select name="id_cliente" id="edit_id_cliente" class="form-select" required>
            @foreach ($clientes as $c)
              <option value="{{ $c->id_cliente }}">{{ $c->nombres_razon_social }}</option>
            @endforeach
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Sector</label>
          <select name="id_sector" id="edit_id_sector" class="form-select" required>
            <option value="">Seleccione un sector</option>
            @foreach ($sectores as $s)
              <option value="{{ $s->id_sector }}">{{ $s->nombre_sector }}</option>
            @endforeach
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Vía</label>
          <select name="id_via" id="edit_id_via" class="form-select" required>
            <option value="">Seleccione una vía</option>
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Medidor</label>
          <select name="id_medidor" id="edit_id_medidor" class="form-select" required>
            @foreach ($medidores as $m)
              <option value="{{ $m->id_medidor }}">{{ $m->numero_serie }} - {{ $m->marca }}</option>
            @endforeach
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Categoría de Tarifa</label>
          <select name="id_categoria_tarifa" id="edit_id_categoria_tarifa" class="form-select" required>
            <option value="">Seleccione...</option>
            @foreach ($categoriasTarifa as $cat)
              <option value="{{ $cat->id_categoria_tarifa }}">{{ $cat->nombre_categoria }}</option>
            @endforeach
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label">Fecha Instalación</label>
          <input type="date" name="fecha_instalacion" id="edit_fecha" class="form-control" required>
        </div>

        <div class="mb-3">
          <label class="form-label">Estado</label>
          <select name="estado" id="edit_estado" class="form-select" required>
            <option value="Activo">Activo</option>
            <option value="Suspendido">Suspendido</option>
            <option value="Cortado">Cortado</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-warning" type="submit">Actualizar</button>
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Cancelar</button>
      </div>
    </form>
  </div>
</div>




<!-- Modal Registrar Conexión Completa -->
<!-- Modal Registrar Conexión Completa -->
<div class="modal fade" id="modalConexion" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <form id="formConexion" class="modal-content shadow-lg border-0">
      @csrf
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title mb-0">
          <i class="bi bi-link-45deg me-2"></i> Registrar Conexión de Agua
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
      </div>

      <div class="modal-body">
        <!-- Tabs -->
        <ul class="nav nav-tabs nav-bordered mb-3" id="conexionTabs" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabCliente" type="button" role="tab">
              <i class="bi bi-person-badge me-1"></i> Cliente
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabConexion" type="button" role="tab">
              <i class="bi bi-tools me-1"></i> Conexión
            </button>
          </li>
        </ul>

        <div class="tab-content" id="conexionTabsContent">

          <!-- TAB CLIENTE -->
          <div class="tab-pane fade show active" id="tabCliente" role="tabpanel">
            <!-- Campos Cliente -->
            <div class="mb-3 position-relative">
              <label class="form-label"><i class="bi bi-person-vcard me-1"></i> DNI / Nombre</label>
              <input type="text" id="buscarCliente" class="form-control" placeholder="Buscar cliente..." autocomplete="off">
              <div id="listaClientes" class="list-group position-absolute w-100 shadow-sm" style="z-index: 1050; display:none;"></div>
              <input type="hidden" id="id_cliente" name="id_cliente">
              <input type="hidden" id="id_medidor" name="id_medidor">
            </div>

            <div class="row g-3">
              <div class="col-md-4">
                <label class="form-label">Tipo Cliente</label>
                <select id="tipoCliente" name="tipo_cliente" class="form-select">
                  <option value="">Seleccione</option>
                  <option value="Natural">Natural</option>
                  <option value="Jurídico">Jurí­dico</option>
                </select>
              </div>
              <div class="col-md-4">
                <label class="form-label">Documento Identidad</label>
                <input type="text" id="documentoCliente" name="documento_identidad" class="form-control">
              </div>
              <div class="col-md-4">
                <label class="form-label">Teléfono</label>
                <input type="text" id="telefonoCliente" name="telefono" class="form-control">
              </div>
            </div>

            <div class="row g-3 mt-1">
              <div class="col-md-6">
                <label class="form-label">Nombre / Razón Social</label>
                <input type="text" id="nombreCliente" name="nombres_razon_social" class="form-control">
              </div>
              <div class="col-md-6">
                <label class="form-label">Email</label>
                <input type="email" id="emailCliente" name="email" class="form-control">
              </div>
            </div>

            <div class="mt-3">
              <label class="form-label">Dirección</label>
              <input type="text" id="direccionCliente" name="direccion" class="form-control">
            </div>

            <div class="mt-3">
              <label class="form-label">Estado</label>
              <select id="estadoCliente" name="estado" class="form-select">
                <option value="Activo">Activo</option>
                <option value="Inactivo">Inactivo</option>
              </select>
            </div>
          </div>

          <!-- TAB CONEXIÓN -->
          <div class="tab-pane fade" id="tabConexion" role="tabpanel">
            <!-- Sección Medidor -->
            <h6 class="fw-bold text-primary border-bottom pb-1 mb-3">
              <i class="bi bi-speedometer2 me-1"></i> Datos del Medidor
            </h6>

            <div class="mb-3 position-relative">
              <label class="form-label">N° de Serie</label>
              <input type="text" id="buscarMedidor" class="form-control" placeholder="Buscar medidor..." autocomplete="off">
              <div id="listaMedidores" class="list-group position-absolute w-100 shadow-sm" style="z-index: 1050; display:none;"></div>
            </div>

            <div class="row g-3">
              <div class="col-md-4">
                <label class="form-label">Marca</label>
                <input type="text" id="marcaMedidor" name="marca" class="form-control">
              </div>
              <div class="col-md-4">
                <label class="form-label">Modelo</label>
                <input type="text" id="modeloMedidor" name="modelo" class="form-control">
              </div>
              <div class="col-md-4">
                <label class="form-label">Fecha Adquisición</label>
                <input type="date" id="fechaInstalacion" name="fecha_instalacion" class="form-control">
              </div>
            </div>

            <div class="mt-3">
              <label class="form-label">Estado</label>
              <select id="estadoMedidor" name="estado_medidor" class="form-select">
                <option value="Activo">Activo</option>
                <option value="Inactivo">Inactivo</option>
                <option value="Reparación">Reparación</option>
              </select>
            </div>

            <!-- Categoría de Tarifa -->
            <h6 class="fw-bold text-primary border-bottom pb-1 mt-4 mb-3">
              <i class="bi bi-cash-coin me-1"></i> Tarifa
            </h6>
            <div class="mb-3">
              <label class="form-label">Seleccione la Categorí­a</label>
              <select id="categoriaTarifaSelect" name="id_categoria_tarifa" class="form-select" required>
                <option value="">Seleccione...</option>
                @foreach($categoriasTarifa as $categoria)
                  <option value="{{ $categoria->id_categoria_tarifa }}">
                    {{ $categoria->nombre_categoria }} ({{ $categoria->rango_inicial }} - {{ $categoria->rango_final }})
                  </option>
                @endforeach
              </select>
            </div>

            <!-- Sección Terreno -->
            <h6 class="fw-bold text-primary border-bottom pb-1 mt-4 mb-3">
              <i class="bi bi-house-door me-1"></i> Direccion de Instalación
            </h6>

            <div class="row g-3">
              <div class="col-md-6">
                <label class="form-label">Barrio</label>
                <select id="sectorSelect" name="id_sector" class="form-select" required>
                  <option value="">Seleccione...</option>
                  @foreach($sectores as $sector)
                    <option value="{{ $sector->id_sector }}">{{ $sector->nombre_sector }}</option>
                  @endforeach
                </select>
              </div>

              <div class="col-md-6">
                <label class="form-label">Calle</label>
                <select id="viaSelect" name="id_via" class="form-select" required>
                  <option value="">Seleccione...</option>
                  <!-- Opciones se cargan dinámicamente al elegir sector -->
                </select>
              </div>
            </div>

            
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="submit" class="btn btn-success">
          <i class="bi bi-save me-1"></i> Guardar Conexión
        </button>
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          <i class="bi bi-x-circle me-1"></i> Cancelar
        </button>
      </div>
    </form>
  </div>
</div>



<div class="modal fade" id="modalImportarConexion" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">

            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-file-excel"></i> Importar Conexiones desde Excel
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <!-- INSTRUCCIONES -->
                <div class="alert alert-info">
                    <h6 class="fw-bold mb-2">📌 Instrucciones para llenar el Excel</h6>
                    <ul class="mb-0 small">
                        <li><b>documento_cliente</b>: Número de documento del cliente (debe existir).</li>
                        <li><b>via</b>: Nombre exacto de la vía registrada en el sistema.</li>
                        <li><b>categoria_tarifa</b>: Nombre exacto de la categoría (Doméstica, Comercial, etc.).</li>
                        <li><b>serie_medidor</b>: Número de serie del medidor (opcional).</li>
                        <li><b>fecha_instalacion</b>: Formato <code>YYYY-MM-DD</code>.</li>
                        <li><b>estado</b>: Activo, Suspendido o Cortado.</li>
                    </ul>
                </div>

                <!-- EJEMPLO -->
                <div class="table-responsive mb-3">
                    <table class="table table-bordered table-sm text-center">
                        <thead class="table-light">
                            <tr>
                                <th>documento_cliente</th>
                                <th>via</th>
                                <th>categoria_tarifa</th>
                                <th>serie_medidor</th>
                                <th>fecha_instalacion</th>
                                <th>estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>12345678</td>
                                <td>Av. Los Álamos</td>
                                <td>Doméstica</td>
                                <td>MED-001</td>
                                <td>2024-01-10</td>
                                <td>Activo</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- FORM -->
                <form id="formImportarConexion" enctype="multipart/form-data">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label fw-bold">📂 Seleccionar archivo Excel</label>
                        <input type="file" name="archivo" class="form-control" accept=".xlsx,.xls" required>
                    </div>
                </form>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                    Cancelar
                </button>
                <button type="button" class="btn btn-success btn-sm" id="btnImportarConexion">
                    <i class="fas fa-upload"></i> Importar
                </button>

            </div>

        </div>
    </div>
</div>







<!--end row-->


@endsection
@section('script')
<!-- jQuery y DataTables -->

<!-- jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<!-- tablas -->
<script>
    $(document).ready(function () {
        $("#tablaSectores").DataTable({
            "responsive": true,
            "lengthChange": true,
            "autoWidth": false,
            "buttons": [
                {
                    extend: 'collection',
                    text: 'Opciones',
                    buttons: [
                        { extend: 'copy', text: 'Copiar' },
                        { extend: 'csv', text: 'CSV' },
                        { extend: 'excel', text: 'Excel', title: 'Periodos Académicos' },
                        { extend: 'pdf', text: 'PDF' },
                        { extend: 'print', text: 'Imprimir' }
                    ]
                },
                { extend: 'colvis', text: 'Visibilidad de Columna' }
            ],
            "paging": true,
            "searching": true,
            "info": true,
            "language": {
                "search": "Buscar:",
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                "paginate": {
                    "first": "Primero",
                    "previous": "Anterior",
                    "next": "Siguiente",
                    "last": "Último"
                }
            }
        }).buttons().container().appendTo('#tablaSectores_wrapper .col-md-6:eq(0)');
    });
</script>
<!-- editar y eliminar -->
<script>
  $(document).ready(function () {

      // Cuando se cambia el sector, cargar vías del sector
      $('#edit_id_sector').change(function() {
          const sectorId = $(this).val();
          $('#edit_id_via').empty().append('<option value="">Seleccione una vía</option>');
          if(sectorId) {
              $.getJSON(`/sectores/${sectorId}/vias`, function(vias){
                  vias.forEach(v => {
                      $('#edit_id_via').append(
                          `<option value="${v.id_via}">${v.nombre_via}</option>`
                      );
                  });
              });
          }
      });

      // Abrir modal de edición y cargar datos
      $('.btn-editar').click(function () {
          const id = $(this).data('id');
          const idCliente = $(this).data('id_cliente');
          const idVia = $(this).data('id_via');
          const idSector = $(this).data('id_sector'); // 👈 sector directo
          const idMedidor = $(this).data('id_medidor');
          const idCategoriaTarifa = $(this).data('id_categoria_tarifa');
          const fecha = $(this).data('fecha');
          const estado = $(this).data('estado');

          // Valores básicos
          $('#edit_id').val(id);
          $('#edit_id_cliente').val(idCliente);
          $('#edit_id_medidor').val(idMedidor);
          $('#edit_fecha').val(fecha);
          $('#edit_estado').val(estado);
          $('#edit_id_categoria_tarifa').val(idCategoriaTarifa);

          if (idSector) {
              $('#edit_id_sector').val(idSector).trigger('change');

              // cargar las vías de ese sector y seleccionar la actual
              $.getJSON(`/sectores/${idSector}/vias`, function(vias){
                  $('#edit_id_via').empty().append('<option value="">Seleccione una vía</option>');
                  vias.forEach(v => {
                      $('#edit_id_via').append(
                          `<option value="${v.id_via}" ${v.id_via == idVia ? 'selected' : ''}>${v.nombre_via}</option>`
                      );
                  });
              });
          } else {
              $('#edit_id_sector').val('');
              $('#edit_id_via').empty().append('<option value="">Seleccione una vía</option>');
          }
      });


      // Actualizar conexión
      $('#formEditarConexion').submit(function (e) {
          e.preventDefault();
          let id = $('#edit_id').val();

          $.ajax({
              url: `/conexiones/${id}`,
              method: 'POST',
              data: $(this).serialize(),
              success: function () {
                  $('#modalEditarConexion').modal('hide');
                  Swal.fire({
                      icon: 'success',
                      title: 'Actualizado',
                      text: 'Conexión actualizada correctamente',
                      timer: 1800,
                      showConfirmButton: false
                  }).then(() => location.reload());
              },
              error: function (xhr) {
                  let errores = xhr.responseJSON?.errors;
                  let mensaje = 'Error al actualizar.';
                  if (errores) {
                      mensaje = Object.values(errores).map(e => `• ${e}`).join('<br>');
                  }
                  Swal.fire({ icon: 'error', title: 'Error', html: mensaje });
              }
          });
      });

      // Eliminar conexión
      $('.btn-eliminar').click(function () {
          let id = $(this).data('id');
          Swal.fire({
              title: '¿Eliminar?',
              text: "Esta acción no se puede deshacer",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonText: 'Sí, eliminar',
              cancelButtonText: 'Cancelar'
          }).then((result) => {
              if (result.isConfirmed) {
                  $.ajax({
                      url: `/conexiones/${id}`,
                      method: 'POST',
                      data: {
                          _token: $('meta[name="csrf-token"]').attr('content'),
                          _method: 'DELETE'
                      },
                      success: function () {
                          Swal.fire({
                              icon: 'success',
                              title: 'Eliminado',
                              timer: 1500,
                              showConfirmButton: false
                          }).then(() => location.reload());
                      },
                      error: function () {
                          Swal.fire('Error', 'No se pudo eliminar.', 'error');
                      }
                  });
              }
          });
      });

  });
</script>





<!-- buscar cliente y medidor -->
<script>
  $(document).ready(function(){

    // Cerrar listas al clicar fuera de ellas o de sus inputs
    $(document).on('click', function(e){
      if(!$(e.target).closest('#buscarCliente, #listaClientes').length){
        $('#listaClientes').hide();
      }
      if(!$(e.target).closest('#buscarMedidor, #listaMedidores').length){
        $('#listaMedidores').hide();
      }
    });

    // --- Búsqueda CLIENTE ---
    let clienteTimer;
    $('#buscarCliente').on('keyup', function(){
      clearTimeout(clienteTimer);
      let q = $(this).val().trim();
      clienteTimer = setTimeout(function(){
        if(q.length >= 2){
          $.get('/clientes/buscar', { q }, function(data){
            let html = '';
            if(Array.isArray(data) && data.length){
              data.forEach(c => {
                const nom = encodeURIComponent(c.nombres_razon_social ?? '');
                const dir = encodeURIComponent(c.direccion ?? '');
                const doc = encodeURIComponent(c.documento_identidad ?? '');
                const tel = encodeURIComponent(c.telefono ?? '');
                const email = encodeURIComponent(c.email ?? '');
                const tipo = encodeURIComponent(c.tipo_cliente ?? '');
                const estado = encodeURIComponent(c.estado ?? '');
                html += `<a href="#" class="list-group-item list-group-item-action"
                          onclick="seleccionarCliente(${c.id_cliente}, '${doc}', '${tipo}', '${nom}', '${dir}', '${tel}', '${email}', '${estado}')">
                          <i class="mdi mdi-account me-2"></i> ${c.documento_identidad} - ${c.nombres_razon_social}
                        </a>`;
              });
            } else {
              html = `<a href="#" class="list-group-item list-group-item-action text-primary"
                        onclick="nuevoCliente('${encodeURIComponent(q)}')">
                        <i class="mdi mdi-account-plus me-2"></i> Registrar nuevo cliente
                      </a>`;
            }
            $('#listaClientes').html(html).show();
          }).fail(function(){
            $('#listaClientes').hide();
          });
        } else {
          $('#listaClientes').hide();
        }
      }, 300);
    });

    // Seleccionar cliente existente
    window.seleccionarCliente = function(id, documento, tipo, nombre, direccion, telefono, email, estado){
      console.log('Cliente seleccionado:', id);
      $('#id_cliente').val(id);
      $('#documentoCliente').val(decodeURIComponent(documento)).prop('disabled', true);
      $('#tipoCliente').val(decodeURIComponent(tipo)).prop('disabled', true);
      $('#nombreCliente').val(decodeURIComponent(nombre)).prop('disabled', true);
      $('#direccionCliente').val(decodeURIComponent(direccion)).prop('disabled', true);
      $('#telefonoCliente').val(decodeURIComponent(telefono)).prop('disabled', true);
      $('#emailCliente').val(decodeURIComponent(email)).prop('disabled', true);
      $('#estadoCliente').val(decodeURIComponent(estado)).prop('disabled', true);
      $('#listaClientes').hide();
    };

    // Preparar formulario para nuevo cliente
    window.nuevoCliente = function(prefillDocumento){
      console.log('Nuevo cliente');
      $('#id_cliente').val('');
      if(prefillDocumento){
        $('#documentoCliente').val(decodeURIComponent(prefillDocumento));
      } else {
        $('#documentoCliente').val('');
      }
      $('#tipoCliente, #documentoCliente, #nombreCliente, #direccionCliente, #telefonoCliente, #emailCliente, #estadoCliente')
        .val('').prop('disabled', false);
      $('#estadoCliente').val('Activo');
      $('#listaClientes').hide();
    };

    // --- Búsqueda MEDIDOR ---
    let medidorTimer;
    $('#buscarMedidor').on('keyup', function(){
      clearTimeout(medidorTimer);
      let q = $(this).val().trim();
      medidorTimer = setTimeout(function(){
        if(q.length >= 2){
          $.get('/medidores/buscar', { q }, function(data){
            let html = '';
            if(Array.isArray(data) && data.length){
              data.forEach(m => {
                const serie = encodeURIComponent(m.numero_serie ?? '');
                const marca = encodeURIComponent(m.marca ?? '');
                const modelo = encodeURIComponent(m.modelo ?? '');
                const fecha = encodeURIComponent(m.fecha_instalacion ?? '');
                const estado = encodeURIComponent(m.estado ?? '');
                html += `<a href="#" class="list-group-item list-group-item-action"
                          onclick="seleccionarMedidor(${m.id_medidor}, '${serie}', '${marca}', '${modelo}', '${fecha}', '${estado}')">
                          <i class="mdi mdi-counter me-2"></i> ${m.numero_serie} - ${m.marca} ${m.modelo}
                        </a>`;
              });
            } else {
              html = `<a href="#" class="list-group-item list-group-item-action text-primary"
                        onclick="nuevoMedidor('${encodeURIComponent(q)}')">
                        <i class="mdi mdi-plus-box me-2"></i> Registrar nuevo medidor
                      </a>`;
            }
            $('#listaMedidores').html(html).show();
          }).fail(function(){
            $('#listaMedidores').hide();
          });
        } else {
          $('#listaMedidores').hide();
        }
      }, 300);
    });

    // Seleccionar medidor existente
    window.seleccionarMedidor = function(id, serie, marca, modelo, fecha_instal, estado){
      console.log('Medidor seleccionado:', id);
      $('#id_medidor').val(id);
      $('#numeroSerie').val(decodeURIComponent(serie)).prop('disabled', true);
      $('#marcaMedidor').val(decodeURIComponent(marca)).prop('disabled', true);
      $('#modeloMedidor').val(decodeURIComponent(modelo)).prop('disabled', true);
      if(decodeURIComponent(fecha_instal)){
        $('#fechaInstalacion').val(decodeURIComponent(fecha_instal)).prop('disabled', true);
      } else {
        $('#fechaInstalacion').val('').prop('disabled', true);
      }
      $('#estadoMedidor').val(decodeURIComponent(estado)).prop('disabled', true);
      $('#listaMedidores').hide();
    };

    // Preparar formulario para nuevo medidor
    window.nuevoMedidor = function(prefillSerie){
      console.log('Nuevo medidor');
      $('#id_medidor').val('');
      if(prefillSerie){
        $('#numeroSerie').val(decodeURIComponent(prefillSerie));
      } else {
        $('#numeroSerie').val('');
      }
      $('#marcaMedidor, #modeloMedidor, #fechaInstalacion, #estadoMedidor').val('').prop('disabled', false);
      $('#estadoMedidor').val('Activo');
      $('#listaMedidores').hide();
    };

  });

</script>
<!-- llenar select -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
      cargarSectores();

      // Sector → Vías
      document.getElementById("sectorSelect").addEventListener("change", function () {
          let idSector = this.value;
          if (idSector) {
              cargarVias(idSector);
          } else {
              resetSelect("viaSelect");
          }
      });
  });

  // Cargar sectores (JSON)
  function cargarSectores() {
      fetch("/sectores/listar") // Esta ruta debe devolver JSON con {id_sector, nombre_sector}
          .then(res => res.json())
          .then(data => {
              let select = document.getElementById("sectorSelect");
              select.innerHTML = '<option value="">Seleccione...</option>';
              data.forEach(sector => {
                  select.innerHTML += `<option value="${sector.id_sector}">${sector.nombre_sector}</option>`;
              });
          })
          .catch(err => console.error("Error cargando sectores:", err));
  }

  // Cargar vías por sector
  function cargarVias(idSector) {
      fetch(`/sectores/${idSector}/vias`) // Nueva ruta que devuelve JSON con {id_via, nombre_via}
          .then(res => res.json())
          .then(data => {
              let select = document.getElementById("viaSelect");
              select.disabled = false;
              select.innerHTML = '<option value="">Seleccione...</option>';
              data.forEach(via => {
                 select.innerHTML += `<option value="${via.id_via}">${via.nombre_via}</option>`;
              });
          })
          .catch(err => console.error("Error cargando vías:", err));
  }

  // Reset de select
  function resetSelect(id) {
      let select = document.getElementById(id);
      select.innerHTML = '<option value="">Seleccione...</option>';
      select.disabled = true;
  }
</script>



<!-- crear cliente y medidor -->

<script>
  $('#formConexion').on('submit', function(e){
    e.preventDefault();

    const formData = $(this).serializeArray();
    const data = {};
    formData.forEach(f => data[f.name] = f.value);

    console.log('Datos del formulario:', data);

    // 🔹 Crear cliente si no existe
    function crearClienteSiNoExiste() {
      console.log('crearClienteSiNoExiste - id_cliente:', data.id_cliente);
      if (data.id_cliente) {
        console.log('Cliente ya existe, no crear');
        return $.Deferred().resolve(data.id_cliente).promise();
      }

      console.log('Cliente no existe, se creará');
      return $.ajax({
        url: '/cliente',
        method: 'POST',
        data: {
          tipo_cliente: data.tipo_cliente,
          documento_identidad: data.documento_identidad,
          telefono: data.telefono,
          nombres_razon_social: data.nombres_razon_social,
          email: data.email,
          direccion: data.direccion,
          estado: data.estado,
          _token: $('input[name="_token"]').val(),
        }
      }).then(res => {
        let idCliente = res.id_cliente || (res.cliente ? res.cliente.id_cliente : null);
        console.log('Cliente creado con id:', idCliente);
        return idCliente;
      });
    }

    // 🔹 Crear medidor si no existe
    function crearMedidorSiNoExiste() {
      console.log('crearMedidorSiNoExiste - id_medidor:', data.id_medidor);

      if (data.id_medidor) {
        console.log('Medidor ya existe, no crear');
        return $.Deferred().resolve(data.id_medidor).promise();
      }

      // Solo crear si hay datos completos
      if (!data.numero_serie || !data.marca || !data.fecha_instalacion) {
        console.log('No hay datos completos para crear medidor, se omite creación');
        return $.Deferred().resolve(null).promise();
      }

      console.log('Medidor no existe, se creará');
      return $.ajax({
        url: '/medidor',
        method: 'POST',
        data: {
          numero_serie: data.numero_serie,
          marca: data.marca,
          modelo: data.modelo,
          fecha_instalacion: data.fecha_instalacion,
          estado: data.estado_medidor,
          _token: $('input[name="_token"]').val(),
        }
      }).then(res => {
        let idMedidor = res.id_medidor || (res.medidor ? res.medidor.id_medidor : null);
        console.log('Medidor creado con id:', idMedidor);
        return idMedidor;
      });
    }

    // 🔹 SweetAlert mientras guarda
    Swal.fire({
      title: 'Guardando conexión...',
      allowOutsideClick: false,
      didOpen: () => {
        Swal.showLoading();
      }
    });

    // 🔹 Flujo de creación
    crearClienteSiNoExiste()
      .then(idCliente => {
        data.id_cliente = idCliente;
        return crearMedidorSiNoExiste();
      })
      .then(idMedidor => {
        data.id_medidor = idMedidor;

        const payload = {
          id_cliente: data.id_cliente,
          id_via: data.id_via,
          id_categoria_tarifa: data.id_categoria_tarifa,
          _token: $('input[name="_token"]').val(),
        };

        if (data.id_medidor) {
          payload.id_medidor = data.id_medidor;
        }

        return $.ajax({
          url: '/conexiones',
          method: 'POST',
          data: payload
        });
      })
      .done(function(res) {
        Swal.fire({
          icon: 'success',
          title: 'Conexión guardada',
          text: 'ID: ' + res.id_conexion,
          timer: 2000,
          showConfirmButton: false
        });
        $('#modalConexion').modal('hide');
        $('#formConexion')[0].reset();
        $('#id_cliente, #id_medidor').val('');
        $('#categoriaTarifaSelect').val('').trigger('change');
        location.reload();
      })
      .fail(function(xhr){
        let mensaje = 'Error al guardar';
        if (xhr.status === 422 && xhr.responseJSON?.message) {
          mensaje = xhr.responseJSON.message;
        }
        Swal.fire({
          icon: 'error',
          title: 'Validación',
          text: mensaje
        });
      });

  });
</script>



<script>
document.getElementById('btnImportarConexion').addEventListener('click', function () {

    let form = document.getElementById('formImportarConexion');
    let formData = new FormData(form);

    if (!formData.get('archivo')) {
        Swal.fire('Atención', 'Seleccione un archivo Excel', 'warning');
        return;
    }

    Swal.fire({
        title: '¿Importar conexiones?',
        text: 'Se procesará el archivo Excel',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Sí, importar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {

        if (result.isConfirmed) {

            Swal.fire({
                title: 'Importando...',
                text: 'Por favor espere',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            fetch("{{ route('conexion.importar.excel') }}", {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {

                Swal.close();

                if (data.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Importación completada',
                        html: `
                            <b>Registros importados:</b> ${data.importados}<br>
                            <b>Errores:</b> ${data.errores}
                        `
                    }).then(() => location.reload());
                } else {
                    Swal.fire('Error', data.message, 'error');
                }

            })
            .catch(() => {
                Swal.close();
                Swal.fire('Error', 'Ocurrió un error en el servidor', 'error');
            });
        }
    });
});
</script>




@endsection