@extends('layouts.app')
@section('stitle', __('messages.ModifierOptions'))
@section('title', __('messages.ModifierOptions'))

@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">


        <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>
                </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('modifier_option.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-6">
                                    <label>{{__('messages.name')}}</label>
                                    <h5 class="mt-1">{{$modifier_option->name}}</h5>
                                <hr>
                                </div>
                                <div class="col-6">
                                <label>{{__('messages.Modifiers')}}</label>
                                    <h5 class="mt-1">{{ $modifier_option->getModifier->name}}</h5>
                                <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label>{{__('messages.SKU')}}</label>
                                    <h5 class="mt-1">{{$modifier_option->sku}}</h5>
                                <hr>
                                </div>
                                <div class="col-6">
                                <label>{{__('messages.Price')}}</label>
                                    <h5 class="mt-1">{{$modifier_option->price}}</h5>
                                <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label>{{__('messages.VATGroup')}}</label>
                                    <h5 class="mt-1">{{$modifier_option->tax->name ?? 'N/A'}}</h5>
                                <hr>
                                </div>
                                <div class="col-6">
                                <label>{{__('messages.CostingMethod')}}</label>
                                    <h5 class="mt-1">{{$modifier_option->costingMethod->name ?? 'N/A'}}</h5>
                                <hr>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-6">
                                    <label>{{__('messages.Calories')}}</label>
                                    <h5 class="mt-1">-</h5>
                                <hr>
                                </div>
                                <div class="col-6">
                                    <label>{{__('messages.COST')}}</label>
                                    <h5 class="mt-1">{{$modifier_option->cost ?? 'N/A'}}</h5>
                                    <hr>
                                </div>
                            </div>

                        </div>
                    </div>
                </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></th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($modifier_option->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></td>
                                <td class="text-right">
                                    <button id="{{ $ing->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>

            <!-- 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="{{ $modifier_option->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>
                $("#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('modifier_option.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('modifier_option.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 selectedTr = $(this).closest('tr');
                    confirmationDelete(id, '{{ route('modifier_option.remove_ingredient') }}', selectedTr, 'yes', 1);
                });

                $(".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('modifier_option.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