@extends('layouts.admin')

@section('content')

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


               <div class="table-reponsive">
                  <table class="table">
                     <thead>
                        <tr>
                           <th>#</th>
                           <th>HABITACION</th>
                           <th>ARTICULO</th>
                           <th>CANTIDAD</th>
                           <th>PRECIO</th>
                           <th>FECHA DE RTEGISTRO</th>
                           <th></th>
                        </tr>
                     </thead>
                     <tbody>
                        @foreach ($articulos as $a)
                        <tr>
                           <td>{{$a->id}}</td>
                           <td>{{$a->h}}</td>
                           <td>{{$a->articulo}}</td>
                           <td>{{$a->cantidad}}</td>
                           <td>Q. {{number_format($a->precio, 2)}}</td>
                           <td>{{$a->created_at}}</td>
                           <td>
                              <form action="{{route('habi.delete', $a->id)}}" method="post">
                                 @method('DELETE')
                                 @csrf
                                 <button type="submit" class="btn btn-danger" onclick="return confirm('Esta Seguro de eliminar?')"><i class="fa fa-trash" aria-hidden="true"></i></button>
                              </form>
                           </td>
                        </tr>
                        @endforeach
                     </tbody>
                  </table>
               </div>

            </div>
         </div>

      </div>


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

                     <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="">ARTICULO</label>
                        <input type="text" class="form-control" name="articulo">
                     </div>

                     <div class="form-group">
                        <label for="">CANTIDAD</label>
                        <input type="number" class="form-control" name="cantidad">
                     </div>
                     <div class="form-group">
                        <label for="">PRECIO</label>
                        <input type="number" step="any" class="form-control" name="precio">
                     </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> GAURDAR</button>
                  </div>
               </form>
            </div>
         </div>
      </div>
   </div>
</div>

@endsection