@extends('layouts.app')
@section('content')


<div class="col-lg-12">
    <div class="panel">
         <div class="panel-heading bord-btm clearfix pad-all h-100">
             <h3 class="panel-title pull-left pad-no">{{translate(@$type.' Product Setting')}}</h3>

            @if($type == 'category')
            <div class="pull-right clearfix">
            <form class="" id="sort_products" action="" method="GET">
                                <div class="box-inline pad-rgt pull-left">
                    <div class="select" style="min-width: 250px;">
                          @php $categorydata = \App\Product::where('products.is_sortable', 1)->groupBy('category_id')->pluck('category_id')->toArray(); @endphp
                        <input type="hidden" name="type" value="{{$type}}">
                        <input type="hidden" name="search" value="{{@$category->name}}">
                        <select class="form-control demo-select2" id="user_id" name="category_id" onchange="sort_products()">
                            @foreach (\App\Category::whereIn('id', $categorydata)->get() as $key => $category)
                                <option value="{{ $category->id }}" @if ($category->id == $categoryid) selected @endif>
                                    {{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
    
            </form>
        </div>
        @endif
        </div>

        <!--Horizontal Form-->
        <!--===================================================-->
        <form class="form-horizontal" action="{{ route('ordering.product.save', $type) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="panel-body">
                <div class="product-choose">
                   <div class="row">
                    <div class="col-sm-12">
                       <table class="table table-bordered pagin-table" id="table1" name="table1">
                        <tbody>
                            <tr>
                            <th>Sr.</th>
                            <th>Product Image</th>
                            <th>Product Name</th>
                            <th>Category</th>
                            <th>Sorting</th>
                            </tr>
                         @forelse($ProductOrder as $key => $ProductOrd)

                          @php
                            if($type == 'category'){
                                $active = $ProductOrd->ordering;
                                $productid = $ProductOrd->id;   
                            }elseif($type == 'featured'){
                                $active = $ProductOrd->featured_ordering;
                                $productid = $ProductOrd->id;
                            }elseif($type == 'flash'){
                                $active = $ProductOrd->flash_ordering;
                                $productid = $ProductOrd->product_id;
                            }
                            
                            @endphp

                            <tr>
                                <td>{{$key+1}}</td>
                            <td>
                                <input type="hidden" name="product_id[]" value="{{$productid}}">
                                <a href="{{ route('product', $ProductOrd->slug) }}" target="_blank" class="media-block">
                                    <div class="media-left">
                                        <img loading="lazy"  class="img-md" src="{{Storage::disk('s3')->url($ProductOrd->thumbnail_img)}}" alt="Image" >
                                    </div>
                                </a></td>
                                
                            <td>{{$ProductOrd->name}}</td>

                             <td>
                               {{ @$ProductOrd->category->name }}
                           </td>
                            <td>
                            
                            <select class="mySelect form-control" name="ordering[]">
                                <option value="">Select</option>
                                                   
                            </select>
                               
                            </td>
                            </tr>
                        @empty
                        <tr>
                            <td colspan="4" align="center">No Data Found</td>
                        </tr>
                         @endforelse
                            </tbody>
                        </table>
                    </div>
                    </div>
                </div>
            </div>

            <div class="panel-footer text-right">
                <button class="btn btn-purple" type="submit">{{translate('Save')}}</button>
            </div>
        </form>
        <!--===================================================-->
        <!--End Horizontal Form-->

    </div>
</div>

<style type="text/css">
tr.ui-sortable-handle {
    cursor: pointer;
}
tr.ui-sortable-handle:hover {
    background-color:#dddddd75;
}.img-md { width: 35px; }
</style>
@endsection

@section('script')
<script type="text/javascript">
   
   $(document).ready(function(){

   $('.mySelect').on('change', function(event ) {

    // if($(".mySelect option[value='']").length > 0){
        
    // }
       //restore previously selected value
       var prevValue = $(this).data('previous');

      $('.mySelect').not(this).find('option[value="'+prevValue+'"]').show();
       //hide option selected                
       var value = $(this).val();
       //update previously selected data
       $(this).data('previous', value);
       $('.mySelect').not(this).find('option[value="'+value+'"]').prop('selectedIndex', 0);
       $('.mySelect').not(this).find('option[value="'+value+'"]').hide();
   });
});


function sort_products(el){
    $('#sort_products').submit();
}   
</script>
@endsection