@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Facturación @endslot
@slot('title') Cronogramas de Facturación @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="#modalCrear">
                    <i class="fas fa-plus"></i>  Nuevo Cronogramas de Facturación
                </button>

                <div class="row mb-3">
                      
                      <div class="col-md-2">
                          <select id="filtroAnio" class="form-control">
                              <option value="">-- Todos los años --</option>
                              @for($y = now()->year; $y >= 2020; $y--)
                                  <option value="{{ $y }}">{{ $y }}</option>
                              @endfor
                          </select>
                      </div>
                      <div class="col-md-2">
                          <select id="filtroMes" class="form-control">
                              <option value="">-- Todos los meses --</option>
                              @for($m = 1; $m <= 12; $m++)
                                  <option value="{{ $m }}">{{ \Carbon\Carbon::create()->month($m)->locale('es')->monthName }}</option>
                              @endfor
                          </select>
                      </div>
                      <div class="col-md-2">
                          <button id="btnFiltrar" class="btn btn-primary">Filtrar</button>
                          <button id="btnReset" class="btn btn-secondary">Limpiar</button>
                      </div>
                     
                  </div>
                <div class="table-responsive">
                  

                    <table id="tablaSectores" class="table table-striped mb-0 table-hover">
                      <thead class="table-light">
                          <tr>
                              <th>Nombre</th>
                              <th>Barrio</th>
                              <th>Periodicidad</th>
                              <th>Año</th>
                              <th>Mes</th>
                              <th>Inicio Lectura</th>
                              <th>Fin Lectura</th>
                              <th>Procesamiento</th>
                              <th>Emisión</th>
                              <th>Inicio Cobro</th>
                              <th>Fin Cobro</th>
                              <th>Envío Recibos</th>
                              <th>Corte Servicio</th>
                              <th>Estado</th>
                              <th>Acciones</th>
                          </tr>
                      </thead>
                      <tbody>
                          @foreach ($cronogramas as $c)
                              <tr>
                                  <td>{{ $c->nombre_cronograma }}</td>
                                  <td>{{ $c->sector->nombre_sector ?? 'General' }}</td>
                                  <td>{{ $c->periodicidad }}</td>
                                  <td>{{ $c->anio }}</td>
                                  <td>{{ \Carbon\Carbon::create()->month($c->mes)->locale('es')->isoFormat('MMMM') }}</td>
                                  <td>{{ $c->fecha_inicio_lectura }}</td>
                                  <td>{{ $c->fecha_fin_lectura }}</td>
                                  <td>{{ $c->fecha_procesamiento }}</td>
                                  <td>{{ $c->fecha_emision }}</td>
                                  <td>{{ $c->fecha_inicio_cobro }}</td>
                                  <td>{{ $c->fecha_fin_cobro }}</td>
                                  <td>{{ $c->fecha_envio_recibos ?? '-' }}</td>
                                  <td>{{ $c->fecha_corte_servicio ?? '-' }}</td>
                                  <td>{{ $c->estado }}</td>
                                  <td>
                                      <button class="btn btn-sm text-warning btn-editar"
                                          data-id="{{ $c->id_cronograma }}"
                                          data-nombre="{{ $c->nombre_cronograma }}"
                                          data-sector="{{ $c->id_sector }}"
                                          data-periodicidad="{{ $c->periodicidad }}"
                                          data-anio="{{ $c->anio }}"
                                          data-mes="{{ $c->mes }}"
                                          data-iniciolectura="{{ $c->fecha_inicio_lectura }}"
                                          data-finlectura="{{ $c->fecha_fin_lectura }}"
                                          data-procesamiento="{{ $c->fecha_procesamiento }}"
                                          data-emision="{{ $c->fecha_emision }}"
                                          data-iniciocobro="{{ $c->fecha_inicio_cobro }}"
                                          data-fincobro="{{ $c->fecha_fin_cobro }}"
                                          data-envio="{{ $c->fecha_envio_recibos }}"
                                          data-corte="{{ $c->fecha_corte_servicio }}"
                                          data-estado="{{ $c->estado }}"
                                          data-bs-toggle="modal" data-bs-target="#modalEditar"
                                          title="Editar cronograma">
                                          <i class="las la-pen font-18"></i>
                                      </button>
                                      <button class="btn btn-sm text-danger btn-eliminar"
                                          data-id="{{ $c->id_cronograma }}"
                                          title="Eliminar cronograma">
                                          <i class="las la-trash-alt font-18"></i>
                                      </button>
                                  </td>

                              </tr>
                          @endforeach
                      </tbody>
                  </table>





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

