@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    @if ($aula)
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">Reporte Horas <strong class="text-primary">
                                        {{ $aula->aul_clave_registro }}</strong></h4>
                                <style>
                                    input {
                                        text-align: center;
                                    }

                                    /* Tabla general */
                                    .presupuestos-table {
                                        font-family: 'Inter', 'Roboto', sans-serif;
                                        font-size: 14px;
                                    }

                                    /* Encabezado */
                                    table.presupuestos-table thead th {
                                        font-weight: 600;
                                        text-align: center;
                                        vertical-align: middle;
                                    }

                                    /* Filas */
                                    .presupuestos-table tbody tr:hover {
                                        background-color: #eef4ff;
                                    }

                                    /* Números */
                                    .presupuestos-table td {
                                        font-variant-numeric: tabular-nums;
                                    }

                                    /* Montos */
                                    table.presupuestos-table tbody td.monto-principal {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    .resaltar {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    table.presupuestos-table tbody input.monto-federal-asignado {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    table.presupuestos-table tbody input.monto-ip-asignado {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    table.presupuestos-table tbody input.monto-estatal-asignado {
                                        font-weight: bold;
                                        color: #1f2937;
                                    }

                                    table.presupuestos-table tbody td.monto-secundario {
                                        color: #6b7280;
                                    }

                                    table.presupuestos-table tbody td.monto-total {
                                        font-weight: 700;
                                        color: red;

                                    }

                                    /* Botón */
                                    .btn-asignar {
                                        padding: 4px 12px;
                                        border-radius: 6px;
                                    }

                                    .btn-editar {
                                        padding: 4px 12px;
                                        border-radius: 6px;
                                    }

                                    /* Botón */
                                    .btn-estilo {
                                        border-radius: 6px;
                                        padding: 4px 12px;
                                    }

                                    /* DataTables ajustes */
                                    .dataTables_wrapper .dataTables_filter input,
                                    .dataTables_wrapper .dataTables_length select {
                                        border-radius: 6px;
                                        padding: 4px 6px;
                                    }
                                </style>
                                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                                    <ol class="breadcrumb">
                                        <a href="{{ route('facturas.reporte.horas') }}"
                                            class="btn btn-rounded btn-dark back-fixed" aria-label="Regresar">
                                            <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                                            Regresar
                                        </a>
                                    </ol>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="basic-form">
                                    @csrf
                                    <div class="row text-center " id="formulario_aula">
                                        <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 {{ $estatusAula == 'A1' ? '' : 'collapsed' }}"
                                                        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 {{ $estatusAula == 'A1' ? '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 }}" placeholder=""
                                                                id="numero_aula"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('numero_aula')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-5 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 }}" placeholder=""
                                                                id="nombre_curso"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('nombre_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-3 mb-3 col-md-6">
                                                            <label class="form-label">Tipo de Curso</label>
                                                            <input type="text" name="tipo_curso" class="form-control"
                                                                value="{{ $tipoCurso }}" placeholder=""
                                                                id="tipo_de_curso"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('tipo_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                            <input type="hidden" id="tipo_curso"
                                                                value="{{ $aula->aul_curso_tipo }}">
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Costo por Capacitando</label>
                                                            <input type="text" name="costo_alumno" class="form-control"
                                                                value="{{ $aula->aul_costo_hora_capacitando }}"
                                                                placeholder="" id="costo_alumno"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('costo_alumno')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-4 mb-3 col-md-6">
                                                            <label class="form-label">Campo de Formaciòn
                                                                Profesional</label>
                                                            <input type="text" name="cfp" class="form-control"
                                                                value="{{ $aula->aul_cfp_nombre }}" placeholder=""
                                                                id="cfp"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('cfp')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </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 }}"
                                                                placeholder="" id="especialidad"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('especialidad')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </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 }}" placeholder=""
                                                                id="nombre_instructor"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            <input type="hidden" name="instructor_id"
                                                                id="instructor_id">
                                                            @error('instructor')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </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 }}" placeholder=""
                                                                id="costo_psc"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('nombre_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6 d-none"
                                                            id="div_modelo_negocios">
                                                            <label class="form-label">M&oacute;delo de
                                                                Negocios</label>
                                                            <input type="text" class="form-control"
                                                                id="modelo_negocios" name="modelo_negocios"
                                                                value="{{ $claveModeloNegocio }}" 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 }}" placeholder=""
                                                                id="minimo_capacitandos" min="1" max="200"
                                                                readonly>
                                                        </div>
                                                        <div class="col-lg-1 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 }}" placeholder=""
                                                                id="duracion"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            @error('duracion')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Tipo de Formaci&oacute;n</label>
                                                            <input type="text" name="" class="form-control"
                                                                value="{{ $tipoFormacion }}" placeholder=""
                                                                id="tipo_formacion"
                                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                            <input type="hidden" name="curso_id" id="curso_id">
                                                            @error('clave_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_cfp"></div>
                                                        </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>
                                                            @error('tipo_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="col-lg-3 mb-3 col-md-6" id="div_ubicacion">
                                                            <label class="form-label">Ubicaci&oacute;n </label>
                                                            <input type="text" name="" class="form-control"
                                                                value="{{ $aula->aul_ubicacion }}" placeholder=""
                                                                id=""
                                                                onkeyup="this.value = this.value.toLowerCase()" readonly>

                                                            @error('tipo_curso')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6 d-none" id="div_enlace">
                                                            <label class="form-label">Enlace</label>
                                                            <input type="text" name="enlace" class="form-control"
                                                                value="{{ $aula->aul_enlace }}" placeholder=""
                                                                id="enlace"
                                                                onkeyup="this.value = this.value.toLowerCase()" readonly>
                                                            @error('enlace')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_enlace"></div>
                                                        </div>
                                                        <div class="col-lg-8 mb-3 col-md-6" id="div_domicilio">
                                                            <label class="form-label">Domicilio</label>
                                                            <input type="text" name="enlace" class="form-control"
                                                                value="{{ $domicilio }}" placeholder=""
                                                                id="enlace"
                                                                onkeyup="this.value = this.value.toLowerCase()" readonly>
                                                            @error('enlace')
                                                                <div class="text-danger">{{ $message }}</div>
                                                            @enderror
                                                            <div class="text-danger" id="message_enlace"></div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <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 class="color-white text-center">
                                                    <tr class="bg-primary text-center">
                                                        <th style="color: azure !important;">Incidencias</th>
                                                        <th width="5%"
                                                            style="color: azure !important; text-align: center;">Estatus
                                                            Horas
                                                        </th>
                                                        <th width="5%"
                                                            style="color: azure !important; text-align: center;"> Factura
                                                        </th>
                                                        <th width="5%"
                                                            style="color: azure !important; text-align: center;"> Pago
                                                        </th>
                                                        <th width="5%" style="color: azure !important;">
                                                            Pago</th>
                                                        <th style="color: azure !important;">Mes</th>
                                                        <th style="color: azure !important;">Horas</th>
                                                        <th style="color: azure !important;">Subtotal</th>
                                                        <th style="color: azure !important;">IVA</th>
                                                        <th style="color: azure !important;">Gasto</th>
                                                        <th style="color: azure !important;"></th>
                                                        </th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($meses as $mes)
                                                        <tr data-index="{{ $loop->index }}"
                                                            data-asignado="{{ $mes['pagado'] ? 1 : 0 }}"
                                                            class="{{ $mes['pagado'] ? 'mes-asignado' : '' }}">
                                                            <td>
                                                                <input type="number" class="form-control incidencias"
                                                                    value="0" placeholder="" id="incidencias" {{ $mes['asignado'] ? 'readonly' : '' }}>
                                                            </td>
                                                            <td>
                                                                <span
                                                                    class="badge light badge-light horas-por-aceptar {{ $mes['asignado'] ? 'd-none' : '' }}">
                                                                    <i class="fa fa-circle text-warning me-1"></i>
                                                                    Por Aceptar
                                                                </span>
                                                                <span
                                                                    class="badge light badge-success horas-aceptadas {{ $mes['asignado'] ? '' : 'd-none' }}">
                                                                    <i class="fa fa-circle text-success me-1"></i>
                                                                    Aceptadas
                                                                </span>
                                                            </td>
                                                            <td>
                                                                @if ($mes['estatusFacturaMes'] == null)
                                                                    <span class="badge light badge-light ">
                                                                        <i class="fa fa-circle text-warning me-1"></i>
                                                                        Sin factura
                                                                    </span>
                                                                @endif
                                                                @if ($mes['estatusFacturaMes'] == 1)
                                                                    <span class="badge light badge-warning">
                                                                        <i class="fa fa-circle text-warning me-1"></i>
                                                                        En revision
                                                                    </span>
                                                                @endif
                                                                @if ($mes['estatusFacturaMes'] == 2)
                                                                    <span class="badge light badge-danger"
                                                                        data-bs-toggle="tooltip" data-bs-placement="top"
                                                                        title="{{ $mes['observacion'] }}">
                                                                        <i class="fa fa-circle text-danger me-1"></i>
                                                                        Rechazada
                                                                    </span>
                                                                @endif
                                                                @if ($mes['estatusFacturaMes'] == 3)
                                                                    <span class="badge light badge-success">
                                                                        <i class="fa fa-circle text-success me-1"></i>
                                                                        Aprobada
                                                                    </span>
                                                                @endif
                                                            </td>
                                                            <td>
                                                                @if ($mes['estatusPago'] == null)
                                                                    <span class="badge light badge-light">
                                                                        <i class="fa fa-circle text-warning me-1"></i>
                                                                        Sin pago
                                                                    </span>
                                                                @endif
                                                                @if ($mes['estatusPago'] == 1)
                                                                    <span class="badge light badge-success">
                                                                        <i class="fa fa-circle text-success me-1"></i>
                                                                        Pagada
                                                                    </span>
                                                                @endif
                                                            </td>
                                                            <td class="text-center">{{ $mes['key'] }}</td>
                                                            <td>{{ ucfirst($mes['nombre']) }}</td>
                                                            <td class="text-center">{{ $mes['horas'] }}</td>
                                                            <td class="text-end monto-principal">
                                                                $ {{ number_format($mes['subtotal'], 2, '.', ',') }}
                                                            </td>
                                                            <td class="text-end monto-secundario">
                                                                $ {{ number_format($mes['iva'], 2, '.', ',') }}
                                                            </td>
                                                            <td class="text-end monto-total gasto-final"
                                                                data-gasto="{{ $mes['gasto_final'] }}">
                                                                $ {{ number_format($mes['gasto_final'], 2, '.', ',') }}
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="d-flex">
                                                                    @puede('Reporte de horas y facturas', 'puede_aceptar_horas')
                                                                        <button
                                                                            class="btn btn-success btn-sm btn-asignar {{ ($loop->first || $mes['estatusMesAnterior'] == 3) && !$mes['asignado'] ? '' : 'd-none' }}"
                                                                            type="button" data-bs-target="#autorizar"
                                                                            data-bs-toggle="modal"
                                                                            {{ $mes['asignado'] ? 'disabled' : '' }}
                                                                            id="btnAsignar">
                                                                            Aceptar
                                                                        </button>
                                                                    @endpuede
                                                                    @puede('Reporte de horas y facturas', 'puede_subir_facturas')
                                                                        <form action="{{ route('showValidador') }}"
                                                                            method="post" class="mx-1">
                                                                            @csrf
                                                                            @if ($mes['estatusFacturaMes'] != 1 && $mes['estatusFacturaMes'] != 3)
                                                                                <button
                                                                                    class="btn btn-warning btn-sm btn-factura btn-estilo {{ $mes['asignado'] ? '' : 'd-none' }}"
                                                                                    type="submit">
                                                                                    Factura
                                                                                </button>
                                                                            @endif
                                                                            <input type="hidden" name="aul_id"
                                                                                value="{{ $aula->aul_id }}">
                                                                            <input type="hidden" value="{{ $mes['horas'] }}"
                                                                                name="horas_mes">
                                                                            <input type="hidden" name="fecha_corresponde"
                                                                                class="mesPagoValidar" id=""
                                                                                value="">
                                                                            <input type="hidden" name="iva"
                                                                                class="mesIvaValidar" id=""
                                                                                value="">
                                                                            <input type="hidden" name="total"
                                                                                class="mesTotalValidar" id=""
                                                                                value="">
                                                                            <input type="hidden"
                                                                                value="{{ number_format($mes['subtotal'], 2, '.') }}"
                                                                                name="subtotal">
                                                                        </form>
                                                                    @endpuede
                                                                    @puede('Reporte de horas y facturas', 'ver_factura_xml')
                                                                        @if ($mes['estatusFacturaMes'] != null)
                                                                            <div class="btn-group" role="group">
                                                                                <button type="button"
                                                                                    class="btn btn-info btn-sm dropdown-toggle btn-estilo"
                                                                                    data-bs-toggle="dropdown"
                                                                                    aria-expanded="false"> <i
                                                                                        class="fa fa-eye"></i></button>
                                                                                <div class="dropdown-menu" style="">
                                                                                    <a href="javascript:void(0);"
                                                                                        class="dropdown-item abrir-modal-archivo"
                                                                                        data-archivo="{{ asset('storage/facturas/psc/' . $unidad_nombre . '/' . strtolower($tipoCurso) . '/' . $mes['folioFactura'] . '.pdf') }}">
                                                                                        <i class="las la-file-invoice-dollar fs-3"></i> Factura
                                                                                    </a>
                                                                                    <a class="dropdown-item abrir-modal-archivo"
                                                                                        href="javascript:void()"
                                                                                        data-archivo="{{ asset('storage/facturas/psc/' . $unidad_nombre . '/' . strtolower($tipoCurso) . '/' . $mes['folioFactura'] . '_V.pdf') }}">
                                                                                         <i class="las la-file fs-3"></i> Verificacion SAT
                                                                                    </a>
                                                                                    <a class="dropdown-item" target="_blanck" style="cursor: pointer"
                                                                                        data-url="{{ asset('storage/facturas/psc/' . strtolower($unidad_nombre) . '/' . strtolower($tipoCurso) . '/' . $mes['folioFactura'] . '.xml') }}"
                                                                                        onclick="abrirXml(this.dataset.url); return false;">
                                                                                        <i class="las la-file-code fs-3"></i> XML
                                                                                    </a>
                                                                                    @if($mes['estatusPago'] == 1)
                                                                                    <a class="dropdown-item abrir-modal-archivo bg-success text-white"
                                                                                        href="javascript:void()"
                                                                                        data-archivo="{{ asset('storage/facturas/psc/' . $unidad_nombre . '/' . strtolower($tipoCurso) . '/' . $mes['folioFactura'] . '_C.pdf') }}">
                                                                                        <i class="las la-hand-holding-usd fs-3"></i> Comprobante Pago
                                                                                      </a>
                                                                                    @endif
                                                                                </div>
                                                                            </div>
                                                                        @endif
                                                                    @endpuede
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="modal fade" id="autorizar" aria-modal="true" role="dialog">
                                            <div class="modal-dialog modal-dialog-centered" role="document">
                                                <div class="modal-content">
                                                    <div class="modal-header alert-primary">
                                                        <h5 class="modal-title text-primary">Aceptar Horas
                                                        </h5>
                                                        <button type="button" class="btn-close"
                                                            data-bs-dismiss="modal"></button>
                                                    </div>
                                                    <div class="modal-body text-center">
                                                        <div id="mensaje-error"
                                                            class="alert alert-warning d-none text-start"></div>
                                                        <span>{{ $aula->aul_curso_nombre }}</span><br>
                                                        <span>Mes: </span><strong id="nombreMes"> </strong>
                                                        <span>Horas: </span>
                                                        <strong id="horasMes"> </strong>
                                                    </div>
                                                    <form action="{{ route('aceptarHoras') }}" method="post"
                                                        class="asignar-presupuesto">
                                                        @csrf
                                                        <div class="modal-footer d-flex">
                                                            <button type="button" class="btn btn-danger light"
                                                                data-bs-dismiss="modal">Cerrar</button>
                                                            <button type="submit" class="btn btn-primary"
                                                                id="btn-confirmar" >Confirmar</button>
                                                            <input type="hidden" name="aul_id"
                                                                value="{{ $aula->aul_id }}">
                                                            <input type="hidden" name="parcialidad" id="parcialidad"
                                                                value="">
                                                            <input type="hidden" name="total_horas" id="facTotalHrs"
                                                                value="">
                                                            <input type="hidden" name="subtotal" id="facSubtotal"
                                                                value="">
                                                            <input type="hidden" name="fecha_corresponde" id="mesPago"
                                                                value="">
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                    @endif
                </div>
            </div>
            <!-- Modal -->
            <!-- Modal -->
            <div class="modal fade" id="modalArchivo" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title"></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Cerrar"></button>
                        </div>
                        <div class="modal-body p-0" style="height:90vh;"> <!-- quita padding para que ocupe todo -->
                            <iframe id="iframeArchivo" src="" width="100%" height="100%"
                                style="border:none;"></iframe>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- end car body-->
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    <div class="row">
        @if (session('success'))
            <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                    stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 11 12 14 22 4"></polyline>
                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                </svg>
                <strong id="alert-confirmacion"> {{ session('success') }}</strong>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" id="alert-container-error">
                <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                    stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2">
                    </polygon>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                </svg>
                <strong id="alert-confirmacion-error"> {{ session('error') }}</strong>
            </div>
        @endif


    </div>
    </div>
    </div>
    <!--</div>-->
    </div>
    </div>
    </div>

@endsection

@push('scripts')
    <script>
        function abrirXml(url) {
            const w = 1000;
            const h = 800;
            const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left;
            const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top;
            const width = window.innerWidth || document.documentElement.clientWidth || screen.width;
            const height = window.innerHeight || document.documentElement.clientHeight || screen.height;
            const left = dualScreenLeft + (width - w) / 2;
            const top = dualScreenTop + (height - h) / 2;
            window.open(
                url,
                'visorXML',
                `scrollbars=yes,resizable=yes,width=${w},height=${h},top=${top},left=${left}`
            );
        }



        $('.presupuestos-table').on('draw.dt', function() {
            const tooltips = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltips.forEach(function(tooltipEl) {
                new bootstrap.Tooltip(tooltipEl);
            });
        });

        setTimeout(function() {
            $(".msg-error").fadeOut("slow");
        }, 4000); // 4 segundos*/

        if ($.fn.DataTable.isDataTable('#responsiveTable')) {
            $('#responsiveTable').DataTable().destroy();
        }

        $(document).ready(function() {
            bloquearFilasPorOrden();
        });

        $(document).ready(function() {
            const todosAsignados = @json($todosAsignados);
            const tipo_curso = $('#tipo_curso').val();

            if (todosAsignados == true) {
                $('#divRequisicion').removeClass('d-none');
            }

            let modalidad = $('#modalidad').val();

            if (modalidad == 'MIXTO') {
                $('#div_ubicacion').removeClass('d-none');
                $('#div_enlace').removeClass('d-none');
            }
            $('#modalValidarFactura').on('shown.bs.modal', function() {
                $('#btnConfirmarFactura').focus();
            });

            $(".accordion-collapse").each(function() {
                let $accordion = $(this);
                let id = $accordion.attr("id");
                if (!id) return; // si no tiene id, saltar

                // Revisar si estaba abierto en la última visita
                if (localStorage.getItem("accordion_" + id) === "abierto") {
                    $accordion.addClass("show"); // mostrar visualmente
                    $accordion.attr("aria-expanded", "true"); // para accesibilidad
                    $accordion.prev(".accordion-header").find(".accordion-button").removeClass(
                        "collapsed"); // quitar collapsed
                }
                // Guardar estado cuando se abre
                $accordion.on("shown.bs.collapse", function() {
                    localStorage.setItem("accordion_" + id, "abierto");
                });
                // Guardar estado cuando se cierra
                $accordion.on("hidden.bs.collapse", function() {
                    localStorage.setItem("accordion_" + id, "cerrado");
                });
            });
        });

        let tipo_de_curso = $('#tipo_curso').val();
        var capacitandosPorAgregar = parseInt($('#capacitandosPorAgregar').val(), 10) || 0;
        let btnAcredito = null;
        const id_aula = $('#aul_id').val();
        const estatusCapacitandos = $('#estatusCapacitandos').val();
        const urlCapacitandos = "{{ route('showCapacitandosAula', ['id' => '_ID']) }}".replace('_ID', id_aula);
        let estatus_aula = $('#aul_estatus').val();
        const estatusAula = '{{ $aula->aul_estatus_numero }}';

        setTimeout(function() {
            if (capacitandosPorAgregar <= 0) {
                $('.agregar-capacitando').addClass('d-none');
            }
        }, 400);

        if (tipo_de_curso == 2 || tipo_de_curso == 4) {
            $('#div_modelo_negocios').removeClass('d-none');
        }
        if ("{{ !$domicilio }}") {
            $('#div_domicilio').addClass('d-none');
        }

        $('#responsiveTable').DataTable({
            responsive: true,
            paging: false,
            ordering: false,
            searching: false,
            columnDefs: [{
                targets: [0, 1, 2, 6, 7, 8, 9],
                className: 'text-center'
            }]
        });

        const modalEl = document.getElementById('autorizar');
        const modal = new bootstrap.Modal(modalEl, {
            backdrop: 'static', // opcional
            keyboard: false // opcional
        });

        $(modalEl).on('hidden.bs.modal', function() {
            $('.btn-asignar:not(.d-none)').prop('disabled', false);
        });

        let filaActual = null;

        function soloNumeros(valor) {
            return parseFloat(
                valor.toString().replace(/[^0-9.]/g, '')
            ) || 0;
        }

        let tablaPresupuestos = $('.presupuestos-table').DataTable();

        $(document).on('click', '.btn-asignar', function(e) {
            e.preventDefault();
            const btnAsignar = $(this);
            btnAsignar.prop('disabled', true);
            const fila = $(this).closest('tr');
            filaActual = $(this).closest('tr');
            const filaReal = fila.hasClass('child') ? fila.prev() : fila;
            const row = tablaPresupuestos.row(filaReal);
            const mes = filaReal.find('td:eq(5)').text().trim();
            const parcialidad = filaReal.find('td:eq(4)').text().trim();
            const horasTexto = filaReal.find('td:eq(6)').text().trim();
            const horas = parseInt(horasTexto.replace('hrs', '').trim()) || 0;
            const gastoFinal = Math.round(
                (parseFloat(filaReal.find('.gasto-final').data('gasto')) || 0) * 100
            );
            const subtotal = soloNumeros(filaReal.find('td:eq(7)').text().trim());


            // -------------------------------
            // obtener índice REAL en DataTables
            const rowIndex = row.index();

            const index = fila.index();
            const mensajeError = $('#mensaje-error');
            const btnConfirmar = $('#btn-confirmar');
            $('#nombreMes').html(mes);
            $('#horasMes').html(horas);
            $('#parcialidad').val(parcialidad);
            $('#facSubtotal').val(subtotal);
            $('#facTotalHrs').val(horas);

            //MES DA FEBRERO

            const meses = {
                'enero': 0,
                'febrero': 1,
                'marzo': 2,
                'abril': 3,
                'mayo': 4,
                'junio': 5,
                'julio': 6,
                'agosto': 7,
                'septiembre': 8,
                'octubre': 9,
                'noviembre': 10,
                'diciembre': 11
            };
            // Convertimos a minúsculas para evitar problemas
            const mesIndex = meses[mes.toLowerCase()];
            if (mesIndex === undefined) {
                console.error('Mes inválido:', mes);
                return;
            }
            const anio = new Date().getFullYear();
            // Creamos la fecha con día fijo 01
            const fecha = new Date(anio, mesIndex, 1);
            const fechaFormateada =
                `${fecha.getFullYear()}-${String(fecha.getMonth() + 1).padStart(2,'0')}-01`;
            $('#modal_mes').val(fechaFormateada);
            $('#mesPago').val(fechaFormateada);
            $('#mesPagoValidar').val(fechaFormateada);

            // VALIDACIÓN ORDEN DE MESES
            /*if (index > 0) {
                                const filaAnterior = fila.prev('tr');
                                if (!filaAnterior.hasClass('mes-asignado')) {
                                    const mesActual = fila.find('td:eq(4)').text().trim();
                                    const mesAnterior = filaAnterior.find('td:eq(4)').text().trim();
                                    mensajeError
                                        .removeClass('d-none')
                                        .addClass('text-center text-dark')
                                        .html(`
            <strong class="text-danger">Orden de asignación inválido</strong><br>
            <hr>
            No puedes asignar <strong>${mesActual}</strong><br>
            sin haber asignado primero<br>
            <strong>${mesAnterior}</strong>
        `);
                                    btnConfirmar.addClass('d-none');
                                    modal.show();
                                    return;
                                }
                            }*/
            /*if (rowIndex > 0) {

                    // obtener fila anterior REAL
                    const filaAnteriorNode = tablaPresupuestos.row(rowIndex - 1).node();
                    const filaAnterior = $(filaAnteriorNode);

                    if (!filaAnterior.hasClass('mes-asignado')) {

                        const mesActual = mes;
                        const mesAnterior = tablaPresupuestos
                            .row(rowIndex - 1)
                            .data()[4]
                            .trim();

                        mensajeError
                            .removeClass('d-none')
                            .addClass('text-center text-dark')
                            .html(`
            <strong class="text-danger">Orden de asignación inválido</strong><br>
            <hr>
            No puedes asignar <strong>${mesActual}</strong><br>
            sin haber asignado primero<br>
            <strong>${mesAnterior}</strong>
        `);

                        btnConfirmar.addClass('d-none');
                        modal.show();
                        return;
                    }
                }*/
            mensajeError.addClass('d-none').html('');
            btnConfirmar.removeClass('d-none');
            modal.show();

            let tipoCurso = $('#tipo_curso').val();

            $(document).on("submit", ".asignar-presupuesto", function(e) {
                e.preventDefault();
                const $btnConfirmar = $('#btn-confirmar');
                $btnConfirmar.prop('disabled', true).text('Procesando...');
                let form = $(this);
                let actionUrl = form.attr("action");
                let formData = form.serialize();

                $.ajax({
                    url: actionUrl,
                    type: "POST",
                    data: formData,
                    dataType: "json",
                    success: function(response) {
                        if (!response.success || !filaActual) return;
                        validarTodosAsignados();
                        const p = response.presupuesto;
                        // 1️⃣ Bloquear fila actual
                        filaActual
                            .addClass('mes-asignado')
                            .attr('data-asignado', 1);
                        filaActual.find('input[type="text"]').prop('disabled', true);
                        filaActual.find('.btn-asignar')
                            .addClass('d-none')
                            .prop('disabled', true);
                        filaActual.find('.btn-editar')
                            .removeClass('d-none');

                        // estilos a aplicar
                        const estilosAsignado = {
                            'font-weight': 'bold',
                            'color': '#1f2937'
                        };

                        const filaSiguiente = filaActual.next('tr');
                        if (filaSiguiente.length) {
                            const yaAsignada = filaSiguiente.data('asignado') == 1;
                            const tieneValores = filaTieneValores(filaSiguiente);
                            if (!yaAsignada && !tieneValores) {
                                //Puede asignar
                                filaActual
                                    .removeClass('mes-bloqueado')
                                    .attr('data-asignado', 0);

                                filaActual.find('.btn-factura')
                                    .removeClass('d-none')
                                    .prop('disabled', false);
                                filaActual.find('input[type="text"]').prop('disabled',
                                    false);

                                filaActual.find('.acept-horas')
                                    .removeClass('bg-light')
                                    .addClass('bg-success');

                                filaActual.find('.horas-por-aceptar')
                                    .addClass('d-none');

                                filaActual.find('.horas-aceptadas')
                                    .removeClass('d-none');
                                console.log("ENTRA");
                            }
                            console.log("NOOO ENTRA");
                            /* if (!yaAsignada && !tieneValores) {
                                 //Puede asignar
                                 filaSiguiente
                                     .removeClass('mes-bloqueado')
                                     .attr('data-asignado', 0);

                                 filaSiguiente.find('.btn-asignar')
                                     .removeClass('d-none')
                                     .prop('disabled', false);
                                 filaSiguiente.find('input[type="text"]').prop('disabled',
                                     false);

                             } else {
                                 filaSiguiente.find('.btn-asignar')
                                     .addClass('d-none')
                                     .prop('disabled', true);
                                 filaSiguiente.find('.btn-editar')
                                     .removeClass('d-none');
                                 filaSiguiente.find('input[type="text"]').prop('disabled', true);
                             }*/
                        } else {
                            // ES LA ÚLTIMA FILA
                            console.log("Es la última fila");
                            filaActual.find('.btn-factura')
                                .removeClass('d-none')
                                .prop('disabled', false);
                            filaActual.find('.acept-horas')
                                .removeClass('bg-light')
                                .addClass('bg-success');
                            filaActual.find('.horas-por-aceptar')
                                .addClass('d-none');
                            filaActual.find('.horas-aceptadas')
                                .removeClass('d-none');
                        }


                        const modalEl = document.getElementById('autorizar');
                        bootstrap.Modal.getInstance(modalEl).hide();
                    },
                    error: function(xhr) {
                        $btnConfirmar.prop('disabled', false).text('Confirmar');
                        console.error("Error en la solicitud:", xhr.responseText);
                        console.error('STATUS:', xhr.status);
                        console.error('RESPONSE:', xhr.responseText);
                    }
                });
            });
        });

        // EMPIEZA
        $(document).on('click', '.btn-factura', function(e) {
            const fila = $(this).closest('tr');
            filaActual = $(this).closest('tr');
            const filaReal = fila.hasClass('child') ? fila.prev() : fila;
            const row = tablaPresupuestos.row(filaReal);
            const mes = filaReal.find('td:eq(5)').text().trim();
            const subtotal = soloNumeros(filaReal.find('td:eq(7)').text().trim());
            const index = fila.index();
            const facIva = soloNumeros(filaReal.find('td:eq(8)').text().trim());
            const facTotal = soloNumeros(filaReal.find('td:eq(9)').text().trim());
            fila.find('.mesIvaValidar').val(facIva);
            fila.find('.mesTotalValidar').val(facTotal);
            const mensajeError = $('#mensaje-error');
            const btnConfirmar = $('#btn-confirmar');
            const meses = {
                'enero': 0,
                'febrero': 1,
                'marzo': 2,
                'abril': 3,
                'mayo': 4,
                'junio': 5,
                'julio': 6,
                'agosto': 7,
                'septiembre': 8,
                'octubre': 9,
                'noviembre': 10,
                'diciembre': 11
            };
            // Convertimos a minúsculas para evitar problemas
            const mesIndex = meses[mes.toLowerCase()];
            if (mesIndex === undefined) {
                console.error('Mes inválido:', mes);
                return;
            }
            const anio = new Date().getFullYear();
            // Creamos la fecha con día fijo 01
            const fecha = new Date(anio, mesIndex, 1);
            const fechaFormateada =
                `${fecha.getFullYear()}-${String(fecha.getMonth() + 1).padStart(2,'0')}-01`;
            //$('#mesPagoValidar').val(fechaFormateada);
            fila.find('.mesPagoValidar').val(fechaFormateada);


        });

        function formatoMoneda(valor) {
            return '$ ' + new Intl.NumberFormat('es-MX', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(valor);
        }

        function validarTodosAsignados() {
            let total = $('.presupuestos-table tbody tr').length;
            let asignados = $('.presupuestos-table tbody tr[data-asignado="1"]').length;

            if (total > 0 && total === asignados) {
                $('#formRequisicion').removeClass('d-none');
            }
        }

        function bloquearFilasPorOrden() {
            const filas = $('#responsiveTable tbody tr');
            filas.each(function(i) {
                const fila = $(this);
                const asignado = fila.data('asignado') == 1;
                if (i === 0) {
                    desbloquearFila(fila);
                    return;
                }
                const filaAnterior = filas.eq(i - 1);
                const anteriorAsignado = filaAnterior.data('asignado') == 1;

                if (!asignado && !anteriorAsignado) {
                    bloquearFila(fila);
                } else {
                    desbloquearFila(fila);
                }
            });
        }

        function bloquearFila(fila) {
            /*fila.addClass('mes-bloqueado');
            fila.find('input, button.btn-asignar').prop('disabled', true);
            fila.find('.btn-asignar').addClass('d-none');*/
        }

        function desbloquearFila(fila) {
            fila.removeClass('mes-bloqueado');
            fila.find('input, button.btn-asignar').prop('disabled', false);
        }

        function actualizarTablaDespuesAsignacion() {
            // actualizar data-asignado de la fila correspondiente
            const fila = $('#responsiveTable tbody tr[data-index="' + indexMes + '"]');
            fila.data('asignado', 1);
            bloquearFilasPorOrden();
        }

        function filaTieneValores(fila) {
            let tieneValor = false;

            fila.find('.monto-federal, .monto-ip, .monto-estatal').each(function() {
                const valor = soloNumeros($(this).val());
                if (valor > 0) {
                    tieneValor = true;
                    return false; // break
                }
            });

            return tieneValor;
        }

        $(document).on('click', '.btn-editar', function() {
            const $row = $(this).closest('tr');
            //habilitar inputs de esa fila
            $row.find('input').prop('disabled', false);
            //ocultar botón editar
            $(this).addClass('d-none');
            //mostrar botón asignar de esa fila
            $row.find('.btn-asignar').removeClass('d-none');
            $row.find('.btn-asignar').prop('disabled', false);
        });

        $(document).on('input', '#requisicion', function() {
            const requisicion = $(this).val();
            $('#reqAula').val(requisicion);
            let req = $('#reqAula').val();
            this.value = this.value.toUpperCase();
        });

        $(document).on('focus', '.incidencias', function() {
            $(this).data('prev', parseInt(this.value) || 0);
        });

        $(document).on('input', '.incidencias', function() {
            let prev = $(this).data('prev') ?? 0;
            let actual = parseInt(this.value) || 0;
            let costoPsc = parseFloat($('#costo_psc').val());
            let fila = $(this).closest('tr');
            let tdMonto = fila.find('.monto-principal');
            let subtotalOriginal = soloNumeros(fila.find('td:eq(7)').text().trim());
            let diferencia = actual - prev;
            let nuevoTotal = subtotalOriginal - (diferencia * costoPsc);
            tdMonto.text('$ ' + nuevoTotal.toLocaleString('es-MX', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }));
            // actualizar valor previo
            $(this).data('prev', actual);
        });


        /*$(document).on('input', '.incidencias', function() {
            //let incidencias = parseInt($(this).val()) || 0;
            let costoPsc = parseFloat($('#costo_psc').val());
            let incidencias = parseInt($('#incidencias').val()) || 0;
            let fila = $(this).closest('tr');
            let tdMonto = fila.find('.monto-principal');
            //let subtotalOriginal = parseFloat(tdMonto.data('subtotal'));
            let subtotalOriginal = soloNumeros(fila.find('td:eq(7)').text().trim());
            //const subtotal = soloNumeros(fila.find('td:eq(7)').text().trim());
            let descuento = costoPsc;
            // let descuento = incidencias * costoPsc;
            //let nuevoTotal = Math.max(0, subtotalOriginal - descuento);
            let nuevoTotal = subtotalOriginal - costoPsc;
            console.log(nuevoTotal);

            tdMonto.text('$ ' + nuevoTotal.toLocaleString('es-MX', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }));
        });*/
        $(document).on('click', '.abrir-modal-archivo', function() {
            const archivoUrl = $(this).data('archivo');
            $('#iframeArchivo').attr('src', archivoUrl); // poner el archivo en el iframe
            const modal = new bootstrap.Modal(document.getElementById('modalArchivo'));
            modal.show();
        });
    </script>
@endpush