@extends('layout.template')
@section('title', 'SICCAP ICATEP | Consulta Incidencia')
@section('content')
<div class="content-body">
    <div class="container-fluid">
        <div class="row">
            <div class="col-14">
                <div class="card">
                    <div class="card-header" style="background-color: #dcddf2;">
                        <form method="GET" action="{{ route('facturas.reporte.horas') }}">
                            <button type="submit" class="btn btn-primary w-md float-end">Regresar</button>
                        </form>
                        <p class='card-title-desc'></p>
                        <div class="row">
                            <div class="col-12">
                                <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                                    @puede('Reporte de Horas y facturas','entrar_modulo_reporte_horas_facturas')
                                        <h4 class="mb-sm-0 font-size-18">No Validar Factura</h4>
                                    @elsepuede
                                        <h4 class="mb-sm-0 font-size-18" style="color: rgb(81, 86, 190);">Reportar Incidencia</h4>
                                    @endpuede
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body p-2" style="padding-top: 0 !important;top: 0 !important;">
            <!-- Datos Aula similar a asignar_presupuesto -->
            @csrf

            {{-- Variables locales para valores de fallback --}}
            @php
                $tipoFormacionValue = $tipoFormacion ?? $aula->aul_tipo_formacion ?? '';
                $costoPscRaw = $mo_ingreso_psc ?? $aula->aul_costo_hora_psc ?? null;
                $costoPscValue = is_null($costoPscRaw) ? '' : number_format($costoPscRaw, 2);
            @endphp

            <div class="row text-center" id="formulario_aula">
                <!-- DEBUG visible valores de costos -->
                <div class="col-12 mb-2">
                    <small id="debug_costos" class="text-muted"></small>
                </div>
                <div class="accordion accordion-with-icon accordion-primary collapsed" id="accordion-six">
                    <div class="accordion-item">
                        <h2 class="accordion-header accordion-header-primary" id="headingOne6">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne6">
                                <span class="la la-book-open fs-3"></span>
                                <span class="accordion-header-text">Datos Aula</span>
                            </button>
                        </h2>
                        <div id="collapseOne6" class="accordion-collapse collapse show" aria-labelledby="headingOne6" data-bs-parent="#accordion-six">
                            <div class="accordion-body row">

                                <div class="col-lg-2 mb-3 col-md-6">
                                    <label class="form-label">Numero de Aula</label>
                                    <input type="text" name="numero_aula" class="form-control" value="{{ $aula->aul_clave_registro }}" id="numero_aula" readonly>
                                </div>

                                <div class="col-lg-6 mb-3 col-md-6">
                                    <label class="form-label">Nombre del Curso</label>
                                    <input type="text" name="nombre_curso" class="form-control" value="{{ $aula->aul_curso_nombre }}" id="nombre_curso" readonly>
                                </div>

                                <div class="col-lg-2 mb-3 col-md-6">
                                    <label class="form-label">Tipo de Curso</label>
                                    <input type="text" name="tipo_curso_nombre" class="form-control" value="{{ $tipoCursoTexto ?? (isset($aula->aul_curso_tipo) ? $aula->aul_curso_tipo : '') }}" id="tipo_de_curso" readonly>
                                </div>

                                <div class="col-lg-2 mb-3 col-md-6 text-end">
                                    <label class="form-label">Costo por Capacitando</label>
                                    <input type="text" name="costo_alumno" class="form-control" value="{{ isset($aula->aul_costo_hora_capacitando) ? number_format($aula->aul_costo_hora_capacitando,2) : (isset($mo_ingreso_psc) ? number_format($mo_ingreso_psc,2) : '') }}" id="costo_alumno" readonly>
                                </div>

                                <div class="col-lg-4 mb-3 col-md-6">
                                    <label class="form-label">Campo de Formaci&oacute;n Profesional</label>
                                    <input type="text" name="cfp" class="form-control" value="{{ $aula->aul_cfp_nombre ?? '' }}" id="cfp" readonly>
                                </div>

                                <div class="col-lg-4 mb-3 col-md-6">
                                    <label class="form-label">Especialidad</label>
                                    <input type="text" name="especialidad" class="form-control" value="{{ $aula->aul_especialidad_nombre ?? '' }}" id="especialidad" readonly>
                                </div>

                                <div class="col-lg-3 mb-3 col-md-6">
                                    <label class="form-label">Instructor</label>
                                    <input type="text" name="instructor" class="form-control" value="{{ $aula->aul_instructor_nombre ?? '' }}" id="nombre_instructor" readonly>
                                </div>

                                <div class="col-lg-1 mb-3 col-md-6">
                                    <label class="form-label">Costo PSC</label>
                                    <input type="text" name="costo_psc" class="form-control" value="{{ $aula->aul_costo_hora_psc }}" id="costo_psc" readonly>
                                </div>

                                <div class="col-lg-2 mb-3 col-md-6">
                                    <label class="form-label">N&uacute;mero de Capacitandos</label>
                                    <input type="number" name="minimo_capacitandos" class="form-control" value="{{ $aula->aul_capacitandos ?? '' }}" id="minimo_capacitandos" readonly>
                                </div>

                                <div class="col-lg-2 mb-3 col-md-6">
                                    <label class="form-label">Duraci&oacute;n</label>
                                    <input type="text" name="duracion" class="form-control" value="{{ $aula->aul_horas_totales ?? '' }}" id="duracion" readonly>
                                </div>

                                

                                <div class="col-lg-2 mb-3 col-md-6">
                                    <label class="form-label">Modalidad</label>
                                    <input type="text" class="form-control" name="modalidad" value="{{ $aula->aul_modalidad ?? '' }}" id="modalidad" readonly>
                                </div>

                                <div class="col-lg-6 mb-3 col-md-6" id="div_ubicacion">
                                    <label class="form-label">Ubicaci&oacute;n</label>
                                    <input type="text" name="ubicacion" class="form-control" value="{{ $aula->aul_ubicacion ?? '' }}" readonly>
                                </div>

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

            <!-- Tabla similar a asignar_presupuesto (mismo estilo y DataTable) -->
            @if(empty($mesesData) || count($mesesData) == 0)
                <div class="alert alert-warning">No hay datos disponibles para el aula seleccionada.</div>
            @endif
            <div id="responsiveTable_wrapper" class="dataTables_wrapper no-footer">
                <table id="responsiveTable" class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed presupuestos-table">
                    <thead>
                        <tr class="bg-primary text-center">
                            <th width="1%" style="color: azure !important;">ACCIONES</th>
                            <th width="5%" style="color: azure !important;">ESTATUS HORAS</th>
                            <th width="5%" style="color: azure !important;">FACTURA</th>
                            <th width="5%" style="color: azure !important;">PAGO</th>
                            <th width="5%" style="color: azure !important;"># PARCIALIDAD</th>
                            <th width="3%" style="color: azure !important;">MES</th>
                            <th width="2%" style="color: azure !important;">HRS.</th>
                            <th width="7%" style="color: azure !important;">INASISTENCIAS</th>
                            <th width="10%" style="color: azure !important;">MONTO A PAGAR</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($mesesData as $mes)
                            @php
                                $factura = $mes['factura'];
                                $facturaAnterior = $mes['factura_anterior'];
                                $facturaNoValidada = $mes['factura_no_validada'];
                                
                                $estatus = $factura ? $factura->fac_estatus_reporte_horas : 0;
                                $estatusFactura = $factura ? $factura->fac_estatus : null;
                                $incidencias = $factura ? $factura->fac_inasistencias_instructor : 0;
                                $subtotal = $factura ? $factura->fac_subtotal : 0;
                                $idFactura = $factura ? $factura->fac_id : 0;
                                $tieneComprobante = $factura ? $factura->fac_comprobante_pago : 0;
                                
                                // Determinar si se puede reportar
                                $disabled = '';
                                $class = 'btn btn-success btn-sm';
                                
                                if ($estatus == 3) {
                                    $disabled = 'disabled';
                                    $class = 'btn btn-secondary btn-sm';
                                } elseif ($facturaAnterior && $facturaAnterior->fac_estatus != 3 && $mes['mes_num'] > 1) {
                                    $disabled = 'disabled';
                                    $class = 'btn btn-secondary btn-sm';
                                } elseif ($facturaAnterior && $facturaAnterior->fac_estatus == 3 && $estatus != 3) {
                                    $disabled = '';
                                    $class = 'btn btn-success btn-sm';
                                } elseif (!$facturaAnterior && $mes['mes_num'] > 1) {
                                    $disabled = 'disabled';
                                    $class = 'btn btn-secondary btn-sm';
                                } else {
                                    // Default case for enabled button (e.g. first month)
                                    $disabled = '';
                                    $class = 'btn btn-success btn-sm';
                                }
                                
                                $disabledFactura = '';
                                if ($estatusFactura == 1 || $estatusFactura == 3) {
                                    $disabledFactura = 'disabled';
                                }
                                
                                // Calcular monto a pagar: si ya hay incidencias se usa subtotal de la factura,
                                // en otro caso se calcula multiplicando horas * costo por hora (PSC).
                                $costoPorHora = (float)($aula->aul_costo_hora_psc ?? 0);
                                if ($incidencias > 0) {
                                    $montoAPagar = $subtotal;
                                } else {
                                    $montoAPagar = ($mes['horas'] ?? 0) * $costoPorHora;
                                }
                                $montoFormateado = '$ ' . number_format($montoAPagar, 2, '.', ',');
                                
                                $yearShort = substr($yearCorresponde, -2);
                                $mesFormateado = str_pad($mes['mes_num'], 2, '0', STR_PAD_LEFT) . '/' . $yearShort;
                            @endphp
                            <tr class="table-info text-center">
                                <td class="d-flex">
                                    @puede('Reporte de Horas y facturas','puede_no_validar')
                                        @php
                                            $btnClass = $facturaNoValidada ? 'btn btn-success btn-sm' : 'btn btn-danger btn-sm';
                                            $btnName = $facturaNoValidada ? 'Validar' : 'No Validar';
                                            $icon = $facturaNoValidada ? 'bx bxs-lock font-size-17 align-middle' : 'bx bxs-lock-open font-size-17 align-middle';
                                            $disabledValidar = ($estatusFactura == 3 && $facturaNoValidada) ? 'disabled' : '';
                                        @endphp
                                        <form action="" method="POST" style="text-align: center; display:inline-block;">
                                            @csrf
                                            <button type="submit" name="no_validar" class="{{ $btnClass }}" {{ $disabledValidar }}><i class="{{ $icon }}"></i> {{ $btnName }}</button>
                                            <input type="hidden" name="au_unidad" value="{{ $aula->aul_unidad }}">
                                            <input type="hidden" value="{{ $aula->aul_id }}" name="au_id">
                                            <input type="hidden" value="{{ $mes['fecha_corresponde'] }}" name="fecha_corresponde">
                                            <input type="hidden" value="{{ $mes['horas'] ?? 0 }}" name="horas">
                                            <input type="hidden" value="{{ $mes['parcialidad'] }}" name="parcialidad">
                                            <input type="hidden" value="{{ $costoPorHora }}" name="costo_por_hora">
                                            <input type="hidden" name="filtro_unidad" value="{{ $filtro_unidad }}">
                                        </form>
                                        &nbsp;
                                    @endpuede

                                    {{-- Botón Ver (muestra modal con datos de la factura) --}}
                                    @if(!empty($factura))
                                        <button type="button" class="btn btn-info btn-sm me-1" data-bs-toggle="modal" data-bs-target="#verFactura{{ $mes['mes_abrev'] }}">
                                            <i class="bx bx-show"></i> Ver
                                        </button>
                                    @endif

                                    {{-- Botón Subir Factura (similar al PHP original) --}}
                                    @puede('Reporte de Horas y facturas','puede_subir_facturas')
                                        <form method="post" action="{{ route('showValidador') }}" style="display:inline-block; margin-right:6px;">
                                            @csrf
                                            <button type="submit" name="validar_factura" class="btn btn-dark btn-sm" {{ isset($disabled_factura) ? $disabled_factura : '' }}>Subir Factura</button>
                                            <input type="hidden" name="id_factura" value="{{ $idFactura }}">
                                            <input type="hidden" name="mes" value="{{ $mes['mes_num'] }}">
                                            <input type="hidden" name="anio" value="{{ $yearCorresponde }}">
                                            <input type="hidden" name="costo_por_hora" value="{{ $mo_ingreso_psc }}">
                                            <input type="hidden" name="filtro" value="{{ $filtro_unidad }}">
                                        </form>
                                    @endpuede

                                    &nbsp;

                                    {{-- Botón Aceptar (reportar) --}}
                                    <form action="" method="POST" style="text-align: center; display:inline-block;">
                                        @csrf
                                        @puede('Reporte de Horas y facturas','puede_aceptar_horas')
                                            <button type="button" name="reportar" value="reportar" class="btn btn-light btn-sm" {{ $disabled }} data-bs-toggle="modal" data-bs-target="#autorizaHrs{{ $mes['mes_abrev'] }}"><i class=" bx bx-save font-size-16 align-middle"></i>Aceptar</button>
                                        @endpuede
                                    </form>
                                </td>

                                {{-- Modal de vista rápida de factura --}}
                                @if(!empty($factura))
                                <div class="modal fade" id="verFactura{{ $mes['mes_abrev'] }}" tabindex="-1" aria-labelledby="verFacturaLabel{{ $mes['mes_abrev'] }}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="verFacturaLabel{{ $mes['mes_abrev'] }}">Factura {{ $idFactura }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                <p><strong>ID:</strong> {{ $idFactura }}</p>
                                                <p><strong>Subtotal:</strong> {{ number_format($subtotal ?? 0, 2) }}</p>
                                                <p><strong>Fecha corresponde:</strong> {{ $factura->fac_fecha_corresponde ?? '' }}</p>
                                                <p><strong>Estatus factura:</strong> {{ $factura->fac_estatus ?? '' }}</p>
                                                <p><strong>Comprobante:</strong> {{ (!empty($tieneComprobante) ? 'Sí' : 'No') }}</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                                                @if(!empty($tieneComprobante))
                                                    <a href="{{ url('storage/facturas/' . ($factura->fac_id ?? '')) }}" class="btn btn-primary" target="_blank">Abrir comprobante</a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                                <td>
                                    @if($estatus == 3)
                                        <span class="badge badge-success">Reportado</span>
                                    @else
                                        <span class="badge badge-warning">Pendiente</span>
                                    @endif
                                </td>
                                <td>
                                    @if($estatusFactura == 1)
                                        <span class="badge badge-warning">En revisión</span>
                                    @elseif($estatusFactura == 2)
                                        <span class="badge badge-danger">Rechazada</span>
                                    @elseif($estatusFactura == 3)
                                        <span class="badge badge-success">Aprobada</span>
                                    @else
                                        <span class="badge badge-secondary">Sin factura</span>
                                    @endif
                                </td>
                                <td>
                                    @if($tieneComprobante)
                                        <span class="badge badge-success">Pagado</span>
                                    @else
                                        <span class="badge badge-secondary">Pendiente</span>
                                    @endif
                                </td>
                                <td style="color: #495057;">{{ $mes['parcialidad'] }}</td>
                                <td><strong>{{ $mesFormateado }}</strong></td>
                                <td style="color: #495057;">{{ $mes['horas'] }}</td>
                                <td>
                                    <input type='number' id="numberInput{{ $mes['mes_abrev'] }}" min='0' max='{{ $mes['horas'] }}' required class='form-control text-center incidencias-input' value='{{ $incidencias }}' name='incidencias' {{ $disabled }}
                                           data-mes-abrev="{{ $mes['mes_abrev'] }}"
                                           data-horas="{{ $mes['horas'] ?? 0 }}"
                                           data-costo='{{ $costoPorHora }}'>
                                </td>
                                <td id="td_monto_pagar">
                                    <strong id="strongElement{{ $mes['mes_abrev'] }}">{{ $montoFormateado }}</strong>
                                </td>

                                <!-- Modal para confirmar reporte (se mantiene igual) -->
                                <div class="modal fade" id="autorizaHrs{{ $mes['mes_abrev'] }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title">Autorizar el pago de horas del mes de {{ $mes['mes_nombre'] }}</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                            </div>
                                            <div class="modal-body">
                                                    <center><b>
                                                        ¿ESTÁ SEGURO QUE DESEA PAGAR EL MES DE {{ strtoupper($mes['mes_nombre']) }}?<br><br>
                                                    </b></center>
                                            </div>
                                            <div class="modal-footer">
                                                <form action="{{ route('facturas.reportar.horas') }}" method="POST">
                                                    @csrf
                                                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                                                    <input type="submit" name="reportar" value="Reportar" class="btn btn-primary">
                                                    <input type="hidden" name="au_id" value="{{ $aula->aul_id }}">
                                                    <input type="hidden" name="fecha_corresponde" value="{{ $mes['fecha_corresponde'] }}">
                                                    <input type="hidden" name="horas" value="{{ $mes['horas'] }}">
                                                    <input type="hidden" name="parcialidad" value="{{ $mes['parcialidad'] }}">
                                                    <input type="hidden" name="costo_por_hora" value="{{ $costoPorHora }}">
                                                    <input type="hidden" name="filtro_unidad" value="{{ $filtro_unidad }}">
                                                    <input type="hidden" name="au_fecha_inicia" value="{{ $fechaIniciaFormateada }}">
                                                    <input type="hidden" name="incidencias" id="incidencias{{ $mes['mes_abrev'] }}" value="{{ $incidencias }}">
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    /* Estilos relevantes tomados de asignar_presupuesto */
    input { text-align: center; }
    .presupuestos-table { font-family: 'Inter', 'Roboto', sans-serif; font-size: 14px; }
    table.presupuestos-table thead th { font-weight: 600; text-align: center; vertical-align: middle; }
    .presupuestos-table tbody tr:hover { background-color: #eef4ff; }
    .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border-radius: 6px; padding: 4px 6px; }

    /* Ajuste visual para monto a pagar */
    #td_monto_pagar { color: #9CF18D; font-size: 18px; }

    /* Botones acción: tamaño uniforme y más pequeños solo en la primera columna del datatable */
    #responsiveTable tbody td:first-child { display: flex; align-items: center; justify-content: center; gap: 6px; }
    #responsiveTable tbody td:first-child .btn {
        padding: 0 8px;            /* reduce padding lateral */
        font-size: 0.78rem;        /* texto más pequeño */
        height: 34px;              /* altura fija */
        width: 86px;               /* ancho fijo uniforme */
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        white-space: nowrap;       /* evitar salto de línea */
        overflow: hidden;          /* recortar texto si es muy largo */
        text-overflow: ellipsis;   /* mostrar ... si se recorta */
    }
    /* Si quieres que el texto siempre se muestre completo, usa min-width en lugar de width */
    #responsiveTable tbody td:first-child .btn i,
    #responsiveTable tbody td:first-child .btn svg {
        margin-right: 6px;
        line-height: 1;
        font-size: 0.95rem;        /* icono proporcional */
    }
    /* Formularios en la celda de acciones sin margen extra */
    #responsiveTable tbody td:first-child form { margin: 0; display: inline-block; }

