@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">REGISTRO DE INQUILINOS EN HABITACIONES</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>HABITACION</th>
                           <th>DIA DE PAGO</th>
                           <th>MENSUALIDAD</th>
                           <th>FECHA DE REGISTRO</th>
                           <th></th>
                        </tr>
                     </thead>
                     <tbody>
                        @foreach ($data as $i)
                        <tr>
                           <td>{{$i->id}}</td>
                           <td>{{$i->inquilino->nombre}}</td>
                           <td>{{$i->h}}</td>
                           <td>{{$i->dia}}</td>
                           <td>Q. {{number_format($i->mensualidad, 2)}}</td>
                           <td>{{$i->created_at}}</td>
                           <td>
                              <form action="{{route('habi.delete_inquilino_habitacion', $i->id)}}" method="post">
                                 @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">Modal title</h5>
                           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                           </button>
                        </div>
                        <form action="{{route('habi.registro_inquilino_havitacion')}}" method="post">
                           @csrf
                           <div class="modal-body">

                              <select name="inquilino_id" id="data">
                                 @foreach ($inqui as $i )
                                 <option value="{{$i->id}}">{{$i->nombre}}</option>
                                 @endforeach
                              </select>

                              <div class="form-group">
                                 <label for="">HABITACION</label>
                                 <select class="form-control" name="h" id="">
                                    @for ($i = 1; $i <= 20; $i++) <option value="{{$i}}">{{$i}}
                                       </option>
                                       @endfor
                                 </select>
                              </div>

                              <div class="form-group">
                                 <label for="">DIA DE PAGO</label>
                                 <input type="text" class="form-control" name="dia">
                              </div>

                              <div class="form-group">
                                 <label for="">MENSUALIDAD</label>
                                 <input type="text" class="form-control" name="mensualidad">
                              </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