@extends('layouts.app')

@section('stitle',__('messages.Products'))
@section('title', __('messages.Products'))

@section('content')
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">
            @if(session()->get('title') == "success")
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">Success</h4>
                    <div class="alert-body">
                        {{ session()->get('message') }}
                    </div>
                </div>
            @elseif (session()->get('title') == "error")
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Error</h4>
                    <div class="alert-body">
                        {{ session()->get('message') }}
                    </div>
                </div>
            @elseif($errors->any())
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Error</h4>
                    @foreach ($errors->all() as $error)
                        <div class="alert-danger">{{ $error }}</div>
                    @endforeach
                </div>
            @else
            @endif
            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">@yield('title')</h2>
                            <div class="breadcrumb-wrapper">
                                @if ($product->status== 0)
                                    <span class="badge badge-glow badge-danger ml-2" style="margin-top: 5px;">Inactive</span>
                                @else
                                    <span class="badge badge-glow badge-primary ml-2" style="margin-top: 5px;">Active</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                    <button class="btn btn-secondary waves-effect waves-float waves-light " type="button" onclick="location.href='{{ route('product.list') }}'"><i data-feather='chevron-left' class="mr-1"></i>{{__('messages.Back')}}</button>
                </div>

            </div>
            <div class="content-body">

                <!-- Table Hover Animation start -->
                <div class="row" id="table-hover-animation">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-4">
                                        <label for="name">{{__('messages.name')}}:</label>
                                        <h5 class="">{{ $product->name }}</h5>
                                        <hr>
                                    </div>
                                    <div class="col-4">
                                        <label>{{__('messages.CATEGORY')}}:</label>
                                        <h5 >{{ $product->getCategory->name }}</h5>
                                        <hr>
                                    </div>
                                    <div class="col-4">
                                        <label for="name">{{__('messages.StockProduct')}}:</label>

                                            @if( $product->stock_product =='0')
                                            <h5 >{{__('messages.NO')}} </h5>
                                            @else
                                               <h5> {{__('messages.YES')}} </h5>
                                            @endif
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <label for="name">{{__('messages.SKU')}}:</label>
                                        <h5 class="">{{ $product->sku }}</h5>
                                        <hr>
                                    </div>
                                    <div class="col-4">
                                        <label>{{__('messages.PricingMethod')}}:</label>
                                        @if( $product->pricingMethod !='')
                                            <h5 >{{ $product->pricingMethod->name }} </h5>
                                        @else
                                            <h5> N\A </h5>
                                        @endif
                                        <hr>
                                    </div>
                                    <div class="col-4">
                                        <label for="name">{{__('messages.Price')}} ({{Auth::user()->business->currency->symbol}}):</label>
                                        @if( $product->price !='')
                                            <h5 >{{ $product->price }} </h5>
                                        @else
                                            <h5> N\A </h5>
                                        @endif
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <label for="name">{{__('messages.VATGroup')}}:</label>
{{--                                        @if($product->getTax->name == 0)--}}
{{--                                        <h5 class="">N/A</h5>--}}
{{--                                        @else--}}
                                        <h5 class="">{{$product->getTax->name ?? 'N/A'}}</h5>
{{--                                        @endif--}}
                                        <hr>
                                    </div>
                                    <div class="col-4">
                                        <label>{{__('messages.CostingMethod')}}:</label>

                                        @if( $product->costingMethod !='')
                                            <h5 >{{ $product->costingMethod->name }} </h5>
                                        @else
                                            <h5> N/A </h5>
                                        @endif
                                        <hr>
                                    </div>
                                    <div class="col-4">
                                        <label for="name">{{__('messages.COST')}} ({{Auth::user()->business->currency->symbol}}):</label>
                                        @if( $product->cost !='')
                                            <h5 >{{ $product->cost }} </h5>
                                        @else
                                            <h5> N/A </h5>
                                        @endif
                                        <hr>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-4">
                                        <label>{{__('messages.Unit')}}:</label>
                                        <h5 class="">{{ $product->unit }}</h5>
                                    </div>

                                    <div class="col-4">
                                        <label>{{__('messages.preparationTime')}}:</label>
                                        <h5 class="">{{ $product->preparation_time }}</h5>
                                    </div>
                                    <div class="col-4">
                                        <label>{{__('messages.Calories')}}:</label>
                                        <h5 class="">{{ $product->calories }}</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- tag section -->
                <div id="card" class="content-header row mt-2">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1" for="name" data-toggle="tooltip" data-placement="top" data-original-title="Add tags to help you filter and group products easily. You can create tags such as Healthy Products, Organic, etc.">{{__('messages.Tags')}} <i data-feather='alert-circle' class=""> </i></h5>
                            </div>
                        </div>
                    </div>
                    <div id="button" class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            @if($product->tag->count() > 0)
                            <button class="btn btn-primary waves-effect waves-float waves-light" onclick="getTag({{ $product->id }})" type="button"data-toggle="modal" data-target="#tag">
                                {{__('messages.EditTags')}}</button>
                            @else
                                <button class="btn btn-primary waves-effect waves-float waves-light" onclick="getTag({{ $product->id }})" type="button"data-toggle="modal" data-target="#tag">{{__('messages.AddTags')}}</button>
                            @endif
                        </div>
                    </div>
                </div>

                    <div  class="card">
                        <div id="tag-list-card-body" class="card-body">
                            @foreach($product->tag as $proTag)
                                <span class="badge bg-secondary">{{$proTag->name}}</span>
                            @endforeach
                        </div>
                    </div>

                <!-- Modifiers -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1" for="name" data-toggle="tooltip" data-placement="top" data-original-title="Add modifiers to this product and configure the minimum and maximum number of allowed modifiers, and more.">{{__('messages.Modifiers')}} <i data-feather='alert-circle' class=""> </i></h5>
                            </div>
                        </div>
                    </div>
                    <div class="modifier_buttons content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button onclick="getModifier({{ $product->id }})" class="add_modifier_btn btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#add_modifier_modal">{{__('messages.AddModifiers')}}
                            </button>
                        </div>
                    </div>
                </div>
                {{--                mod card--}}
                <div class="card">
                    <div class=" text-center">
                        <form class="mod-form">
                            <input type="text" hidden name="product_id" value="{{$product->id}}">
                            <table class="table" id="modifiers-list-table">
                            <thead>
                            <tr >
                                <th>{{__('messages.name')}}</th>
                                <th>{{__('messages.REFERENCE')}}</th>
                                <th>{{__('messages.MinimumLevel')}}</th>
                                <th>{{__('messages.MaximumLevel')}}</th>
                                <th>{{__('messages.ACTION')}}</th>
                            </tr>
                            </thead>
                            <tbody id="modifiers-list-table-body">
                                @foreach($product->modifiers as $modifier)
                                    @if($modifier->modifierOption->count() > 0)
                                    <tr>
                                        <td>{{$modifier->name}}</td>
                                        <td>{{$modifier->reference}}</td>
                                        <td>
                                            <div class="input-group input-group-md" style="max-width: 160px; margin-left: 40px">
                                                <input type="number" class="form-control" name="mod[{{$modifier->id}}][min]"
                                                       value="{{ $modifier->pivot->min_level }}"/>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-group input-group-md" style="max-width: 160px; margin-left: 40px">
                                                <input type="number" class="form-control" name="mod[{{$modifier->id}}][max]"
                                                       value="{{ $modifier->pivot->max_level }}"/>
                                            </div>
                                        </td>
                                        <td>
                                            <a onclick="editModifier({{ $modifier->id }})" data-pmoption="{{ $modifier->id }}" class="edit_modifier_btn btn btn-sm btn-primary waves-effect waves-float waves-light" type="button"
                                               data-toggle="modal" data-target="#edit_modifier_modal">{{__('messages.Edit')}}
                                            </a>
{{--                                            <a class="mr-1 remove-modifier-btn" onclick="removeModifier({{ $modifier->id }})" href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="{{__('messages.Delete')}}">--}}
{{--                                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash text-danger"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>--}}
{{--                                            </a>--}}
                                            <a  onclick="removeModifier({{ $modifier->id }})" href="#" class=" mr-1 remove-modifier-btn btn btn-sm btn-danger waves-effect waves-float waves-light" type="button">Delete
                                            </a>
                                        </td>
                                    </tr>
                                    @else
                                        <tr>
                                            No modifiers
                                        </tr>
                                    @endif
                                @endforeach
                            </tbody>
                        </table>
                        </form>
                    </div>

                </div>
                <div class="row modUpdate">
                    <div class="col-10"></div>
                    <div class="col-2 text-right">
                        <button class="btn btn-success allModUpdate">{{__('messages.Update')}}</button>
                    </div>
                </div>
                <!-- Ingredients -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1" for="name" data-toggle="tooltip" data-placement="top" data-original-title="Add inventory items as ingredients to this product to be consumed when this product is sold.">{{__('messages.Ingredients')}} <i data-feather='alert-circle' class=""> </i></h5>
                            </div>
                        </div>
                    </div>
                    <div id="addIngDiv" class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
                            <button class="getIng btn btn-primary waves-effect waves-float waves-light" type="button"
                                    data-toggle="modal" data-target="#addIngredient">{{__('messages.AddIngredient')}}
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <form class="a-form">
                        <table id="IngData" class="invoice-list-table table prowdata_ing">
                            <thead>
                            <tr>
                                <th>{{__('messages.name')}}</th>
                                <th>{{__('messages.SKU')}}</th>
                                <th>{{__('messages.QTY')}}</th>
                                <th>{{__('messages.AppliesOn')}}</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($product->getIngredients as $ing)
                                <tr>
                                    <td>{{ $ing->item->name }}</td>
                                    <td>{{ $ing->item->sku }}</td>
                                    <td>
                                        <div class="input-group input-group-sm" style="max-width: 160px;">
                                            <input type="text" class="form-control" name="ing[{{ $ing->id }}]"
                                                   value="{{ $ing->qty }}"/>
                                            <div class="input-group-append">
                                                <span class="input-group-text">{{ $ing->item->ingredient_unit }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        @php $ingOrderTypes = array(); @endphp
                                        @foreach($ing->item->get_order_types as $ingot)
                                            @php $ingOrderTypes[] = $ingot->order_type_id; @endphp
                                            @php $ingOrderTypesId[] = $ingot->order_type_id; @endphp
                                        @endforeach

                                        @foreach($order_types as $order_type)
                                            <a href="#" class="ing_applies_on pro_ing_{{ $ing->id }}{{ $order_type->id }}" data-pro-ing-id="pro_ing_{{ $ing->id }}{{ $order_type->id }}" data-pro-id="{{ $product->id }}" data-ing-id="{{ $ing->item_id }}" data-pro-ing-order-type-id="{{ $order_type->id }}" data-order-type-status="{{ (in_array($order_type->id,$ingOrderTypes)) ? 'selected' : 'unselected' }}">
                                                <span class="badge {{ (in_array($order_type->id,$ingOrderTypes)) ? 'bg-secondary' : 'badge-light-secondary' }} mr-1" data-pro_ing_order_type_id="{{ $order_type->id }}">{{ $order_type->name }}</span>
                                            </a>
                                        @endforeach
                                    </td>
                                    <td class="text-right">
                                        <button id="{{ $ing->id }}" data-pro-id="{{ $product->id }}" data-ing-id="{{ $ing->item_id }}" class="btn btn-sm btn-danger removeItemPro">
                                            {{__('messages.Remove')}}
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="row ingUpdate">
                    <div class="col-10"></div>
                    <div class="col-2 text-right">
                        <button class="btn btn-success allIngUpdate">{{__('messages.Update')}}</button>
                    </div>
                </div>

                <!-- Inactive In Branches -->
                <div class="content-header row mt-3">
                    <div class="content-header-left col-md-6 col-12 mb-2">
                        <div class="row breadcrumbs-top">
                            <div class="col-12">
                                <h5 class=" float-left mb-0 pt-1" for="name" data-toggle="tooltip" data-placement="top" data-original-title="Deactivate this product in the branches you select here to hide it from the menu.">{{__('messages.inactiveInBranches')}} <i data-feather='alert-circle' class=""> </i></h5>
                            </div>
                        </div>
                    </div>
                    <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                        <div class="form-group breadcrumb-right mb-1">
{{--                            <button class="btn btn-primary waves-effect waves-float waves-light" type="button"--}}
{{--                                    data-toggle="modal" data-target="#">Select Branch--}}
{{--                            </button>--}}
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-body text-center">
                        @foreach($product->branches as $branches)
                            <span class="badge bg-secondary">{{$branches->name}} </span>
                        @endforeach
                    </div>
                </div>

                <!-- tag mode -->
                <div class="modal-size-md d-inline-block">
                    <!-- Modal -->
                    <div class="modal fade text-left" id="tag" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-md" role="document">
                            <div class="modal-content">
                                <form class="dt_adv_search" method="POST">
                                    <div class="modal-header">
                                        @if($product->tag->count() > 0)
                                        <h4 class="modal-title" id="myModalLabel17">Edit tags</h4>
                                        @else
                                            <h4 class="modal-title" id="myModalLabel17">Add tags</h4>
                                        @endif
                                        <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">
                                            <div class="col-12">
                                                <div class="form-row mb-1">
                                                    <div class="col-md-12 mb-1">
                                                        <label>Tags:</label>
                                                        <select id="add_tag_select"
                                                                class="select2 form-control form-control-lg"
                                                                name="add_modifiers[]" multiple required>
                                                            @foreach($tag as $proTag)
                                                            <option value="{{$proTag->id}}">{{$proTag->name}}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="modal-footer">
                                        <button type="submit" onclick="addTag({{ $product->id }})" class="btn btn-primary" data-dismiss="modal">Apply</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modifiers-Modal-Start -->
                <div class="modal-size-sm d-inline-block">
                    <div class="modal fade text-left" id="add_modifier_modal" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel16" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel16">Add Modifier</h4>
                                    <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">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label>Select Modifiers:</label>
                                                <select id="add_modifier_select"
                                                        class="select2 form-control form-control-lg"
                                                        name="add_modifiers[]" multiple required>
                                                        @foreach($modifiers as $modifier)
                                                            @if($modifier->modifierOption->count() > 0)
                                                                <option value="{{ $modifier->id }}">{{ $modifier->name }}</option>
                                                            @endif
                                                        @endforeach
                                                </select>
                                                <input type="hidden" class="product_id" name="product_id" value="{{ $product->id }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" onclick="addModifier({{ $product->id }})" class="add_modifier_submit_btn btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Modifiers-Modal-End -->

                <!-- Edit Modifiers-Modal-Start -->

                <div class="modal-size-sm d-inline-block">
                    <div class="modal fade text-left" id="edit_modifier_modal" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel20" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel20">Add Modifier Option</h4>
                                    <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">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label>Select Modifier Option:</label>
                                                <select id="edit_modifier_option_select"
                                                        class="select2 form-control form-control-lg"
                                                        name="edit_modifiers_option[]" multiple required>
{{--                                                    @if(count($modifierOption) > 0)--}}
{{--                                                        @foreach($modifierOption as $modifierOp)--}}
{{--                                                            <option value="{{ $modifierOp->id }}">{{ $modifierOp->name }}</option>--}}
{{--                                                        @endforeach--}}
{{--                                                    @endif--}}
                                                </select>
                                                <input type="hidden" class="" name="product_id" value="{{ $product->id }}">
                                                <input type="hidden" class="" name="modifier_id_edit_modifier" id="modifier_id_edit_modifier">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" onclick="updateModifierOption({{ $product->id }})" class="edit_modifier_option_submit_btn btn btn-primary">Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Edit Modifiers-Modal-End -->

                <!-- Ingredients-Modal -->
                <div class="modal-size-sm d-inline-block">
                    <!-- Modal -->
                    <div class="modal fade text-left" id="addIngredient" tabindex="-1" role="dialog"
                         aria-labelledby="myModalLabel17" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                            <div class="modal-content">
                                {{--                            <form class="add_ingredient_form"  action="{{ route('product.add_ingredient') }}" method="POST">--}}
                                {{--                                @csrf--}}
                                <div class="modal-header">
                                    <h4 class="modal-title" id="myModalLabel17">Add Ingredients</h4>
                                    <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">
                                        <div class="col-12">
                                            <div class="form-group">
                                                <label>Select Ingredients:</label>
                                                <select id="addIngre"
                                                        class="select2 add_ingredient form-control form-control-lg"
                                                        name="add_ingredient[]" multiple required>

                                                </select>
                                                <input type="hidden" class="product_id" name="product_id"
                                                       value="{{ $product->id }}">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="addIng btn btn-primary">Submit</button>
                                </div>
                                {{--                            </form>--}}
                            </div>
                        </div>
                    </div>
                </div>

@endsection
@push('my_scripts')
<script>
    ingUpdate(1);

    // Get tag on Modal Show
    function getTag(product_id){
        let tag_select = $("#add_tag_select");
        // alert(product_id);
        const method = 'POST';
        const url = "{{ route('product.get_tag') }}";
        const headers = {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        };
        const data = {
            product_id,
        };
        $.ajax({
            method,
            url,
            headers,
            data, // data to be sent to server
            dataType: 'json', // type of data expecting back from server
            success: function (data) {
                const { product_tags } = data;
                tag_select.val(product_tags); // Select the option with a values in array
                tag_select.trigger('change');
            },
            error: function (data) {
                console.log(data);
            }
        });
    }
    // Add Tag to Product
    function addTag(product_id){
        let tag_ids = $('#add_tag_select').val(); // select2 options
        console.log(tag_ids);
        if(tag_ids.length > 0) { // if no tag selected
            const method = 'POST';
            const url = "{{ route('product.add_tag') }}";
            const headers = {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            };
            const data = {
                product_id,
                tag_ids,
            };
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    console.log(data);
                    const {status, message, product_tag} = data;
                    const card_body = $('#tag-list-card-body');
                    const button = $('#button');
                    card_body.empty();
                    $.each(product_tag, function (i, product_tag) {
                        card_body
                            .append(` <span class="badge bg-secondary">${product_tag.name}</span>`);
                        {{--button.append('<button class="btn btn-primary waves-effect waves-float waves-light" onclick="getTag({{ $product->id }})" type="button"data-toggle="modal" data-target="#tag">Edit Tags</button>');--}}
                    });

                    Swal.fire({
                        icon: 'success',
                        title: `${status}`,
                        text: `${message}`,
                    })
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }else {
            Swal.fire({
                title: 'Error!',
                text: 'Select Tag',
                icon: 'error',
                customClass: {
                    confirmButton: 'btn btn-primary'
                },
                showClass: {
                    popup: 'animate__animated animate__shakeX'
                },
                buttonsStyling: false
            });
        }


    }
    // Get Modifiers on Modal Show
    function getModifier(product_id){
        let modifier_select = $("#add_modifier_select");
        const method = 'POST';
        const url = "{{ route('product.get_modifier') }}";
        const headers = {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        };
        const data = {
            product_id,
        };
        $.ajax({
            method,
            url,
            headers,
            data, // data to be sent to server
            dataType: 'json', // type of data expecting back from server
            success: function (data) {
                const { product_modifiers } = data;
                modifier_select.val(product_modifiers); // Select the option with a values in array
                modifier_select.trigger('change');
            },
            error: function (data) {
                console.log(data);
            }
        });
    }
    // Add Modifiers to Product
    function addModifier(product_id){
        let modifier_ids = $('#add_modifier_select').val(); // select2 options
        console.log("MODids",modifier_ids);
        if(modifier_ids.length > 0){ // if no modifier selected
            const method = 'POST';
            const url = "{{ route('product.add_modifier') }}";
            const headers = {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            };
            const data = {
                product_id,
                modifier_ids,
            };
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    console.log(data);
                    const { status, message, product_modifiers } = data;
                    const modifier_table = $('#modifiers-list-table-body');
                    modifier_table.empty();
                    $.each(product_modifiers, function(i, modifier){
                        modifier_table
                            .append(`<tr>
                        <td>${modifier.name}</td>
                        <td>${modifier.reference}</td>
                        <td>
                            <div class="input-group input-group-md" style="max-width: 160px; margin-left: 40px">
                                <input type="number" class="form-control" name="mod[${modifier.id}][min]"  value="${modifier.min_level}"/>
                            </div>
                        </td>
                        <td>
                            <div class="input-group input-group-md" style="max-width: 160px; margin-left: 40px">
                                <input type="number" class="form-control" name="mod[${modifier.id}][max]"  value="${modifier.max_level}"/>
                            </div>
                        </td>

                        <td>

                             <a onclick="editModifier(${modifier.id})" data-pmoption="${modifier.id}" href="#" class="edit_modifier_btn btn btn-sm btn-primary waves-effect waves-float waves-light" type="button"
                                               data-toggle="modal" data-target="#edit_modifier_modal"> Edit
                            </a>
                            <a onclick="removeModifier(${modifier.id})" href="#" class="mr-1 remove-modifier-btn btn btn-sm btn-danger waves-effect waves-float waves-light" type="button"
                                                                           >  Delete
                            </a>

                        </td>
                    </tr>`);
                    });
                    Swal.fire({
                        icon: 'success',
                        title: `${status}`,
                        title: `${status}`,
                        text: `${message}`,
                    })
                    $('#add_modifier_modal').modal('hide');
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }
        else{
            Swal.fire({
                title: 'Error!',
                text: 'Select Modifiers',
                icon: 'error',
                customClass: {
                    confirmButton: 'btn btn-primary'
                },
                showClass: {
                    popup: 'animate__animated animate__shakeX'
                },
                buttonsStyling: false
            });
        }
    }

    function editModifier(modifier_id){   //getting modifier options for a modifier
        let modifier_option_select = $("#edit_modifier_option_select");
        var proID = $('.product_id').val();
        const method = 'POST';
        const url = "{{ route('modifier.get_option') }}";
        const headers = {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        };
        const data = {
            modifier_id,
            proID,
        };
        $.ajax({
            method,
            url,
            headers,
            data, // data to be sent to server
            dataType: 'json', // type of data expecting back from server
            success: function (data) {
                // console.log(data);
                const { modifier_options ,modifier_id } = data;
                $("#modifier_id_edit_modifier").val(modifier_id); //input hidden value in modal
                modifier_option_select.val(modifier_options); // Select the option with a values in array
                modifier_option_select.trigger('change');
            },
            error: function (data) {
                console.log(data);
            }
        });
    }

    $("#modifiers-list-table").on("click", ".edit_modifier_btn", function (e) {
        e.preventDefault();
        var pMOId = $(this).attr("data-pmoption");
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });
        $.ajax({
            type: 'POST',
            url: "{{ route('modifier.get_product_modifier_option') }}",
            data: {pMOId: pMOId},
            success: function (data) {
                $("#edit_modifier_option_select").empty();
                editModifier(pMOId);
                $.each(data, function (key, value) {
                    $("#edit_modifier_option_select").append('<option value="' + value + '">' + key + '</option>');
                });
            }
        });
    });

    $("#IngData").on("click", ".ing_applies_on", function (e) {
        e.preventDefault();
        var porID = $(this).attr("data-pro-id");
        var IngID = $(this).attr("data-ing-id");
        var porIngOrderTypeID = $(this).attr("data-pro-ing-order-type-id");
        var porIngID = $(this).attr("data-pro-ing-id");
        if($(this).attr("data-order-type-status") == "selected") {
            var popmes = "You want to be unselect this!";
            var popyes = "Yes, unselect it!";
        } else {
            var popmes = "You want to be select this!";
            var popyes = "Yes, select it!";
        }
        Swal.fire({
            title: 'Are you sure?',
            text: popmes,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: popyes,
            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-danger m-1'
            },
            buttonsStyling: false
        }).then(function (result) {
            if (result.value) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: "{{ route('product.pro_ing_order_type') }}",
                    data: {porID: porID, IngID:IngID, porIngOrderTypeID:porIngOrderTypeID},
                    success: function (data) {
                        if(data.action == 'add') {
                            $('a.'+porIngID+' span').removeClass('badge-light-secondary').addClass('bg-secondary');
                            $('a.'+porIngID).attr("data-order-type-status", "selected");
                        } else {
                            $('a.'+porIngID+' span').removeClass('bg-secondary').addClass('badge-light-secondary');
                            $('a.'+porIngID).attr("data-order-type-status", "unselected")
                        }
                    }
                });
            }
        });
    });


    function updateModifierOption(product_id) {
        // alert('hi');
        let option_ids = $('#edit_modifier_option_select').val(); // select2 options
        let modifier_id = $('#modifier_id_edit_modifier').val();
        const method = 'POST';
        const url = "{{ route('product.add_options') }}";
        const headers = {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        };
        const data = {
            product_id,
            option_ids,
            modifier_id,
        };
        if(option_ids.length >0){
            $.ajax({
                method,
                url,
                headers,
                data, // data to be sent to server
                dataType: 'json', // type of data expecting back from server
                success: function (data) {
                    console.log(data);
                    const {status, message,} = data;
                    Swal.fire({
                        icon: 'success',
                        title: `${status}`,
                        text: `${message}`,
                    })
                    $('#edit_modifier_modal').modal('hide');
                },
                error: function (data) {
                    console.log(data);
                }
            });

        }else {
            Swal.fire({
                title: 'Error!',
                text: 'Select Modifier Options!',
                icon: 'error',
                customClass: {
                    confirmButton: 'btn btn-primary'
                },
                showClass: {
                    popup: 'animate__animated animate__shakeX'
                },
                buttonsStyling: false
            });
        }
    }

    function removeModifier(modifier_id){
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Yes, delete it!',
            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-danger m-1'
            },
            buttonsStyling: false
        }).then(function (result) {
            if (result.value) {
                var product_id = $('.product_id').val(); // product_id - hidden
                const method = 'POST';
                const url = "{{ route('product.remove_modifier') }}";
                const headers = {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                };
                const data = {
                    product_id,
                    modifier_id,
                    _method: "DELETE"
                };
                $.ajax({
                    method,
                    url,
                    headers,
                    data, // data to be sent to server
                    dataType: 'json', // type of data expecting back from server
                    success: function (data) {
                        console.log(data);
                        const { status, message, product_modifiers } = data;
                        const modifier_table = $('#modifiers-list-table-body');
                        modifier_table.empty();
                        $.each(product_modifiers, function(i, modifier){
                            modifier_table
                                .append(`<tr>
                            <td>${modifier.name}</td>
                            <td>${modifier.reference}</td>
                            <td>
                                <div class="input-group input-group-md" style="max-width: 160px; margin-left: 40px">
                                    <input type="number" class="form-control" name="mod[${modifier.id}][min]"  value="${modifier.pivot.min_level}"/>
                                </div>
                            </td>
                            <td>
                                <div class="input-group input-group-md" style="max-width: 160px; margin-left: 40px">
                                    <input type="number" class="form-control"  name="mod[${modifier.id}][max]"  value="${modifier.pivot.max_level}"/>
                                </div>
                            </td>
                            <td>
                                <a onclick="editModifier(${modifier.id})" class="edit_modifier_btn btn btn-sm btn-primary waves-effect waves-float waves-light" type="button"
                                               data-toggle="modal" data-target="#edit_modifier_modal"> Edit
                            </a>
                                <a  onclick="removeModifier(${modifier.id})" href="#" class="btn mr-1 remove-modifier-btn btn-sm btn-danger waves-effect waves-float waves-light" type="button">
                                    Delete
                                </a>
                            </td>
                        </tr>`);
                        });
                        Swal.fire({
                            icon: 'success',
                            title: `${status}`,
                            text: `${message}`,
                        })
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            }
        });
    }
    $(".modUpdate").on("click", ".allModUpdate", function (e) {
        // alert('hi update');
        e.preventDefault();
        // console.log($('form.mod-form').serializeArray());
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });
        $.ajax({
            type: 'POST',
            url: "{{ route('product.update_modifier') }}",
            data: $('form.mod-form').serializeArray(),
            success: function (data) {

                Swal.fire({
                    position: 'bottom-end',
                    icon: 'success',
                    title: 'Modifier has been Updated successfully',
                    showConfirmButton: false,
                    timer: 1500,
                    customClass: {
                        confirmButton: 'btn btn-primary'
                    },
                    buttonsStyling: false
                });
            }
        });
    });

    function ingUpdate(rowCountNum) {
        var rowCount = $('.prowdata_ing tr').length;
        if (rowCount > rowCountNum) {
            $('.ingUpdate').show();
        } else {
            $('.ingUpdate').hide();
        }
    }

    $("#addIngDiv").on("click", ".getIng", function (e) {
        e.preventDefault();
        var pId = $(".product_id").val();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });
        $.ajax({
            type: 'POST',
            url: "{{ route('product.get_ingredient') }}",
            data: {pId: pId},
            success: function (data) {
                $("#addIngre").empty();
                $.each(data, function (key, value) {
                    $("#addIngre").append('<option value="' + key + '">' + value + '</option>');
                });
            }
        });
    });

    $("#addIngredient").on("click", ".addIng", function (e) {
        e.preventDefault();
        var itemIds = $(".add_ingredient").val();
        var pId = $(".product_id").val();
        if (itemIds != '') {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                }
            });
            $.ajax({
                type: 'POST',
                url: "{{ route('product.add_ingredient') }}",
                data: {itemIds: itemIds, pId: pId},
                success: function (data) {
                    $('.prowdata_ing tbody').append(data.table_data);
                    $('#addIngredient').modal('hide');
                    ingUpdate(1);
                }
            });
        }else {
            Swal.fire({
                title: 'Error!',
                text: 'Select Ingredients',
                icon: 'error',
                customClass: {
                    confirmButton: 'btn btn-primary'
                },
                showClass: {
                    popup: 'animate__animated animate__shakeX'
                },
                buttonsStyling: false
            });
        }
    });

    $(".prowdata_ing").on("click", ".removeItemPro", function (e) {
        e.preventDefault();
        let id = this.id;
        let porID = $(this).attr("data-pro-id");
        let IngID = $(this).attr("data-ing-id");
        let selectedTr = $(this).closest('tr');
        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, remove it!",
            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-outline-danger ml-1'
            },
            buttonsStyling: false
        }).then(function(result) {
            if (result.value) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()
                    }
                });
                $.ajax({
                    type:'POST',
                    url:'{{ route('product.remove_ingredient') }}',
                    data:{id:id,porID:porID,IngID:IngID},
                    success:function(data)
                    {
                        selectedTr.remove();
                        if (buttonUpdate == 'yes') {
                            var rowCount = $('.prowdata_ing tr').length;
                            console.log(rowCount);
                            if(rowCount > 1) {
                                $('.ingUpdate').show();
                            } else {
                                $('.ingUpdate').hide();
                            }
                        }
                    }
                });
                Swal.fire({
                    icon: 'success',
                    title: 'Removed!',
                    text: 'Your record has been removed.',
                    customClass: {
                        confirmButton: 'btn btn-success'
                    }
                });
            }
        });
    });

    $(".ingUpdate").on("click", ".allIngUpdate", function (e) {
        e.preventDefault();
        // console.log($('form.a-form').serializeArray());
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('input[name="_token"]').val()
            }
        });
        $.ajax({
            type: 'POST',
            url: "{{ route('product.update_ingredient') }}",
            data: $('form.a-form').serializeArray(),
            success: function (data) {
                Swal.fire({
                    position: 'bottom-end',
                    icon: 'success',
                    title: 'Ingredient has been saved',
                    showConfirmButton: false,
                    timer: 1500,
                    customClass: {
                        confirmButton: 'btn btn-primary'
                    },
                    buttonsStyling: false
                });
            }
        });
    });

</script>
@endpush