@extends('layouts.admin')

@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</h4>
                  </div>
                  <div>
                     <!-- Button trigger modal -->
                     <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modelId">
                        NUEVO INQUILINOS
                     </button>
                  </div>
               </div>

               <div class="table-fluid">
                  <table class="table">
                     <thead>
                        <tr>
                           <th>#</th>
                           <th>NOMBRE</th>
                           <th>EDAD</th>
                           <th>OCUPACION</th>
                           <th>DESCRIPCION</th>
                           <th>FECHA DE REGISTRO</th>
                           <th></th>
                        </tr>
                     </thead>
                     <tbody>
                        @foreach ($inqui as $i)
                        <tr>
                           <td>{{$i->id}}</td>
                           <td>{{$i->nombre}}</td>
                           <td>{{$i->edad}}</td>
                           <td>{{$i->ocupacion}}</td>
                           <td>{{$i->description}}</td>
                           <td>{{$i->created_at}}</td>
                           <td>
                              <form action="{{route('inquilinos.delete', $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('inquilinos.store')}}" method="post">
                           @csrf
                           <div class="modal-body">

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

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

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

                              <div class="form-group">
                                 <label for="">DESCRIPCION</label>
                                 <textarea class="form-control" name="description" 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