</style>

@push('scripts')
<script>
   

    // Inicialización DataTable: igual que asignar_presupuesto para que muestre las filas ya renderizadas
    if ($.fn.DataTable.isDataTable('#responsiveTable')) {
        $('#responsiveTable').DataTable().destroy();
    }

    $(document).ready(function() {
        $('#responsiveTable').DataTable({
            responsive: true,
            paging: false,
            ordering: false,
            searching: false,
            language: { url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json' },
            columnDefs: [{ targets: [0,1,2,3,6], className: 'text-center' }]
        });

        // DEBUG: listar inputs y atributos
        // console.log('DEBUG listar inputs incidencias: count=' + $('.incidencias-input').length);
        $('.incidencias-input').each(function(index, el) {
            try {
                console.log('INPUT['+index+'] id=' + (el.id || '') + ' disabled=' + (el.disabled ? 'true' : 'false') + ' data-horas=' + $(el).data('horas') + ' data-costo=' + $(el).data('costo') + ' value=' + $(el).val());
            } catch (e) {
                console.error('ERROR al leer input attrs', e);
            }
        });

        // Calcular e insertar monto inicial para cada fila (por si no se modifica el input)
        $('.incidencias-input').each(function() {
            try {
                var $inp = $(this);
                var incidencias = parseInt($inp.val()) || 0;
                var horas = Number($inp.data('horas')) || 0;
                var costoPorHora = Number($inp.data('costo')) || 0;
                var horasFinales = Math.max(0, horas - incidencias);
                var monto = costoPorHora * horasFinales;
                var montoFormateado = '$ ' + monto.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                var mesAbrev = $inp.data('mes-abrev');
                $('#strongElement' + mesAbrev).text(montoFormateado);
                // console.log('DEBUG monto inicial para', mesAbrev, montoFormateado, 'costoPorHora=', costoPorHora);
            } catch (e) {
                console.error('ERROR al calcular monto inicial', e);
            }
        });

        // Delegated handler para inputs de incidencias (funciona aunque DataTable re-renderice filas)
        $(document).on('input change', '.incidencias-input', function() {
            // console.log('DEBUG incidencias input fired, id:', this.id);
            var incidencias = parseInt($(this).val()) || 0;
            var horas = Number($(this).data('horas')) || 0;
            // Use the cost from the data attribute which is now guaranteed to be aul_costo_hora_psc
            var costoPorHora = Number($(this).data('costo')) || 0;
            
            // console.log('DEBUG costoPorHora:', costoPorHora);
            // console.log('DEBUG horas:', horas, 'incidencias:', incidencias);

            var horasFinales = horas - incidencias;
            if (horasFinales < 0) horasFinales = 0;
            var monto = costoPorHora * horasFinales;
            var montoFormateado = '$ ' + monto.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");

            var mesAbrev = $(this).data('mes-abrev');
            $('#strongElement' + mesAbrev).text(montoFormateado);
            $('#incidencias' + mesAbrev).val(incidencias);
        });

    });
</script>
@endpush
@endsection