@extends('layouts.simple')

@section('styles')
<link rel="stylesheet" href="{{asset('plugin/datatable/css/dataTables.bootstrap4.min.css')}}">
@endsection


@section('scripts')
<script src="{{asset('plugin/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugin/datatable/js/dataTables.bootstrap4.min.js')}}"></script>

<script>
   $(document).ready(function() {
      $('#table_id').DataTable({});
   });
</script>
@endsection

@section('content')
<div class="container mb-5 mt-3">
   <div class="row">
      <div class="col">
         <div class="card">
            <div class="card-body">

               <div class="d-flex justify-content-md-around">
                  <h4 class="card-title">ESTUDIANTES - TOTAL DE DEUDA: Q. {{number_format($td, 2)}}</h4>

                  <div><!-- Button trigger modal -->
                     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#articulos11">
                        NUEVO ESTUDIANTE
                     </button>

                     <!-- Modal -->
                     <div class="modal fade" id="articulos11" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
                        <div class="modal-dialog" role="document">
                           <div class="modal-content">
                              <div class="modal-header">
                                 <h5 class="modal-title">NUEVO ESTUDIANTE</h5>
                                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                 </button>
                              </div>
                              <form action="{{route('estu.store')}}" method="post">
                                 @csrf
                                 <div class="modal-body">

                                    <div class="form-group">
                                       <label for="nombre">NOMBRE</label>
                                       <input type="text" class="form-control" name="nombre">
                                    </div>

                                    <div class="form-group">
                                       <label for="">GRADO</label>
                                       <select class="form-control" name="grado" id="">
                                          <option value="">SELECCIONE NOMBRE DE GRADO </option>
                                          <option value="PRE KINDER">PRE KINDER</option>
                                          <option value="KINDER">KINDER</option>
                                          <option value="PREPARATORIA">PREPARATORIA</option>

                                          <option value="PRIMERO PRIMARIA">PRIMERO PRIMARIA</option>
                                          <option value="SEGUNDO PRIMARIA">SEGUNDO PRIMARIA</option>
                                          <option value="TERCERO PRIMARIA">TERCERO PRIMARIA</option>
                                          <option value="CUARTO PRIMARIA">CUARTO PRIMARIA</option>
                                          <option value="QUINTO PRIMARIA">QUINTO PRIMARIA</option>
                                          <option value="SEXTO PRIMARIA">SEXTO PRIMARIA</option>

                                          <option value="PRIMERO BASICO">PRIMERO BASICO</option>
                                          <option value="SEGUNDO BASICO">SEGUNDO BASICO</option>
                                          <option value="TERCERO BASICO">TERCERO BASICO</option>

                                          <option value="CUARTO BACHILLERATO EN CIENCIAS Y LETRAS">CUARTO BACHILLERATO EN CIENCIAS Y LETRAS</option>
                                          <option value="CUARTO BACHILLERATO EN FINANZAS">CUARTO BACHILLERATO EN FINANZAS</option>
                                          <option value="QUINTO BACHILLERATO EN CIENCIAS Y LETRAS">QUINTO BACHILLERATO EN CIENCIAS Y LETRAS</option>
                                          <option value="QUINTO BACHILLERATO EN FINANZAS">QUINTO BACHILLERATO EN FINANZAS</option>
                                          <option value="PRIMER AÑO DE BASICO POR MADUREZ">PRIMER AÑO DE BASICO POR MADUREZ</option>
                                          <option value="SEGUNDO AÑO DE BASICO POR MADUREZ">SEGUNDO AÑO DE BASICO POR MADUREZ</option>
                                          <option value="BACHILLERATO POR MADUREZ">BACHILLERATO POR MADUREZ</option>

                                       </select>
                                    </div>

                                    <div class="form-group">
                                       <label for="">CREDITO DIARIO</label>
                                       <input type="number" step="any" class="form-control" name="diario">
                                    </div>

                                 </div>
                                 <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">CERRAR</button>
                                    <button type="submit" class="btn btn-primary"><i class="fas fa-save    "></i> GUARDAR</button>
                              </form>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>

            <table class="table" id="table_id">
               <thead>
                  <tr>
                     <th>NOMBRE</th>
                     <th>GRADO</th>
                     <th>DEUDA</th>
                     <th></th>
                  </tr>
               </thead>
               <tbody>
                  @foreach ($data as $d)


                  <tr>
                     <td>{{$d->nombre}}</td>
                     <td>{{$d->grado}}</td>
                     <td
                     
                     style="color: "
                     >Q. {{number_format($d->t_deuda, 2)}}</td>
                     <th>
                        <a class="btn btn-primary" href="{{route('estu.show', $d)}}" role="button"><i class="fa fa-eye" aria-hidden="true"></i></a>
                     </th>
                  </tr>
                  @endforeach
               </tbody>
            </table>
         </div>
      </div>
   </div>
</div>
</div>
@endsection