@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="AddItem"> 
                               
                               <input type="hidden" value=""  name="category_id">
                               
                                <button class="btn btn-sm btn-neutral" type="submit">New Item +</button>

                               </form>
                                   
                                   
                                   
                               </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 scope="col" class="sort" data-sort="budget">item image</th>
                    <th scope="col" class="sort" data-sort="name">item name </th>
                    <th scope="col" class="sort" data-sort="status">price</th>
                    <th scope="col" class="sort" data-sort="status">quantity</th>

                    <th scope="col" class="sort" data-sort="status">Status</th>
                    <th scope="col" class="sort" data-sort="status">Rate</th>
                    <th scope="col" class="sort" data-sort="status">Description</th>

                    <th scope="col" class="sort" data-sort="completion">action</th>
                    <th scope="col"></th>
                  </tr>
                </thead>
                <tbody class="list" id="myTable">
                    @foreach($data as $item)

                    <tr id="{{$item['id']}}">
                      <td>
                          <img src={{$item['ImageUrl']}} width="75" >
                       </td>
  
                       <th scope="row">
                        <div class="media align-items-center">
                          <div class="media-body">
                            <span class="name mb-0 text-sm">{{$item['name']}}</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['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 id="ignorStyle" >
                               <form method="GET" class="makeITinline" action="/ShowEditeItem">
                                @csrf
                                <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">Item 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['ImageUrl']}} width="100%" />
                               </div>
                               
                                <div class="col-sm-12">
                                <div class="form-group form-group-default">
                                <label>Item Name :  <span class="bold">{{$item['name']}}</span></label>
                                
                                </div>
                                </div>
                            

                               
                            <div class="col-sm-12">
                                <div class="form-group form-group-default">
                                <label>Item price : <span class="bold"> {{$item['price']}}</span></label>
                                
                                </div>
                            </div>


                            <div class="col-sm-12">
                                <div class="form-group form-group-default">
                                <label>Item 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" >
                        
                        <button type="button" class="btn btn-outline-danger" id="DeleteItem" onsubmit="return false"  onclick='deleteItem("{{$item['id']}}")'><i class="fas fa-trash-alt"></i></button>
                        
                        </form>
                        
                        </td>
                      
                      
                      
                      
                    </tr>
                    @endforeach
  

                </tbody>
              </table>
            </div>
            <!-- Card footer -->
            <div class="card-footer py-4">
              <nav aria-label="...">
                <ul class="pagination justify-content-end mb-0">
                  <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1">
                      <i class="fas fa-angle-left"></i>
                      <span class="sr-only">Previous</span>
                    </a>
                  </li>
                  <li class="page-item active">
                    <a class="page-link" href="#">1</a>
                  </li>
                  <li class="page-item">
                    <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="page-item"><a class="page-link" href="#">3</a></li>
                  <li class="page-item">
                    <a class="page-link" href="#">
                      <i class="fas fa-angle-right"></i>
                      <span class="sr-only">Next</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
      <!-- Dark table -->


    

@endsection