<!-- Modal Crear -->
<div class="modal fade" id="modalCrear" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <form id="formCrear" class="modal-content">
      @csrf
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title"><i class="bi bi-calendar2-check-fill"></i> Nuevo Cronograma de Facturación</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">

        <!-- Sección 1: Información general -->
        <section class="p-3 mb-4 rounded" style="background-color:#e9f2ff;">
          <h6 class="mb-3"><i class="bi bi-info-circle-fill text-primary"></i> Información general</h6>
          <div class="row g-3">
            <div class="col-md-4">
              <label class="form-label">Nombre del Cronograma</label>
              <input type="text" name="nombre_cronograma" class="form-control" required>
            </div>
            <div class="col-md-4">
              <label class="form-label">Año</label>
              <select name="anio" class="form-select" required>
                <option value="">-- Seleccione año --</option>
                @php
                    $anioActual = \Carbon\Carbon::now()->year;
                @endphp
                @for ($a = $anioActual; $a <= $anioActual + 3; $a++)
                  <option value="{{ $a }}">{{ $a }}</option>
                @endfor
              </select>
            </div>

            @php
                use Carbon\Carbon;
            @endphp
            <div class="col-md-4">
              <label class="form-label">Mes</label>
              <select name="mes" class="form-select" required>
                <option value="">-- Seleccione mes --</option>
                @for ($m = 1; $m <= 12; $m++)
                  @php
                    $mesNombre = Carbon::create()->month($m)->locale('es')->isoFormat('MMMM');
                  @endphp
                  <option value="{{ $m }}">{{ ucfirst($mesNombre) }}</option>
                @endfor
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label">Periodicidad</label>
              <select name="periodicidad" class="form-select" required>
                <option value="Mensual">Mensual</option>
                <option value="Bimestral">Bimestral</option>
                <option value="Trimestral">Trimestral</option>
              </select>
            </div>

            <div class="col-md-4">
              <label class="form-label">Barrio</label>
              <select name="id_sector" class="form-select">
                <option value="">-- Todos --</option>
                @foreach($sectores as $sector)
                  <option value="{{ $sector->id_sector }}">{{ $sector->nombre_sector }}</option>
                @endforeach
              </select>
            </div>
          </div>
        </section>

        <!-- Sección 2: Periodo de Lecturas -->
        <section class="p-3 mb-4 rounded" style="background-color:#fff4e5;">
          <h6 class="mb-3"><i class="bi bi-eye-fill text-warning"></i> Periodo de Lecturas</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Fecha Inicio Lecturas</label>
              <input type="date" name="fecha_inicio_lectura" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Fecha Fin Lecturas</label>
              <input type="date" name="fecha_fin_lectura" class="form-control" required>
            </div>
          </div>
        </section>

        <!-- Sección 3: Procesamiento y emisión -->
        <section class="p-3 mb-4 rounded" style="background-color:#d1e7dd;">
          <h6 class="mb-3"><i class="bi bi-gear-fill text-success"></i> Procesamiento y emisión</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Fecha Procesamiento (generación facturas)</label>
              <input type="date" name="fecha_procesamiento" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Fecha Emisión (emisión recibos)</label>
              <input type="date" name="fecha_emision" class="form-control" required>
            </div>
          </div>
        </section>

        <!-- Sección 4: Periodo de Cobro -->
        <section class="p-3 mb-4 rounded" style="background-color:#e5f7e5;">
          <h6 class="mb-3"><i class="bi bi-cash-stack text-success"></i> Periodo de Cobro</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Fecha Inicio Cobro</label>
              <input type="date" name="fecha_inicio_cobro" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Fecha Fin Cobro</label>
              <input type="date" name="fecha_fin_cobro" class="form-control" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Fecha Envío Recibos</label>
              <input type="date" name="fecha_envio_recibos" class="form-control" required>
            </div>
          </div>
        </section>

        <!-- Sección 5: Otros detalles -->
        <section class="p-3 rounded" style="background-color:#f8d7da;">
          <h6 class="mb-3"><i class="bi bi-exclamation-triangle-fill text-danger"></i> Otros detalles</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Fecha Corte Servicio (opcional)</label>
              <input type="date" name="fecha_corte_servicio" class="form-control">
            </div>
            <div class="col-md-6">
              <label class="form-label">Estado</label>
              <select name="estado" class="form-select" required>
                <option value="Activo">Activo</option>
                <option value="Inactivo">Inactivo</option>
              </select>
            </div>
          </div>
        </section>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="submit"><i class="bi bi-save"></i> Guardar</button>
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal"><i class="bi bi-x-circle"></i> Cancelar</button>
      </div>
    </form>
  </div>
