@extends('layouts.customer')

@section('content')
    <div class="container-fluid">
         <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
      
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Locations</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        
        <!-- Modal body -->
        <div class="modal-body" style="height: 300px; overflow-y: auto;">
             @php $selected_location = ''; @endphp
             @if($locations)
                        @foreach( $locations as $loc )
                                
                            @if($loc->id == $location) @php $selected_location = $loc; @endphp 
                                   <a href="{{secure_url('/restaurant-locations/'.$loc->id.'/food-items')}}"> 
                                <div style="display: flex; background-color: rgb(204, 204, 204); margin-bottom: 10px; padding: 10px; border-radius: 10px; align-items: center; cursor: pointer;">
                                    <i class="fas fa-map-marker-alt mr-3" aria-hidden="true" style="font-size: 18px; color: rgb(169, 42, 64);"></i><div style="flex: 1 1 0%;"><div style="font-size: 14px; font-weight: 700;">{{ $loc->name}}</div><div>@if(!empty($loc->zipcode)){{$loc->zipcode}}, @endif @if(!empty($loc->street)){{$loc->street}}, @endif {{$loc->city}}, {{$loc->state}} {{$loc->country}}</div></div>
                                </div>
                                </a>
                            @else
                             <a href="{{secure_url('/restaurant-locations/'.$loc->id.'/food-items')}}"> 
                               <div style="display: flex; background-color: rgb(238, 238, 238); margin-bottom: 10px; padding: 10px; border-radius: 10px; align-items: center; cursor: pointer;"><i class="fas fa-map-marker-alt mr-3" aria-hidden="true" style="font-size: 18px; color: rgb(0, 0, 0);"></i><div style="flex: 1 1 0%;"><div style="font-size: 14px; font-weight: 700;">{{ $loc->name}}</div><div> @if(!empty($loc->zipcode)){{$loc->zipcode}}, @endif @if(!empty($loc->street)){{$loc->street}}, @endif {{$loc->city}}, {{$loc->state}} {{$loc->country}}</div></div></div>
                              </a> 

                            @endif   
                              
                        @endforeach
                @endif

        </div>
        
        <!-- Modal footer -->
        <div class="modal-footer">
          
        </div>
        
      </div>
    </div>
  </div>
            <div class="row">
                <div class="col-12">
                    <h1>Food Items</h1>
                    <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                        <ol class="breadcrumb pt-0">
                            <li class="breadcrumb-item">
                                <a href="#">Home</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">Food Items</li>
                        </ol>
                    </nav>
                    @can('food_item_create')
                    <a href="{{ route('food-items.create', ['account'=>$account,'location'=>$location]) }}" class="btn btn-secondary float-right" type="submit">Add Food Item</a>
                    @endcan
                    <div class="mb-5"></div>
                </div>
            </div>

            <div class="row mb-2">
                @if ($message = Session::get('success'))
                    <div class="w-100 alert alert-success">
                        <p style="margin:0px;">{{ $message }}</p>
                    </div>
                @endif
            </div>

            <div class="row mb-4">
                <div class="col-12 mb-4">
                   <div class="col-8" style="float: right;"> 

                    <div class="dz-location-box mt-2"><i class="fas fa-map-marker-alt mr-3" aria-hidden="true" style="font-size: 20px; color: rgb(169, 42, 64);"></i><div class="mr-2"><div style="font-size: 16px;">{{$selected_location?->name ?? ''}}</div><div style="font-size: 14px;">@if(!empty($selected_location->zipcode)){{$selected_location->zipcode}}, @endif @if(!empty($selected_location->street)){{$selected_location->street}}, @endif {{$selected_location?->city ?? ''}}, {{$selected_location?->state ?? ''}} {{$selected_location?->country ?? ''}}</div></div><button class="btn btn-link" data-toggle="modal" data-target="#myModal"><i class="fas fa-pencil-alt" aria-hidden="true" style="font-size: 14px;"></i></button></div>
                    {{--<select class="form-control" id="_c_locations" style="display: none;">
                        <option value="">Select Location</option>
                         @php $selected_location = ''; @endphp
                         @if($locations)
                                    @foreach( $locations as $loc )
                                            <option value="{{ route('food-items.index', ['account' => $account, 'location' => $loc->id ]) }}" @if($loc->id == $location) @php $selected_location = $loc; @endphp selected  @endif>{{ $loc->name }}</option>
                                    @endforeach
                            @endif
                    </select>--}}
                  </div>
                </div>
                <div class="col-12 mb-4">
                    <div class="card">
                        
                        <div class="card-body">
                            <div id="DataTables_Table_0_wrapper">
                                <table class="data-table" id="DataTables_Table_0">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Name</th>
                                            <th>Supplier</th>
                                            <th>Price</th>
                                            <th>Quantity</th>
                                            <th>Last Updated</th>
                                            <th>Re-Order</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @if($foodItems)
                                       
                                            @php $i = 0; @endphp
                                            @foreach($foodItems as $foodItem)
                                                <tr>
                                                    @php
                                                      if(!empty($foodItem->image)){
                                                         $image = $foodItem->image;
                                                      }
                                                      else{
                                                        $image = secure_url('default-image.png');
                                                      }
                                                    @endphp
                                                    <td>

                                                        <img style="height: 70px; object-fit: cover; width: 70px; border-radius: 50%;" src="{{ $image}}">
                                                    </td>
                                                    <td>{{ $foodItem->name }}</td>
                                                    <td>
                                                        @if(isset($foodItem->supplier->first_name))
                                                        {{ $foodItem->supplier->first_name}} {{ $foodItem->supplier->last_name}}
                                                         @endif
                                                    </td>
                                                    <td>
                                                        ${{ $foodItem->price }}
                                                    </td>
                                                    @if($foodItem->quantity_type == 'gram')
                                                       @php $sign = 'g'; @endphp
                                                    @elseif($foodItem->quantity_type == 'unit')
                                                        @php $sign = 'unit'; @endphp
                                                    @elseif($foodItem->quantity_type == 'pound')
                                                       @php $sign = 'lbs'; @endphp
                                                    @elseif($foodItem->quantity_type == 'ounce')
                                                        @php $sign = 'oz'; @endphp
                                                    @else
                                                         @php $sign = ''; @endphp
                                                    @endif
                                                    <td>
                                                        {{ $foodItem->quantity ?? '' }} 
                                                         @if(!empty($sign))
                                                           ({{$sign}})
                                                         @endif
                                                    </td>
                                                    <td>{{ date("M j, Y",strtotime($foodItem->updated_at)) }}
                                                      <br>
                                                       {{ date("h:i:s A",strtotime($foodItem->updated_at)) }}
                                                    </td>
                                                  	<td>
                                                        <button class="btn btn-success __modelOpenFood" data-toggle="modal" data-target="#exampleModalReorder" data-id="{{ $foodItem->id}}" data-supplier="{{$foodItem->supplier_id}}" data-quantity-type="{{ $foodItem->quantity_type}}">Re-Order</button>
                                                        <a href="{{ secure_url('food-items/order/'.$foodItem->id.'/'.$selected_location->id)}}" class="btn btn-secondary">List</a>

                                                    </td>
                                                    <td>
                                                        <div class="dropdown">
                                                          <button class="btn" type="button" id="dropdownMenuButton{{$foodItem->id}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
                                                           <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
                                                           </svg>
                                                          </button>
                                                          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton{{$foodItem->id}}">
                                                           <a href="javascript:void(0)" class="p-3 dropdown-item" data-toggle="modal" data-target="#add-quantity-modal-{{$foodItem->id}}"><i class="simple-icon-plus"></i> Add Quantity</a>
                                                            <a class="p-3 dropdown-item" href="{{ route('food-items.show',['account'=>$account,'location'=>$location,'food_item'=>$foodItem->id]) }}"><i class="simple-icon-eye"></i> View</a>
                                                           @can('food_item_edit')
                                                            <a class="p-3 dropdown-item" href="{{ route('food-items.edit',['account'=>$account,'location'=>$location,'food_item'=>$foodItem->id]) }}"><i class="simple-icon-pencil"></i> Edit</a>
                                                            @endcan
                                                              <a href="javascript:void(0)" class="p-3 dropdown-item" style="background: transparent;border: unset;" data-toggle="modal" data-target="#exampleModal-{{$foodItem->id}}"><i class="simple-icon-trash"></i> delete</a>
                                                          </div>
                                                        </div>
                                                        @can('food_item_delete') 
                                                            <!-- Modal -->
                                                            <div class="modal fade" id="exampleModal-{{ $foodItem->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                                                <div class="modal-dialog" role="document">
                                                                    <div class="modal-content">
                                                                        <div class="modal-header">
                                                                            <h5 class="modal-title" id="exampleModalLabel-{{ $foodItem->id }}">Delete Food Item</h5>
                                                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                                <span aria-hidden="true">&times;</span>
                                                                            </button>
                                                                        </div>
                                                                        <div class="modal-body">
                                                                            Are you sure?
                                                                        </div>
                                                                        <div class="modal-footer">
                                                                            <button type="button" class="btn btn-secondary"
                                                                                data-dismiss="modal">Close</button>
                                                                            <form action="{{ route('food-items.destroy',['account'=>$account,'location'=>$location,'food_item'=>$foodItem->id]) }}" method="POST">
                                                                                @csrf
                                                                                @method('DELETE')                                       
                                                                                <button type="submit" class="btn btn-danger">Delete</button>
                                                                            </form>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        @endcan
                                                        <div class="modal fade" id="add-quantity-modal-{{ $foodItem->id }}" tabindex="-1" role="dialog" aria-hidden="true">
                                                                <div class="modal-dialog" role="document">
                                                                <div class="modal-content">
                                                                <form action="{{ route('food-items.update',['account'=>$account,'location'=>$location,'food_item'=>$foodItem->id]) }}" method="POST">   
                                                                 @csrf
                                                                  @method('PUT')        
                                                                <div class="modal-header">
                                                                <h5 class="modal-title" id="exampleModalLabel-{{ $foodItem->id }}">{{__('Add Quantity')}}</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="row">
                                                                <label class="col-12">{{__('Add New Quantity')}}</label>
                                                                <div class="col-12">
                                                                <input data-id="{{$foodItem->id}}" class="form-control __quantityAdd" type="number" min="1" name="quantity" value="0">
                                                                <input type="hidden" name="quantity_update" value="1">
                                                                </div>
                                                                <div class="col-6 mt-2"><label>{{ __('Current Quantity')}}</label>
                                                                    <input type="text" value="{{ $foodItem->quantity}}" readonly="" class="form-control current_quantity{{$foodItem->id}}">
                                                                </div>
                                                                <div class="col-6 mt-2">
                                                                    <label>{{__('Total Quantity')}}</label>
                                                                    <input type="text" id="total_quantity" value="{{ $foodItem->quantity}}" class="form-control total_quantity{{$foodItem->id}}" readonly="">
                                                                </div>
                                                                </div>
                                                                </div>
                                                                <div class="modal-footer">
                                                                <button type="button" class="btn btn-secondary"
                                                                data-dismiss="modal">{{__('Close')}}</button>
                                                                <button type="submit" class="btn btn-primary">{{__('Add Quantity')}}</button>
                                                                </form>
                                                                </div>
                                                                </div>
                                                                </div>
                                                                </div>
                                                     </td>
                                                </tr>
                                            @endforeach
                                        @else
                                            <tr colspans="5">
                                                <p>No records found!</p>
                                            </tr>
                                        @endif
                                    </tbody>
                                </table>
                            </div>    
                        </div>
                    </div>
                </div>
            </div>
        </div>

