@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Deudas Acumuladas @endslot
@slot('title') Lecturas @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="#modalCrearDeuda">
                    <i class="fas fa-plus"></i>  Nueva Deuda
                </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="#modalImportarDeuda">
                    <i class="fas fa-file-excel"></i> Importar Deudas (Excel)
                </button>

                    



                    <div class="table-responsive">
                        <table id="tablaDeudas" class="table table-striped mb-0 table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>ID</th>
                                    <th>Conexión</th>
                                    <th>Cliente</th>
                                    <th>Dirección</th>
                                    <th>Monto</th>
                                    <th>Fecha corte</th>
                                    <th>Estado</th>
                                    <th>Observación</th>
                                    <th>Acciones</th>
                                </tr>
                            </thead>

                            <tbody>
                                @foreach($deudas as $deuda)
                                    <tr>
                                        <!-- ID -->
                                        <td>{{ $deuda->id_deuda }}</td>

                                        <!-- Conexión -->
                                        <td>
                                            <span class="badge bg-info">
                                                #{{ $deuda->conexion->id_conexion }}
                                            </span>
                                            <br>
                                            <small class="text-muted">
                                                {{ $deuda->conexion->estado }}
                                            </small>
                                        </td>

                                        <!-- Cliente -->
                                        <td>
                                            <span class="badge bg-secondary">
                                                {{ $deuda->conexion->cliente->nombres_razon_social ?? '—' }}
                                            </span>
                                            <br>
                                            <small class="text-muted">
                                                {{ $deuda->conexion->cliente->documento_identidad ?? '—' }}
                                            </small>
                                        </td>

                                        <!-- Dirección -->
                                        <td>
                                            {{ $deuda->conexion->via->nombre_via ?? '' }}
                                            {{ $deuda->conexion->via->via_numero ?? '' }}
                                        </td>

                                        <!-- Monto -->
                                        <td class="fw-bold text-end">
                                            S/ {{ number_format($deuda->monto_deuda, 2) }}
                                        </td>

                                        <!-- Fecha corte -->
                                        <td>
                                            {{ \Carbon\Carbon::parse($deuda->fecha_corte)->format('d/m/Y') }}
                                        </td>

                                        <!-- Estado -->
                                        <td>
                                            @if($deuda->estado === 'Vigente')
                                                <span class="badge bg-danger">Vigente</span>
                                            @else
                                                <span class="badge bg-success">Cancelada</span>
                                            @endif
                                        </td>

                                        <!-- Observación -->
                                        <td>
                                            {{ $deuda->observacion ?? '—' }}
                                        </td>

                                        <!-- Acciones -->
                                        <td>
                                            <button class="btn btn-sm btn-warning btnEditarDeuda"
                                                    data-id="{{ $deuda->id_deuda }}">
                                                <i class="fas fa-edit"></i>
                                            </button>

                                            @if($deuda->estado === 'Vigente')
                                                <button class="btn btn-sm btn-success btnCancelarDeuda"
                                                        data-id="{{ $deuda->id_deuda }}">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>



                        
                    </div>





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


<!-- Modal Registrar Deuda Inicial -->
<div class="modal fade" id="modalCrearDeuda" 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">
                <h5 class="modal-title">
                    <i class="fas fa-file-invoice-dollar"></i> Registrar Deuda Acumulada
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <!-- BUSCAR CLIENTE -->
                <div class="mb-3">
                    <label class="form-label fw-bold">Buscar cliente</label>
                    <div class="input-group">
                        <input type="text" id="buscarCliente"
                               class="form-control"
                               placeholder="DNI, RUC o nombre del cliente">
                        <button class="btn btn-secondary" id="btnBuscarCliente">
                            Buscar
                        </button>
                    </div>
                </div>

                <!-- SELECCIONAR CLIENTE -->
                <div class="mb-3 d-none" id="grupoCliente">
                    <label class="form-label fw-bold">Cliente</label>
                    <select id="clienteSelect" class="form-select">
                        <option value="">Seleccione cliente</option>
                    </select>
                </div>

                <!-- CONEXIONES -->
                <div class="mb-3 d-none" id="grupoConexion">
                    <label class="form-label fw-bold">Conexión</label>
                    <select id="conexionSelect" class="form-select">
                        <option value="">Seleccione conexión</option>
                    </select>
                </div>

                <hr>

                <!-- DATOS DEUDA -->
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Monto deuda (S/)</label>
                        <input type="number" step="0.01" min="0"
                               id="montoDeuda"
                               class="form-control"
                               placeholder="0.00">
                    </div>

                    <div class="col-md-6 mb-3">
                        <label class="form-label fw-bold">Fecha corte</label>
                        <input type="date"
                               id="fechaCorte"
                               class="form-control"
                               value="2025-10-31">
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-bold">Observación</label>
                    <textarea id="observacion"
                              class="form-control"
                              rows="2"
                              placeholder="Deuda acumulada hasta octubre 2025"></textarea>
                </div>

            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                    Cancelar
                </button>
                <button type="button" class="btn btn-primary" id="btnGuardarDeuda">
                    Guardar Deuda
                </button>
            </div>

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