</div>






<!-- Modal Editar -->
<div class="modal fade" id="modalEditar" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <form id="formEditar" class="modal-content">
      @csrf
      @method('PUT')
      <input type="hidden" id="edit_id" name="id_cronograma">
      <div class="modal-header bg-warning text-dark">
        <h5 class="modal-title">Editar Cronograma de Facturación</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3">
          <div class="col-md-6">
            <label class="form-label">Nombre</label>
            <input type="text" name="nombre_cronograma" id="edit_nombre" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label class="form-label">Periodicidad</label>
            <select name="periodicidad" id="edit_periodicidad" class="form-select" required>
              <option value="Mensual">Mensual</option>
              <option value="Bimestral">Bimestral</option>
              <option value="Trimestral">Trimestral</option>
            </select>
          </div>

          <div class="col-md-4">
            <label class="form-label">Año</label>
            <input type="number" name="anio" id="edit_anio" class="form-control" min="2000" max="2100" required>
          </div>
          <div class="col-md-4">
            <label class="form-label">Mes</label>
            <select name="mes" id="edit_mes" class="form-select" required>
              <option value="">-- Seleccione mes --</option>
              @for ($m = 1; $m <= 12; $m++)
                <option value="{{ $m }}">{{ \Carbon\Carbon::create()->month($m)->locale('es')->isoFormat('MMMM') }}</option>
              @endfor
            </select>
          </div>
          <div class="col-md-4">
            <label class="form-label">Barrio</label>
            <select name="id_sector" id="edit_sector" class="form-select">
              <option value="">-- Todos --</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">Fecha Inicio Lectura</label>
            <input type="date" name="fecha_inicio_lectura" id="edit_inicio_lectura" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label class="form-label">Fecha Fin Lectura</label>
            <input type="date" name="fecha_fin_lectura" id="edit_fin_lectura" class="form-control" required>
          </div>

          <div class="col-md-6">
            <label class="form-label">Fecha Procesamiento</label>
            <input type="date" name="fecha_procesamiento" id="edit_fecha_procesamiento" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label class="form-label">Fecha Emisión</label>
            <input type="date" name="fecha_emision" id="edit_fecha_emision" class="form-control" required>
          </div>

          <div class="col-md-6">
            <label class="form-label">Fecha Inicio Cobro</label>
            <input type="date" name="fecha_inicio_cobro" id="edit_inicio_cobro" class="form-control" required>
          </div>
          <div class="col-md-6">
            <label class="form-label">Fecha Fin Cobro</label>
            <input type="date" name="fecha_fin_cobro" id="edit_fin_cobro" class="form-control" required>
          </div>

          <div class="col-md-6">
            <label class="form-label">Fecha Corte Servicio</label>
            <input type="date" name="fecha_corte_servicio" id="edit_fecha_corte_servicio" class="form-control">
          </div>

          <div class="col-md-6">
            <label class="form-label">Estado</label>
            <select name="estado" id="edit_estado" class="form-select" required>
              <option value="Activo">Activo</option>
              <option value="Inactivo">Inactivo</option>
            </select>
          </div>
        </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>






