@extends('header.header')
@section('content')

<div class="header bg-primary pb-6  pt-5">
      <div class="container-fluid">
        <div class="header-body">
          <div class="row align-items-center py-4">
            <div class="col-lg-6 col-7">
              <h6 class="h2 text-white d-inline-block mb-0">{{__('items')}}</h6>
              <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                  <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i></a></li>
                  <li class="breadcrumb-item"><a href="/">{{__('Dashboard')}}</a></li>
                  <li class="breadcrumb-item active" aria-current="page">{{__('items table')}}</li>
                </ol>
              </nav>
            </div>
            <div class="col-lg-12">
                  <form method="get" action='{{route("AddItem.Add")}}'>
                      <input type="hidden"  value="{{$category_id}}" name="category_id">
                      <button class="btn btn-sm btn-neutral" type="submit">{{__('New Item')}}+</button>
                  </form>
            </div>
          </div>
        </div>
      </div>
</div>
    <div class="container-fluid mt--6">
      <div class="row">
        <div class="col">
          <div class="card">
            <!-- Card header -->
            <div class="card-header border-0">
              <h3 class="mb-0">items table</h3><br>
                <input class="form-control" id="myInput" type="text" placeholder="Search..">
            </div>
            <!-- Light table -->
            <div class="table-responsive">
              <table class="table align-items-center table-flush">
                <thead class="thead-light">
                    <tr>
                        <th>{{__('Item Image')}}</th>
                        <th>{{__('item name')}} </th>
                        <th>{{__('Price')}}</th>
                        <th>{{__('Price Offer')}}</th>
                        <th>{{__('quantity')}}</th>
                        <th>{{__('Status')}}</th>
                        <th>{{__('Rate')}}</th>
                        <th>{{__('Description')}}</th>
                        <th colspan="2">{{__('Control')}}</th>
                        <th>{{__('Action')}}</th>
                    </tr>
                </thead>
                <tbody class="list" id="myTable">
                    @foreach($allItems as $item)
                    <tr id="{{$item->id}}">
                        <td>
                            <img src="{{$item->item_image}}" style="width: 75px ;height: 75px" >
                        </td>
                       <th scope="row">
                        <div class="media align-items-center">
                          <div class="media-body">
                            <span class="name mb-0 text-sm">{{$item->Description ? $item->Description : $item->Description_ar  }}</span>
                          </div>
                        </div>
                      </th>
                      <th scope="row">
                        <div class="media align-items-center">
                          <div class="media-body">
                            <span class="name mb-0 text-sm">{{$item->price}}</span>
                          </div>
                        </div>
                      </th>
                        <th scope="row">
                            <div class="media align-items-center">
                                <div class="media-body">
                                    <span class="name mb-0 text-sm">{{$item->price_offer}}</span>
                                </div>
                            </div>
                        </th>
                      <th scope="row">
                        <div class="media align-items-center">
                          <div class="media-body">
                            <span class="name mb-0 text-sm">{{$item->quantity}}</span>
                          </div>
                        </div>
                      </th>
                      <td>
                        <span class="badge badge-dot mr-4">
                        @if($item->status == 0)
                          <i class="bg-warning"></i>
                          @elseif($item->status == 1)
                          <i class="bg-success"></i>
                          @endif

                          <span class="status">
                              @if($item->status == 0)
                              InActive
                              @elseif($item->status== 1)
                              Active
                              @endif
                          </span>
                        </span>
                      </td>

                        <td>
                        <div class="d-flex align-items-center">
                          <span class="completion mr-2">{{$item->Rate}}</span>
                          <div>
                            <div class="progress">
                                                              <div class="progress-bar bg-warning" role="progressbar" aria-valuenow={{$item->Rate}} aria-valuemin="0" aria-valuemax="5" style="width: {{$rate}}%;"></div>
                            </div>
                          </div>
                        </div>
                      </td>


                      <td scope="row" class="overFloweEllipsis" data-placement="top" title="{{$item->Description}}">

                             {{$item->Description}}


                      </td>
                        <td colspan="2"><a href="{{route("items.add_ons",['id'=>$item->id])}}" class="btn btn-primary" style="width: 100%;font-size: 10px">{{__('Add Ons')}}</a></td>

                        <td id="ignorStyle" >
                            <a  class="btn btn-outline-default" href="{{route('items.edit',['id'=>$item->id])}}"><i class="fas fa-pencil-alt"></i></a>
                               <!--<form method="GET" class="makeITinline" action="{{route('ShowEditeItem.show')}}">-->
                               <!-- <input type="hidden" name="ItemId" value="{{$item->id}}">-->
                               <!-- <button class="btn btn-outline-primary" id="updateCat"  ><i class="fas fa-pencil-alt"></i></button>-->

                               <!-- </form>-->


                                                <!-- Button trigger modal -->
                        <button type="button" class="btn btn-outline-default" data-toggle="modal" data-target="#exampleModal{{$item->id}}">
                        <i class="fas fa-eye fa-lg"></i>
                        </button>


                        <!-- Modal -->
                        <div class="modal fade" id="exampleModal{{$item->id}}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                          <div class="modal-dialog">
                            <div class="modal-content">
                              <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">{{__('Description')}}</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                  <span aria-hidden="true">&times;</span>
                                </button>
                              </div>
                              <div class="modal-body">
                                <div class="col-sm-12  mb-3">

                               <img src="{{$item->item_image}}" width="100px"/>
                               </div>

                                <div class="col-sm-12">
                                <div class="form-group form-group-default">
{{--                                <label>{{__('item name')}} :  <span class="bold">{{$item->lang->translate_title_ar}}</span></label>--}}

                                </div>
                                </div>



                            <div class="col-sm-12">
                                <div class="form-group form-group-default">
                                <label>{{__('Price')}}: <span class="bold"> {{$item->price}}</span></label>

                                </div>
                            </div>


                            <div class="col-sm-12">
                                <div class="form-group form-group-default">
                                <label>{{__('quantity')}} :  <span class="bold"> {{$item->quantity}}</span></label>

                                </div>
                            </div>


                            <div class="col-sm-12">


                                <div class="form-group form-group-default">
                                <label>{{__('Description')}}</label>
                                <textarea wrap="virtual" class="form-control" rows="5" name="Description" readonly="">{{$item->Description}}</textarea>


                                </div>
                            </div>

                            @if(isset($item->topping) && !empty($item->topping))
                            <div class="col-sm-12">
                                <div class="form-group form-group-default" style="max-height: 200px;overflow-y: scroll;">
                                    <label>Topping</label>
                                    @foreach($item['topping'] as  $toppingItem)
                                    <div class="form-group form-group-default">
                                      <div class="col-sm-3"><label>Category Topping : <span class="bold">{{$toppingItem['CategoryTopping']}}</span></label></div>
                                      <div class="col-sm-3"><label>Topping Name : <span class="bold">{{$toppingItem['name_en']}}</span></label></div>
                                      <div class="col-sm-3"><label>Topping price : <span class="bold">{{$toppingItem['price']}}</span></label></div>
                                      </div>


                                    @endforeach

                                </div>
                            </div>
                            @endif

                              </div>
                              <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('Close')}}</button>
                              </div>
                            </div>
                          </div>
                        </div>

                            <form   class="makeITinline" method="post" action="{{route("items.destroy",['id'=>$item->id])}}" >
                                @csrf
                                @method("delete")
                                <button type="submit" class="btn btn-outline-danger" id="DeleteStore"><i
                                        class="fas fa-trash-alt"></i></button>
                            </form>

                        </td>




                    </tr>
                    @endforeach



                </tbody>
              </table>
{{--              <div class="ml-3">{!! $allItems->links() !!}</div>--}}
            </div>
          </div>
        </div>
      </div>
      <!-- Dark table -->




@endsection