@extends('template.main')

@section('titulo','Historico de Abonos del alumno: '.$alumno->nombre)

@section('cabecera')

@endsection

@section('contenido')

    <div class="row" style="margin: 10px;">

            <div class="col-lg-12">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fas fa-home"></i> Inicio </a></li>
                        <li class="breadcrumb-item">Abonos</li>
                        <li class="breadcrumb-item active" aria-current="page"><i class="fas fa-user-graduate"></i> {{$alumno->nombre}}</li>
                    </ol>
                </nav>
                <hr>
            </div>
            <div class="col-lg-9">
                <h3 class="contexto"> <i class="fas fa-file-invoice-dollar"></i> Registrar Abono al alumno: {{$alumno->nombre}} {{$alumno->apellidos}}</h3>
            </div>
            <form method="post" action="{{ route('abonos.historico', [$alumno->idalumno,$abono->id]) }}" autocomplete="off">
                @csrf
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-4">
                            <label>Abono</label>
                            <input type="number" name="pagoActual" class="form-control" step="any" min="0" max="9999" required>
                        </div>
                        <div class="col-lg-4">
                            <label>Tipo de pago</label>
                            <select name="tipoPago" class="form-control" required>
                                <option value="">Seleccione una opción</option>
                                @foreach($tiposPagos as $tipoPago)
                                    <option value="{{ $tipoPago->id }}">{{ $tipoPago->nombre }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label>Fecha de recepción</label>
                            <input type="text" id="fecha" name="fechaRecepcion" class="form-control" readonly required>
                            <script>
                                $('#fecha').datepicker({
                                    uiLibrary: 'bootstrap4',
                                    format: 'yyyy-mm-dd',
                                    locale: 'es-es',
                                });
                            </script>
                        </div>
                        <div class="col-lg-12">
                            <br>
                            <button type="submit" class="btn btn-success">Agregar abono</button>

                        </div>
                </div>
                </div>
            </form>
            <div class="col-lg-12">
                <h3 class="contexto"> <i class="fas fa-history"></i> Historico de Abonos del alumno: {{$alumno->nombre}} {{$alumno->apellidos}}</h3>
            </div>
            <div class="col-lg-12">
                <table class="table table-bordered table-hover" style="background: #fff; font-size: 14px">
                    <thead>
                    <th>Concepto de Pago</th>
                    <th>Forma de Pago</th>
                    <th>Total a Pagar</th>
                    <th>Pagado</th>
                    <th>Fecha de Recepción</th>
                    </thead>
                    <tbody>
                    <td>{{$abono->Concepto->concepto}}</td>
                    <td></td>
                    <td>${{number_format($abono->totalPagar,2)}}</td>
                    <td></td>
                    <td>{{$abono->fechaRecepcion}}</td>
                    </tbody>
                </table>
            </div>
    </div>

@endsection