<!--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>
<!-- agregar -->
<script>
  $(document).ready(function () {
      // Crear
      $('#formCrear').submit(function (e) {
          e.preventDefault();
          $.post("{{ route('cronogramas.store') }}", $(this).serialize())
              .done(() => {
                  $('#modalCrear').modal('hide');
                  Swal.fire('Creado', 'Cronograma registrado', 'success').then(() => location.reload());
              })
              .fail(xhr => {
                  let errores = xhr.responseJSON.errors;
                  let msg = Object.values(errores).map(e => `• ${e}`).join('<br>');
                  Swal.fire('Error', msg, 'error');
              });
      });

      // Cargar datos para editar
      $(document).on('click', '.btn-editar', function () {
          $('#edit_id').val($(this).data('id'));
          $('#edit_nombre').val($(this).data('nombre'));
          $('#edit_periodicidad').val($(this).data('periodicidad'));
          $('#edit_anio').val($(this).data('anio'));
          $('#edit_mes').val($(this).data('mes'));
          $('#edit_sector').val($(this).data('sector'));
          $('#edit_inicio_lectura').val($(this).data('iniciolectura'));
          $('#edit_fin_lectura').val($(this).data('finlectura'));
          $('#edit_fecha_procesamiento').val($(this).data('procesamiento'));
          $('#edit_fecha_emision').val($(this).data('emision'));
          $('#edit_inicio_cobro').val($(this).data('iniciocobro'));
          $('#edit_fin_cobro').val($(this).data('fincobro'));
          $('#edit_fecha_corte_servicio').val($(this).data('corte'));
          $('#edit_estado').val($(this).data('estado'));
      });

      // Editar
      $('#formEditar').submit(function (e) {
          e.preventDefault();
          let id = $('#edit_id').val();
          $.ajax({
              url: `/cronogramas/${id}`,
              method: 'PUT', // Usamos PUT para update
              data: $(this).serialize(),
              success: () => {
                  $('#modalEditar').modal('hide');
                  Swal.fire('Actualizado', 'Cronograma actualizado', 'success').then(() => location.reload());
              },
              error: function (xhr) {
                  let errores = xhr.responseJSON.errors;
                  let msg = Object.values(errores).map(e => `• ${e}`).join('<br>');
                  Swal.fire('Error', msg, 'error');
              }
          });
      });

      // Eliminar
      $(document).on('click', '.btn-eliminar', 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'
          }).then(result => {
              if (result.isConfirmed) {
                  $.ajax({
                      url: `/cronogramas/${id}`,
                      method: 'DELETE',
                      data: {
                          _token: '{{ csrf_token() }}',
                      },
                      success: () => Swal.fire('Eliminado', '', 'success').then(() => location.reload()),
                      error: () => Swal.fire('Error', 'No se pudo eliminar', 'error')
                  });
              }
          });
      });
  });
</script>


<script>
document.addEventListener("DOMContentLoaded", function () {

    // Filtrar
    document.getElementById('btnFiltrar').addEventListener('click', function () {
        let sector = document.getElementById('filtroSector').value || "";
        let anio   = document.getElementById('filtroAnio').value || "";
        let mes    = document.getElementById('filtroMes').value || "";

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

        // Construir URL de manera segura
        let url = `{{ route('cronogramas.filtrar') }}?sector=${encodeURIComponent(sector)}&anio=${encodeURIComponent(anio)}&mes=${encodeURIComponent(mes)}`;

        fetch(url)
            .then(res => {
                if (!res.ok) throw new Error("Error en la respuesta del servidor");
                return res.json();
            })
            .then(res => {
                Swal.close();
                let tbody = document.querySelector("#tablaSectores tbody");
                tbody.innerHTML = "";

                if (!res.data || res.data.length === 0) {
                    tbody.innerHTML = `<tr><td colspan="15" class="text-center">No se encontraron cronogramas</td></tr>`;
                    return;
                }

                res.data.forEach(c => {
                    tbody.innerHTML += `
                        <tr>
                            <td>${c.nombre_cronograma ?? '-'}</td>
                            <td>${c.sector ? c.sector.nombre_sector : 'General'}</td>
                            <td>${c.periodicidad ?? '-'}</td>
                            <td>${c.anio ?? '-'}</td>
                            <td>${c.mes ? new Date(c.anio, c.mes - 1).toLocaleString('es-ES', { month: 'long' }) : '-'}</td>
                            <td>${c.fecha_inicio_lectura ?? '-'}</td>
                            <td>${c.fecha_fin_lectura ?? '-'}</td>
                            <td>${c.fecha_procesamiento ?? '-'}</td>
                            <td>${c.fecha_emision ?? '-'}</td>
                            <td>${c.fecha_inicio_cobro ?? '-'}</td>
                            <td>${c.fecha_fin_cobro ?? '-'}</td>
                            <td>${c.fecha_envio_recibos ?? '-'}</td>
                            <td>${c.fecha_corte_servicio ?? '-'}</td>
                            <td>${c.estado ?? '-'}</td>
                            
                        </tr>
                    `;
                });
            })
            .catch(err => {
                Swal.close();
                Swal.fire("Error", "No se pudo filtrar los cronogramas. " + err.message, "error");
            });
    });

    // Resetear
    document.getElementById('btnReset').addEventListener('click', function () {
        document.getElementById('filtroSector').value = "";
        document.getElementById('filtroAnio').value = "";
        document.getElementById('filtroMes').value = "";
        document.getElementById('btnFiltrar').click();
    });

});
</script>






@endsection