@extends('layouts.admin')
@section('styles')
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css')}}">
@endsection

@section('content')
<div class="continer-fluid">
   <div class="row">
      <div class="col">
         <div class="card">

            <div class="card-body">

               <div class="d-flex justify-content-around">
                  <div>
                     <h4 class="card-title">PAGOS REALIZADOS MES 03</h4>
                  </div>
                  <div>
                     <!-- Button trigger modal -->
                     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modelId">
                        NUEVO REGISTRO
                     </button>
                  </div>
               </div>

               <div class="table-fluid">
                  <table class="table">
                     <thead>
                        <tr>
                           <th>#</th>
                           <th>INQUILINO</th>
                           <th>DESCRIPCION</th>
                           <th>HABITACION</th>
                           <th>DIA DE PAGO</th>
                           <th>MENSUALIDAD</th>
                           <th>TOTAL PAGADO</th>
                           <th>FECHA DE REGISTRO</th>
                           <th></th>
                        </tr>
                     </thead>
                     <tbody>
                        @foreach ($pagos as $i)
                        <tr>
                           <td>{{$i->id}}</td>
                           <td>{{$i->nombre}}</td>
                           <td>{{$i->descripcion}}</td>

                           <td>{{$i->h}}</td>
                           <td>{{$i->dia}}</td>
                           <td>Q. {{number_format($i->mensualidad, 2)}}</td>
                           <td>Q. {{number_format($i->total, 2)}}</td>

                           <td>{{$i->created_at}}</td>
                           <td>
                              <form action="{{route('pagos.pagos_delete', $i->id)}}" method="post">
                                 <a class="btn btn-dark" href="{{route('pagos.printRecibo', $i->id)}}" role="button"><i class="fa fa-print" aria-hidden="true"></i></a>
                                 @method('Delete')
                                 @csrf
                                 <button type="submit" class="btn btn-danger btn-xs" onclick="return confirm('Esta Seguro de Eliminar?')">
                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                 </button>
                              </form>
                           </td>
                        </tr>
                        @endforeach

                     </tbody>
                  </table>
               </div>



               <!-- Modal -->
               <div class="modal fade" id="modelId" 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 PAGO</h5>
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                           </button>
                        </div>
                        <form action="{{route('pagos.pagos_store')}}" method="post">
                           @csrf
                           <div class="modal-body">

                              <select name="inquilino_habitacion_id" id="data">
                                 @foreach ($inqui as $i )
                                 <option value="{{$i->id}}">{{$i->inquilino->nombre}}, Habi.{{$i->h}}, Q.{{number_format($i->mensualidad, 2)}}</option>
                                 @endforeach
                              </select>


                              <div class="form-group">
                                 <label for="">MENSUALIDAD</label>
                                 <input type="number" step="any" class="form-control" name="total">
                              </div>

                              <div class="form-group">
                                 <label for="">DESCRIPCION</label>
                                 <textarea class="form-control" name="descripcion" id="" rows="3"></textarea>
                              </div>


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

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

@endsection

@section('scripts')
<script src="{{asset('plugins/slim-select/slimselect.min.js')}}"></script>
<script>
   new SlimSelect({
      select: '#data'
   });
</script>
@endsection