<!--end row-->
<div class="modal fade" id="modalImportarDeuda" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">📥 Importación masiva de deuda inicial</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form id="formImportarDeuda" enctype="multipart/form-data">
                @csrf

                <div class="modal-body">

                    <div class="alert alert-info">
                        <b>Plantilla requerida:</b>
                        <ul class="mb-0">
                            <li><code>id_conexion</code></li>
                            <li><code>monto_deuda</code></li>
                            <li><code>fecha_corte</code></li>
                            <li><code>observacion</code> (opcional)</li>
                            <li><code>estado</code> (Vigente / Cancelada)</li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Archivo Excel</label>
                        <input type="file"
                            name="archivo"
                            class="form-control"
                            accept=".xlsx,.xls"
                            required>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button"
                        class="btn btn-secondary"
                        data-bs-dismiss="modal">
                        Cancelar
                    </button>

                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-upload"></i> Importar
                    </button>
                </div>
            </form>

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


@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 () {
        $("#tablaDeudas").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('#tablaDeudas_wrapper .col-md-6:eq(0)');
    });
</script>

<script>
$(document).ready(function () {

    let clienteSeleccionado = null;

    /* ===============================
       BUSCAR CLIENTE (DNI / NOMBRE)
    =============================== */
    $('#btnBuscarCliente').on('click', function () {

        let q = $('#buscarCliente').val().trim();

        if (!q) {
            Swal.fire('Atención', 'Ingrese DNI o nombre del cliente', 'warning');
            return;
        }

        $.ajax({
            url: "{{ route('clientes.buscar') }}",
            method: 'GET',
            data: { q },
            beforeSend() {
                $('#clienteSelect').html('<option>Cargando...</option>');
            },
            success: function (clientes) {

                $('#grupoCliente').addClass('d-none');
                $('#grupoConexion').addClass('d-none');
                $('#clienteSelect').empty();
                $('#conexionSelect').empty();

                if (clientes.length === 0) {
                    Swal.fire('Sin resultados', 'No se encontraron clientes', 'info');
                    return;
                }

                // SOLO UN CLIENTE
                if (clientes.length === 1) {
                    clienteSeleccionado = clientes[0].id_cliente;
                    cargarConexiones(clienteSeleccionado);
                }
                // VARIOS CLIENTES
                else {
                    $('#grupoCliente').removeClass('d-none');
                    $('#clienteSelect').append('<option value="">Seleccione cliente</option>');

                    clientes.forEach(c => {
                        $('#clienteSelect').append(`
                            <option value="${c.id_cliente}">
                                ${c.nombres_razon_social} - ${c.documento_identidad}
                            </option>
                        `);
                    });
                }
            },
            error() {
                Swal.fire('Error', 'No se pudo buscar el cliente', 'error');
            }
        });
    });

    /* ===============================
       SELECCIONAR CLIENTE
    =============================== */
    $('#clienteSelect').on('change', function () {
        clienteSeleccionado = $(this).val();
        if (clienteSeleccionado) {
            cargarConexiones(clienteSeleccionado);
        }
    });

    /* ===============================
       CARGAR CONEXIONES
    =============================== */
    function cargarConexiones(idCliente) {

        $.ajax({
            url: `/clientes/${idCliente}/conexiones`,
            method: 'GET',
            success: function (conexiones) {

                $('#grupoConexion').removeClass('d-none');
                $('#conexionSelect').html('<option value="">Seleccione conexión</option>');

                conexiones.forEach(c => {
                    $('#conexionSelect').append(`
                        <option value="${c.id_conexion}">
                            #${c.id_conexion} - ${c.nombre_via ?? ''} ${c.numero_calle ?? ''} (${c.estado})
                        </option>
                    `);
                });

            },
            error() {
                Swal.fire('Error', 'No se pudieron cargar las conexiones', 'error');
            }
        });
    }

    /* ===============================
       GUARDAR DEUDA
    =============================== */
    $('#btnGuardarDeuda').on('click', function () {

        let data = {
            id_conexion: $('#conexionSelect').val(),
            monto_deuda: $('#montoDeuda').val(),
            fecha_corte: $('#fechaCorte').val(),
            observacion: $('#observacion').val(),
            _token: "{{ csrf_token() }}"
        };

        if (!data.id_conexion || !data.monto_deuda || data.monto_deuda <= 0) {
            Swal.fire('Atención', 'Complete los datos obligatorios', 'warning');
            return;
        }

        $.ajax({
            url: "{{ url('deuda-inicial') }}",
            method: 'POST',
            data: data,
            beforeSend() {
                $('#btnGuardarDeuda').prop('disabled', true).text('Guardando...');
            },
            success: function () {
                Swal.fire('Correcto', 'Deuda registrada correctamente', 'success')
                    .then(() => location.reload());
            },
            error: function (xhr) {
                let msg = 'Error al guardar la deuda';
                if (xhr.responseJSON?.message) {
                    msg = xhr.responseJSON.message;
                }
                Swal.fire('Error', msg, 'error');
            },
            complete() {
                $('#btnGuardarDeuda').prop('disabled', false).text('Guardar Deuda');
            }
        });
    });

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

    let formData = new FormData(this);

    Swal.fire({
        title: 'Importando deudas...',
        text: 'Espere un momento',
        allowOutsideClick: false,
        didOpen: () => Swal.showLoading()
    });

    $.ajax({
        url: "{{ route('deuda.importarExcel') }}",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,

        success: function(resp) {
            Swal.fire({
                icon: 'success',
                title: 'Importación completada',
                html: `
                    <p><b>Importados:</b> ${resp.importados}</p>
                    <p><b>Errores:</b> ${resp.errores}</p>
                `,
                confirmButtonText: 'Aceptar'
            }).then(() => location.reload());

            $('#modalImportarDeuda').modal('hide');
        },

        error: function(xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: xhr.responseJSON?.message ?? 'Error en la importación'
            });
            console.error(xhr.responseText);
        }
    });
});
</script>


@endsection