@php
$VerEditor = auth()->user()->can('Alumnos - Editor')
@endphp
@if($VerEditor)
@extends('layouts.app')
@section('tituloModulo') {{ "REGISTRO DE ALUMNO" }} @endsection
@section('contenido')
<div class="card">
    <div class="card-body">
        <form action="{{ route('alumnos.update', $datos->codigo_alum) }}" method="POST" enctype="multipart/form-data">
            @csrf
        <div class="row mt-2">
            <h5 class="card-title p-3">Datos Generales</h5>
            <div class="col-md-12 col-12 text-center">
                @if ($datos->photo)
                <img src="{{ asset('/assets/img/perfiles/' . $datos->photo) }}" class="rounded-circle mt-3" alt="Logo" width="150" >
                @else
                <img src="{!! asset('/assets/img/usuario.png') !!}" class="mt-3" alt="Logo" width="150" height="150" >
                @endif
                <p class="control-label">Fotografía del Usuario</p>
                <input class="form-control mt-2" name="fotografia" type="file">
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label is-required">Matrícula</label>
                <input class="form-control" type="text" name="matricula" value="{{ $datos->matricula_alum }}" required>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label is-required">Nombre</label>
                <input class="form-control" type="text" name="nombre" value="{{ $datos->nombre_alum }}" required>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label is-required">Correo electrónico</label>
                <input class="form-control" type="text" name="email" value="{{ $datos->correo_alum }}" required>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Télefono - WhatsApp</label>
                <input class="form-control" type="text" name="telefono" value="{{ $datos->telefono_alum }}">
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Localidad</label>
                <input class="form-control" type="text" name="localidad" value="{{ $datos->localidad_alum }}">
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Curp</label>
                <input class="form-control" type="text" name="curp" value="{{ $datos->curp_alum }}">
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Télefono de Emergencia</label>
                <input class="form-control" type="text" name="telefonoEmergencia" value="{{ $datos->telefono_emergencias_alum }}">
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Seguro Social</label>
                <input class="form-control" type="text" name="seguroSocial" value="{{ $datos->seguro_social_alum }}">
            </div>
            <h5 class="card-title p-3">Documentos</h5>
            <!-- INE -->
            <div class="col-md-4 col-12">
                <label class="control-label">INE</label>
                <div class="input-group">
                    <input class="form-control" type="file" name="archINE">
                    @if ($datos->arch_ine_alum)
                        <a href="{{ route('alumnos.descargar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'ine'] )  }}" class="btn btn-outline-primary"><i class="bx bxs-cloud-download"></i></a>
                        <button type="button" class="btn btn-outline-danger btn-eliminar-documento"
                                data-url="{{ route('alumnos.eliminar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'ine'] ) }}"
                                data-tipo="INE">
                            <i class="bx bxs-trash"></i>
                        </button>
                    @endif
                </div>
            </div>
            <!-- Comprobante de Domicilio -->
            <div class="col-md-4 col-12">
                <label class="control-label">Comprobante de Domicilio</label>
                <div class="input-group">
                    <input class="form-control" type="file" name="archDomicilio">
                    @if ($datos->arch_comprobante_alum)
                        <a href="{{ route('alumnos.descargar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'domicilio'] )  }}" class="btn btn-outline-primary" ><i class="bx bxs-cloud-download"></i></a>
                        <button type="button" class="btn btn-outline-danger btn-eliminar-documento"
                                data-url="{{ route('alumnos.eliminar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'domicilio'] ) }}"
                                data-tipo="Comprobante de Domicilio">
                            <i class="bx bxs-trash"></i>
                        </button>
                    @endif
                </div>
            </div>
            <!-- CURP -->
            <div class="col-md-4 col-12">
                <label class="control-label">CURP</label>
                <div class="input-group">
                    <input class="form-control" type="file" name="archCurp">
                    @if ($datos->arch_curp_alum)
                        <a href="{{ route('alumnos.descargar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'curp'] )  }}" class="btn btn-outline-primary" ><i class="bx bxs-cloud-download"></i></a>
                        <button type="button" class="btn btn-outline-danger btn-eliminar-documento"
                                data-url="{{ route('alumnos.eliminar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'curp'] ) }}"
                                data-tipo="CURP">
                            <i class="bx bxs-trash"></i>
                        </button>
                    @endif
                </div>
            </div>
            <!-- Constancia de Estudios -->
            <div class="col-md-4 col-12">
                <label class="control-label">Constancia de Estudios</label>
                <div class="input-group">
                    <input class="form-control" type="file" name="archConstancia">
                    @if ($datos->arch_constancia_estudios_alum)
                        <a href="{{ route('alumnos.descargar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'constancia'] )  }}" class="btn btn-outline-primary" ><i class="bx bxs-cloud-download"></i></a>
                        <button type="button" class="btn btn-outline-danger btn-eliminar-documento"
                                data-url="{{ route('alumnos.eliminar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'constancia'] ) }}"
                                data-tipo="Constancia de Estudios">
                            <i class="bx bxs-trash"></i>
                        </button>
                    @endif
                </div>
            </div>
            <!-- Acta de Nacimiento -->
            <div class="col-md-4 col-12">
                <label class="control-label">Acta de Nacimiento</label>
                <div class="input-group">
                    <input class="form-control" type="file" name="ArchNacimiento">
                    @if ($datos->arch_acta_nacimiento_alum)
                        <a href="{{ route('alumnos.descargar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'nacimiento'] )  }}" class="btn btn-outline-primary" ><i class="bx bxs-cloud-download"></i></a>
                        <button type="button" class="btn btn-outline-danger btn-eliminar-documento"
                                data-url="{{ route('alumnos.eliminar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'nacimiento'] ) }}"
                                data-tipo="Acta de Nacimiento">
                            <i class="bx bxs-trash"></i>
                        </button>
                    @endif
                </div>
            </div>
            <!-- Certificado Médico -->
            <div class="col-md-4 col-12">
                <label class="control-label">Certificado Médico</label>
                <div class="input-group">
                    <input class="form-control" type="file" name="ArchMedico">
                    @if ($datos->arch_certificado_medico_alum)
                        <a href="{{ route('alumnos.descargar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'medico'] )  }}" class="btn btn-outline-primary" ><i class="bx bxs-cloud-download"></i></a>
                        <button type="button" class="btn btn-outline-danger btn-eliminar-documento"
                                data-url="{{ route('alumnos.eliminar.documento',  ['id' => $datos->codigo_alum, 'tipo'=> 'medico'] ) }}"
                                data-tipo="Certificado Médico">
                            <i class="bx bxs-trash"></i>
                        </button>
                    @endif
                </div>
            </div>
            <script>
            $(document).ready(function() {
                // Manejar eliminación de documentos con SweetAlert
                $(document).on('click', '.btn-eliminar-documento', function(e) {
                    e.preventDefault();
                    const url = $(this).data('url');
                    const tipoDocumento = $(this).data('tipo');
                    const boton = $(this);
                    Swal.fire({
                        title: '¿Está seguro?',
                        text: `¿Desea eliminar el documento de ${tipoDocumento}?`,
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#d33',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Sí, eliminar',
                        cancelButtonText: 'Cancelar',
                        showLoaderOnConfirm: true,
                        preConfirm: () => {
                            return fetch(url, {
                                method: 'GET',
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest',
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                }
                            })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Error en la respuesta del servidor');
                                }
                                return response.json();
                            })
                            .catch(error => {
                                Swal.showValidationMessage(`Error: ${error.message}`);
                            });
                        },
                        allowOutsideClick: () => !Swal.isLoading()
                    }).then((result) => {
                        if (result.isConfirmed) {
                            Swal.fire({
                                title: '¡Eliminado!',
                                text: `El documento de ${tipoDocumento} ha sido eliminado correctamente.`,
                                icon: 'success',
                                timer: 2000,
                                showConfirmButton: false
                            }).then(() => {
                                // Recargar la página para actualizar la vista
                                window.location.reload();
                            });
                        }
                    });
                });
            });
            </script>
            <h5 class="card-title p-3">Datos del Grupo</h5>
            <div class="col-md-12 col-12">
                <label class="control-label">Grupo</label>
                <select class="form-select" name="grupo">
                    <option value="{{ $datos->id_grupo_alum }}">{{ $datos->grupo_alum }}</option>
                    @foreach ($grupos as $grupo)
                        <option value="{{ $grupo->id }}">{{ $grupo->nombre_grup }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Horario de entrada</label>
                <input class="form-control" type="time"  value="{{ $datos->horario_inicio_grup }}" disabled>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Horario de salida</label>
                <input class="form-control" type="time"  value="{{ $datos->horario_termino_grup }}" disabled>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Fecha de inicio</label>
                <input class="form-control" type="date"  value="{{ $datos->inicio_grup }}" disabled>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Días de clases</label>
                @if($datos->dias_grup)
                    @php
                        $dias = json_decode($datos->dias_grup, true);
                        if (is_array($dias)) {
                            echo '<ul class="list-unstyled m-0">';
                            foreach ($dias as $dia) {
                                echo '<li><i class="fas fa-calendar-day text-primary me-1"></i>' . $dia . '</li>';
                            }
                            echo '</ul>';
                        }
                    @endphp
                @endif
            </div>
            <h5 class="card-title p-3">Datos del Curso</h5>
            <div class="col-md-6 col-12">
                <label class="control-label">Cursos</label>
                <select class="form-select" name="curso">
                    <option value="{{ $datos->id_curso_alum }}">{{ $datos->curso_alum }}</option>
                    @foreach ($cursos as $curso)
                        <option value="{{ $curso->id }}">{{ $curso->clave_curs }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-6 col-12">
                <label class="control-label">Nombre del curso</label>
                <input class="form-control" type="text"  value="{{ $datos->nombre_curs }}" disabled>
            </div>
            <div class="col-md-12 col-12">
                <label class="control-label">Pagos del curso</label>
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>Concepto</th>
                                <th>Costo</th>
                                <th>Estado</th>
                                <th>Marcar como Pagado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $pagos = json_decode($datos->pagos_alum, true);
                            @endphp
                            @foreach($pagos as $index => $pago)
                            <tr>
                                <td>{{ $pago['concepto'] }}</td>
                                <td><input type="number" class="form-control" name="pagos[{{ $index }}][costo]" value="{{ $pago['costo'] }}" step="0.01" min="0"></td>
                                <td>{{ $pago['estatus'] }}</td>
                                <td class="text-center">
                                    <div class="form-check">
                                        <input type="checkbox"
                                                class="form-check-input"
                                                name="pagos[{{ $index }}][pagado]"
                                                value="1"
                                                {{ $pago['estatus'] === 'Pagado' ? 'checked' : '' }}>
                                        <input type="hidden" name="pagos[{{ $index }}][concepto]" value="{{ $pago['concepto'] }}">
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-12 col-12 mt-2">
                <button type="submit" class="btn btn-success"><i class="bx bx-save"></i> Guardar</button>
                <a href="{{ route('alumnos.index')  }}" class="btn btn-danger" ><i class="bx bxs-caret-left-circle"></i> Cancelar</a>
            </div>
        </div>
        </form>
    </div>
</div>
{{-- <div class="card">
    <div class="card-body">
        <label class="control-label">Anticipos</label>
        <div class="mb-3">
            <button type="button" class="btn btn-success mt-2" data-bs-toggle="modal" data-bs-target="#crear">
            <i class="fa-solid fa-money-bill-trend-up"></i> Agregar anticipo
            </button>
            <button type="button" class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#asignar">
            <i class="fa-solid fa-money-bill-transfer"></i> Asignar a anticipo a pagos
            </button>
        </div>
        <div class="modal fade" id="crear" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Agregar Anticipo</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('alumnos.anticipos.store', $datos->codigo_alum) }}" method="POST">
                        @csrf
                        <div class="modal-body">
                                <label class="control-label">Folio</label>
                                <input type="text" class="form-control" name="folio" required>
                                <label class="control-label">Concepto</label>
                                <input type="text" class="form-control" name="concepto" required>
                                <label class="control-label">Fecha</label>
                                <input type="date" class="form-control" name="fecha" required>
                                <label class="control-label">Cantidad</label>
                                <div class="input-group mb-3">
                                <span class="input-group-text">$</span>
                                <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" name="cantidad" required pattern="^[0-9]+([.,][0-9]{1,2})?$" inputmode="decimal" title="Solo números, comas o puntos decimales">
                                <span class="input-group-text">.00</span>
                                </div>
                                <small>Ejemplo válido: 2500.50 - Sin comas</small>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success"><i class="bx bx-save"></i> Guardar</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bx  bxs-x-circle"></i> Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="modal fade" id="asignar" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Asignar anticipo a pagos</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('alumnos.anticipos.asignar', $datos->codigo_alum) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="modal-body">
                            @php
                                $anticipos = collect(json_decode($datos->anticipos_alum, true) ?? [])->where('estatus', 'Resguardado')->values()->all();
                                $totalAnticipos = collect($anticipos)->sum('cantidad');
                            @endphp
                            <div class="mb-3">
                                <label class="control-label fw-bold">Total de anticipos:</label>
                                <input type="text" class="form-control" id="totalAnticipos" value="${{ number_format($totalAnticipos, 2) }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label class="control-label">Selecciona los pagos a los que deseas asignar el anticipo</label>
                                <div class="table-responsive">
                                    <table class="table table-bordered align-middle">
                                        <thead>
                                            <tr>
                                                <th>Seleccionar</th>
                                                <th>Fecha de pago</th>
                                                <th>Monto del pago</th>
                                                <th>Monto aplicado</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($pagosCurso as $pagoCurso)
                                                @if ($pagoCurso['estatus_pago'] === 'Pendiente por pagar' || $pagoCurso['estatus_pago'] === 'Vencido')
                                                    <tr>
                                                        <td>
                                                            <input type="checkbox" class="form-check-input pago-checkbox" data-index="{{ $loop->index }}">
                                                            <input type="hidden" name="pagos[{{ $loop->index }}][codigo_pago]" value="{{ $pagoCurso['codigo_pago'] }}">
                                                        </td>
                                                        <td>{{ $pagoCurso['fecha_pago'] }}</td>
                                                        <td>${{ number_format($pagoCurso['cantidad_pago'], 2) }}</td>
                                                        <td>
                                                            <input type="number" min="0" step="0.01" class="form-control monto-aplicar" name="pagos[{{ $loop->index }}][monto_aplicar]" data-index="{{ $loop->index }}" readonly>
                                                        </td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                <div class="mt-2">
                                    <span class="fw-bold">Total aplicado: $<span id="totalAplicado">0.00</span></span>
                                    <span class="fw-bold ms-3 text-danger" id="alertaAnticipo" style="display:none;">¡Ya no puedes asignar más anticipos!</span>
                                    <div class="alert alert-info mt-2">
                                        <i class="fa-solid fa-info-circle"></i> Las filas en <span class="text-danger">rojo</span> indican pagos que no pueden ser seleccionados por saldo insuficiente.
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success"><i class="bx bx-save"></i> Guardar</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bx  bxs-x-circle"></i> Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Folio</th>
                        <th>Fecha de pago</th>
                        <th>Concepto</th>
                        <th>Ingreso Inicial</th>
                        <th>Restante</th>
                        <th>Estatus</th>
                        <th>Eliminar</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                        $anticipos = collect(json_decode($datos->anticipos_alum, true) ?? [])
                            ->where('estatus', '<>', 'Eliminado')
                            ->sortByDesc(function($item) {
                                // Primero los 'Resguardado', luego 'Gastado'
                                return $item['estatus'] === 'Resguardado' ? 2 : ($item['estatus'] === 'Gastado' ? 1 : 0);
                            })
                            ->sortByDesc('fecha')
                            ->values()
                            ->all();
                    @endphp
                    @foreach($anticipos as $index => $anticipo)
                        <tr>
                            <td>{{ $anticipo['folio'] ?? '' }}</td>
                            <td>{{ date("d/m/Y", strtotime($anticipo['fecha'])) ?? '' }}</td>
                            <td>{{ $anticipo['concepto'] ?? '' }}</td>
                            <td>{{ "$" . number_format($anticipo['inicial'], 2) ?? '' }}</td>
                            <td>{{ "$" . number_format($anticipo['cantidad'], 2) ?? '' }}</td>
                            <td>
                                @if ($anticipo['estatus'] === 'Resguardado')
                                    <span class="badge bg-success">{{ $anticipo['estatus'] }}</span>
                                @elseif ($anticipo['estatus'] === 'Gastado')
                                    <span class="badge bg-primary">{{ $anticipo['estatus'] }}</span>
                                @endif
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger btn-sm btn-eliminar-anticipo">
                                    <i class="bx bxs-trash"></i>
                                </button>
                                <form action="{{ route('alumnos.anticipos.destroy', [$datos->codigo_alum, $anticipo['codigo']]) }}" class="d-none form-eliminar-anticipo">
                                    @csrf
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div> --}}
@if(auth()->user()->can('Pagos pendientes - Visor') || auth()->user()->can('Pagos pendientes - Editor'))
<div class="card">
    <div class="card-body">
        <h5 class="card-title p-3">Pagos Generales</h5>
        @if(auth()->user()->can('Pagos - Eliminador'))
            <div class="mb-3 d-flex gap-2">
                <form action="{{ route('alumnos.pagos.eliminar', $datos->codigo_alum) }}" method="POST"
                enctype="multipart/form-data" class="form-delete m-0">
                @csrf
                <button class="btn btn-danger" type="submit" id="btn">
                    <i class="bx  bxs-trash"></i> Eliminar todos los pagos
                </button>
                </form>
                <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#crearPagos">
                <i class="fa-solid fa-money-bill-trend-up"></i> Agregar Pagos
                </button>
            </div>
        <div class="modal fade" id="crearPagos" tabindex="-1">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Agregar Pagos</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('alumnos.pagos.update', $datos->codigo_alum) }}" method="POST">
                        @csrf
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6 col-12">
                                    <label class="control-label is-required">Costo de su colegiatura</label>
                                    <input id="input-currency" class="form-control input-mask text-left cantidad"
                                        data-inputmask="'alias': 'numeric', 'groupSeparator': '', 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                        name="costo">
                                        <small class="form-text text-muted">Ingresa el costo de su colegiatura sin penalización.</small>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label">Cantidad total con penalización</label>
                                    <input id="input-currency" class="form-control input-mask text-left cantidad"
                                    data-inputmask="'alias': 'numeric', 'groupSeparator': '', 'digits': 2, 'digitsOptional': false, 'prefix': '$ ', 'placeholder': '0'"
                                    name="penalizacion">
                                    <small class="form-text text-muted">Ingresa la cantidad total con penalización si no aplica dejar en blanco.</small>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label is-required">Fecha de inicio de pagos</label>
                                    <input class="form-control" type="date" name="fecha_inicio_pagos" required>
                                    <small class="form-text text-muted">Ingresa la fecha de inicio de pagos.</small>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label is-required">Periodo de pagos</label>
                                    <select name="periodo_pagos" class="form-select" id="">
                                        <option value="">Selecciona un periodo</option>
                                        <option value="Semanal">Semanal</option>
                                        <option value="Quincenal">Quincenal</option>
                                        <option value="Mensual">Mensual</option>
                                    </select>
                                    <small class="form-text text-muted">Ingresa el periodo de pagos.</small>
                                </div>
                                <div class="col-md-6 col-12">
                                    <label class="control-label is-required">Número de pagos</label>
                                    <input class="form-control" type="number" name="numero_pagos" min="1" required>
                                    <small class="form-text text-muted">Ingresa el número de pagos.</small>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success"><i class="bx bx-save"></i> Guardar</button>
                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i
                                    class="bx  bxs-x-circle"></i> Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        @endif
        <div class="col-md-12 col-12">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>{{ "#" }}</th>
                            <th>Fecha</th>
                            <th>Cantidad</th>
                            <th>Penalización</th>
                            <th>Estatus</th>
                            <th>Marcar como Pagado</th>
                            <th>Fecha {{ "real del pago" }}</th>
                            <th>Folio de Pago</th>
                            <th>Método de Pago</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($pagosCurso as $index => $pagoCurso)
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>
                                <div class="d-flex align-items-center justify-content-between" style="min-width: 200px;">
                                    <span>{{ $pagoCurso['fecha_pago'] }}</span>
                                    <button type="button" class="btn btn-outline-success btn-sm ms-1" data-bs-toggle="modal" data-bs-target="#editar{{ $pagoCurso['codigo_pago'] }}">
                                        <i class="bx bxs-edit"></i>
                                    </button>
                                    @if ($pagoCurso['estatus_pago'] === 'Pagado')
                                        <a href="{{ route('pagos.descargar.comprobante', $pagoCurso['codigo_pago']) }}" class="btn btn-outline-primary btn-sm ms-1" title="Descargar comprobante" target="_blank">
                                            <i class="bx bx-download"></i>
                                        </a>
                                    @endif
                                    @if(auth()->user()->can('Pagos - Editor'))
                                        <form action="{{ route('pagos.eliminar', $pagoCurso['codigo_pago']) }}"  class="form-delete">
                                            @csrf
                                            <button class="btn btn-outline-danger btn-sm ms-1" title="Eliminar pago"  type="submit" id="btn" >
                                                <i class="bx bxs-trash"></i>
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                            <td>${{ $pagoCurso['cantidad_pago'] }}</td>
                            <td>
                                @if(empty($pagoCurso['penalizacion_pago']) || $pagoCurso['penalizacion_pago'] == 0)
                                    N/A
                                @else
                                    ${{ $pagoCurso['penalizacion_pago'] }}
                                @endif
                            </td>
                            <td>{{ $pagoCurso['estatus_pago'] }}</td>
                            <td class="text-center">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input marcar-pago" data-pago-id="{{ $pagoCurso['codigo_pago'] }}" {{ $pagoCurso['estatus_pago'] === 'Pagado' ? 'checked' : '' }}>
                                </div>
                            </td>
                            <td><input type="date" class="form-control fecha_paco" data-pago-id="{{ $pagoCurso['codigo_pago'] }}" placeholder="Ingrese la fecha" value="{{ !empty($pagoCurso['fecha_paco']) ? date('Y-m-d', strtotime($pagoCurso['fecha_paco'])) : '' }}"></td>
                            <td><input type="text" class="form-control folio-pago" data-pago-id="{{ $pagoCurso['codigo_pago'] }}" placeholder="Ingrese el folio" value="{{ $pagoCurso['payment_id_paco'] }}"></td>
                            <td>
                                <select class="form-select metodo-pago" data-pago-id="{{ $pagoCurso['codigo_pago'] }}" >
                                    @if ($pagoCurso['payment_type_paco'])
                                    <option value="{{$pagoCurso['payment_type_paco']}}">{{$pagoCurso['payment_type_paco']}}</option>
                                    @endif
                                    <option value="">Selecciona el método de pago</option>
                                    <option value="Pago en efectivo">Pago en efectivo</option>
                                    <option value="Pago con tarjeta">Pago con tarjeta</option>
                                </select>
                            </td>
                        </tr>
                        <div class="modal fade" id="editar{{ $pagoCurso['codigo_pago'] }}" tabindex="-1">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Editar Pago</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <form action="{{ route('alumnos.cambio.pago.fecha', $pagoCurso['codigo_pago']) }}" method="POST">
                                        @csrf
                                        <div class="modal-body">
                                            <div class="row mb-3">
                                                <div class="col-md-12">
                                                    <label class="control-label is-required">Fecha de pago</label>
                                                    <input class="form-control" value="{{ $pagoCurso['fecha_pago'] }}" type="date" name="fecha_pago" required>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label class="control-label">Monto del pago</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">$</span>
                                                        <input class="form-control" value="{{ $pagoCurso['cantidad_pago'] }}" type="number" step="0.01" min="0" name="cantidad_pago"
                                                            {{ auth()->user()->can('Pagos - Editor') ? '' : 'readonly' }}>
                                                    </div>
                                                    <small class="text-muted">El monto solo puede ser editado por usuarios autorizados</small>
                                                </div>
                                                <div class="col-md-6">
                                                    <label class="control-label">Monto por penalización</label>
                                                    <div class="input-group">
                                                        <span class="input-group-text">$</span>
                                                        <input class="form-control" value="{{ $pagoCurso['penalizacion_pago'] }}" type="number" step="0.01" min="0" name="penalizacion_pago"
                                                            {{ auth()->user()->can('Pagos - Editor') ? '' : 'readonly' }}>
                                                    </div>
                                                    <small class="text-muted">La penalización solo puede ser editada por usuarios autorizados</small>
                                                </div>
                                            </div>
                                            @if(auth()->user()->can('Pagos - Editor'))
                                            <div class="alert alert-info mt-3">
                                                <i class="bx bx-info-circle"></i> Como usuario autorizado, puedes editar todos los campos de este pago.
                                            </div>
                                            @else
                                            <div class="alert alert-warning mt-3">
                                                <i class="bx bx-lock-alt"></i> Solo puedes modificar la fecha de pago. Los montos requieren autorización especial.
                                            </div>
                                            @endif
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" class="btn btn-success"><i class="bx bx-save"></i> Actualizar</button>
                                            <button type="button" class="btn btn-danger" data-bs-dismiss="modal"><i class="bx bxs-x-circle"></i> Cerrar</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endif
    <script>
        $(document).on('click', '.btn-eliminar-anticipo', function(e) {
            e.preventDefault();
            let form = $(this).closest('td').find('.form-eliminar-anticipo');
            Swal.fire({
                title: '¿Estás seguro de eliminar este anticipo?',
                text: "¡Esta acción no se puede deshacer!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });
        });
        $(document).ready(function () {
            // Función modificada para manejar la penalización
            $('.marcar-pago, .folio-pago, .metodo-pago, .fecha_paco').on('change', function () {
                const elemento = $(this);
                const pagoId = elemento.closest('tr').find('.marcar-pago').data('pago-id');
                const folio = $(`.folio-pago[data-pago-id="${pagoId}"]`).val();
                const metodoPago = $(`.metodo-pago[data-pago-id="${pagoId}"]`).val();
                const fechaPago = $(`.fecha_paco[data-pago-id="${pagoId}"]`).val();
                const checked = $(`.marcar-pago[data-pago-id="${pagoId}"]`).is(':checked');
                const url = "{{ route('alumnos.pago', ':id') }}".replace(':id', pagoId);
                // Obtener la penalización y el estado desde las columnas de la tabla
                const fila = elemento.closest('tr');
                const cantidadTexto = fila.find('td:eq(2)').text().replace('$', '').trim();
                const penalizacionTexto = fila.find('td:eq(3)').text();
                const estatusPago = fila.find('td:eq(4)').text().trim();
                const tienePenalizacion = penalizacionTexto !== 'N/A';
                const penalizacionValor = tienePenalizacion ? penalizacionTexto.replace('$', '').trim() : 0;
                const estaVencido = estatusPago === 'Vencido';
                // Verificar si debe preguntar por la penalización (solo si está vencido)
                if (checked && tienePenalizacion && parseFloat(penalizacionValor) > 0 && estaVencido) {
                    // Mostrar pregunta sobre aplicar penalización con botón de cancelar
                    Swal.fire({
                        title: '¿Aplicar penalización?',
                        text: `Este pago tiene una penalización de $${penalizacionValor}. ¿Deseas aplicarla?`,
                        icon: 'question',
                        showCancelButton: true,
                        showCloseButton: true,
                        confirmButtonColor: '#08c313',
                        cancelButtonColor: '#1b7fb8',
                        confirmButtonText: 'Sí, aplicar penalización',
                        cancelButtonText: 'No, solo el monto normal',
                        showDenyButton: true,
                        denyButtonText: 'Cancelar',
                        denyButtonColor: '#d33000'
                    }).then((result) => {
                        if (result.isDenied) {
                            // Si se presiona "Cancelar", revertir el checkbox
                            $(`.marcar-pago[data-pago-id="${pagoId}"]`).prop('checked', !checked);
                            return; // No hacer nada más
                        } else if (result.isConfirmed) {
                            // "Sí, aplicar penalización"
                            realizarPago(url, pagoId, folio, metodoPago, checked, true);
                        } else {
                            // "No, solo el monto normal"
                            realizarPago(url, pagoId, folio, metodoPago, checked, false);
                        }
                    });
                } else {
                    // Si no está vencido o no tiene penalización, proceder normalmente
                    realizarPago(url, pagoId, folio, metodoPago, checked, false);
                }
            });
            // Función para realizar el pago con AJAX
            function realizarPago(url, pagoId, folio, metodoPago, checked, aplicarPenalizacion) {
                const fechaPago = $(`.fecha_paco[data-pago-id="${pagoId}"]`).val();
                $.ajax({
                    url: url,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        folio: folio,
                        metodo_pago: metodoPago,
                        checked: checked,
                        aplicar_penalizacion: aplicarPenalizacion,
                        fecha_paco: fechaPago // Agregamos este campo
                    },
                    success: function (response) {
                        if (response.success) {
                            // Actualizar la interfaz
                            const fila = $(`.marcar-pago[data-pago-id="${pagoId}"]`).closest('tr');
                            fila.find('td:eq(4)').text(response.status);
                            Swal.fire({
                                title: "Pago actualizado",
                                text: response.message,
                                icon: "success",
                                timer: 2000,
                                showConfirmButton: false
                            });
                            // Si es necesario, actualizar cualquier otro elemento en la UI
                            if (response.total) {
                                fila.find('td:eq(2)').text('$' + response.total);
                            }
                        } else {
                            Swal.fire({
                                title: "Error",
                                text: response.message,
                                icon: "error"
                            });
                        }
                    },
                    error: function () {
                        Swal.fire({
                            title: "Error",
                            text: "Ocurrió un error al procesar el pago.",
                            icon: "error"
                        });
                    }
                });
            }
        });
        document.addEventListener('DOMContentLoaded', function () {
            const totalAnticipos = parseFloat('{{ isset($totalAnticipos) ? $totalAnticipos : 0 }}');
            let totalAplicado = 0;
            // Convertir los pagos a un formato que JavaScript pueda usar mejor
            let pagos = [];
            @foreach($pagosCurso as $index => $pagoCurso)
                @if ($pagoCurso['estatus_pago'] === 'Pendiente por pagar' || $pagoCurso['estatus_pago'] === 'Vencido')
                    pagos.push({
                        index: {{ $index }},
                        codigo_pago: '{{ $pagoCurso['codigo_pago'] }}',
                        cantidad_pago: parseFloat('{{ $pagoCurso['cantidad_pago'] }}')
                    });
                @endif
            @endforeach
            function recalcularMontos() {
                let saldo = totalAnticipos;
                totalAplicado = 0;
                // Primero, limpiar todos los inputs y estilos
                document.querySelectorAll('.monto-aplicar').forEach(function(input) {
                    input.value = '';
                    input.closest('tr').classList.remove('table-primary', 'table-danger');
                });
                // Habilitar todos los checkboxes primero
                document.querySelectorAll('.pago-checkbox').forEach(function(checkbox) {
                    checkbox.disabled = false;
                });
                // Recorrer los checkboxes marcados y asignar montos
                document.querySelectorAll('.pago-checkbox:checked').forEach(function(checkbox) {
                    const index = checkbox.getAttribute('data-index');
                    const input = document.querySelector(`.monto-aplicar[data-index="${index}"]`);
                    const pagoInfo = pagos.find(p => p.index.toString() === index);
                    if (!pagoInfo) return;
                    let montoPago = pagoInfo.cantidad_pago;
                    if (saldo >= montoPago) {
                        // Hay suficiente saldo para cubrir este pago
                        input.value = montoPago.toFixed(2);
                        totalAplicado += montoPago;
                        saldo -= montoPago;
                        input.closest('tr').classList.add('table-primary');
                    } else if (saldo > 0) {
                        // Hay saldo pero no es suficiente para todo el pago
                        input.value = saldo.toFixed(2);
                        totalAplicado += saldo;
                        input.closest('tr').classList.add('table-warning');
                        saldo = 0;
                    } else {
                        // No hay saldo, desmarcar
                        checkbox.checked = false;
                        input.value = '';
                    }
                });
                // Actualizar el total aplicado
                document.getElementById('totalAplicado').textContent = totalAplicado.toFixed(2);
                // Actualizar el estado del alerta
                document.getElementById('alertaAnticipo').style.display = (saldo <= 0 && totalAplicado > 0) ? 'inline' : 'none';
                // Deshabilitar los checkboxes no marcados si ya no hay saldo suficiente
                document.querySelectorAll('.pago-checkbox:not(:checked)').forEach(function(checkbox) {
                    const index = checkbox.getAttribute('data-index');
                    const pagoInfo = pagos.find(p => p.index.toString() === index);
                    if (!pagoInfo) return;
                    if (saldo < pagoInfo.cantidad_pago) {
                        checkbox.disabled = true;
                        checkbox.closest('tr').classList.add('table-danger');
                    }
                });
            }
            // Inicialización y eventos
            document.querySelectorAll('.pago-checkbox').forEach(function(checkbox) {
                checkbox.addEventListener('change', function() {
                    recalcularMontos();
                    // Mostrar mensaje cuando no hay saldo suficiente
                    if (!this.checked && this.disabled) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Saldo insuficiente',
                            text: 'No hay suficiente anticipo para cubrir este pago.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                });
            });
            // Calcular inicialmente los montos
            //recalcularMontos();
        });
    </script>
@endsection
@endif