<!-- modal start -->
<!-- Modal -->
<div class="modal fade" id="exampleModalReorder" tabindex="-1" role="dialog" aria-labelledby="exampleModalReorder" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <form method="post" action="{{ secure_url('food-items/order/create')}}">
        @csrf
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Create Order</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="form-group">
                 <label>Location</label>
                  <input type="text"  @if(!empty($selected_location)) value="{{ $selected_location->name }}" @endif class="form-control" readonly="">
                  @if(!empty($selected_location))
                       <input type="hidden" name="location_name" value="{{ $selected_location->name}}">
                  @endif
                  <input type="hidden" name="location_id" @if(!empty($selected_location)) value="{{ $selected_location->id }}" @endif >
                  <input type="hidden" name="item_id" value="" id="item_id">
            </div>
            <div class="form-group">
                 <label>Quantity</label>
                  <input type="number" name="quantity" class="form-control" min="1">
            </div>
            <div class="form-group">
                 <label>Quantity Type</label>

                 <select name="quantity_type" id="quantity_type" class="form-control">
                       <option value="">Select Type</option>
                        <option value="pound">Pounds (Ibs)</option>
                        <option value="ounce">Ounces (oz)</option>
                        <option value="gram">Grams (g)</option>
                        <option value="unit">Units</option>
                 </select>
            </div>
            <div class="form-group">
                 <label>Supplier</label>
                  <select name="supplier" id="supplier" class="form-control">
                    <option value="">Select Supplier</option>
                        @foreach($suppliers ?? [] as $sp)
                            <option value="{{$sp->id}}">{{$sp->organization_name}}</option>
                        @endforeach
                  </select>
            </div> 
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-primary">Confirm Order</button>
          </div>
        </div>
    </form>
  </div>
</div>
@endsection
@section('script')
 <script type="text/javascript">
        $(document).on('change','#_c_locations',function(){
               if($(this).val() != ""){
                    window.location.href = $(this).val();
               }
        })     
        $(document).on('click','.__modelOpenFood',function(e){
                $("#item_id").val($(this).attr('data-id'));
                $("#supplier").val($(this).attr('data-supplier'));
                $("#quantity_type").val($(this).attr('data-quantity-type'));
        })  
       $(document).on('keyup','.__quantityAdd',function(evt){
            var charCode = (evt.which) ? evt.which : event.keyCode
             if (charCode > 31 && (charCode < 48 || charCode > 57)){
                return false;
            }
            var thisval = $(this).val();
            if(thisval == ''){ thisval = 0;}
             var tq = parseInt(thisval) + parseInt($(".current_quantity"+$(this).attr('data-id')).val());
             $(".total_quantity"+$(this).attr('data-id')).val(tq);
             console.log(tq,thisval);
             return true;
       })
 </script>

@endsection