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

        <div class="content-body">
            <!-- Basic Horizontal form layout section start -->
            <section id="basic-horizontal-layouts">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h4 class="card-title">{{__('messages.EditModifierOptions')}}</h4>
                            </div>
                            <div id="modifier_option" class="card-body">
                                <form class="form" action="{{ route('modifier_option.update',$modifier_option->id) }}" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="name" data-toggle="tooltip" data-placement="top" data-original-title="The name of modifier option.">{{__('messages.name')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <input type="text" id="name" class="form-control"  name="name" value="{{$modifier_option->name}}" />
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="name">SKU</label>
                                                <div class="input-group">
                                                    <input type="text" class="form-control" name="sku"  aria-describedby="sku" value="{{$modifier_option->sku}}" />
                                                    <div class="input-group-append" id="sku">
                                                        <button class="btn btn-outline-primary" type="button">Generate</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> --}}
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="name" data-toggle="tooltip" data-placement="top" data-original-title="Choose the modifier of this option.">{{__('messages.Modifiers')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <select class="select2 form-control form-control-lg" id="modifier_id"  name="modifier_id" required>
                                                    @foreach($modifierId as $modif)
                                                        <option value="{{$modif->id}}" {{$modif->id == $modifier_option->modifier ?  'selected' : ''}}>{{$modif->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="tax_group">Modifier</label>
                                                <select class="select2 form-control form-control-lg" name="modifier" value="{{$modifier_option->modifier}}">
                                                    <option value="1">one</option>
                                                    <option value="2">two</option>
                                                </select>
                                            </div>
                                        </div> --}}
{{--                                        <div class="col-md-4 col-12">--}}
{{--                                            <div class="form-group">--}}
{{--                                                <label class="asterisk" for="name" data-toggle="tooltip" data-placement="top" data-original-title="Stock Keeping Unit is a code of numbers or letters identify the modifier option.">{{__('messages.SKU')}} <span></span><i data-feather='alert-circle' class=""> </i></label>--}}
{{--                                                <div class="input-group">--}}
{{--                                                    <input type="text" class="form-control" name="sku"  aria-describedby="sku" id="sku" readonly  value="{{$modifier_option->sku}}"/>--}}
{{--                                                    <div class="input-group-append" id="sku">--}}
{{--                                                        <button class="btn btn-outline-primary sku_generate" disabled type="button">{{__('messages.Generate')}}</button>--}}
{{--                                                    </div>--}}
{{--                                                </div>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}

                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="name" data-toggle="tooltip" data-placement="top" data-original-title="To set modifier option price.">{{__('messages.Price')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <input type="text" id="price" class="form-control " name="price" value="{{$modifier_option->price}}"  step=".01"/>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="name" data-toggle="tooltip" data-placement="top" data-original-title="To choose the tax group applied to this modifier option.">{{__('messages.VAT%')}} <i data-feather='alert-circle' class=""> </i></label>
                                                <select class="select2 form-control form-control-lg" name="tax_id" >
                                                    <option value="" >{{__('messages.SelectVat')}}</option>
                                                    @foreach($tax as $taxItem)
                                                        <option value="{{$taxItem->id}}" {{$taxItem->id == $modifier_option->tax_group ? 'selected':''}}>{{$taxItem->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label for="closing">Costing Method</label>
                                                <select class="select2 form-control form-control-lg" name="costing_method" value="{{$modifier_option->costing_method}}">
                                                    <option value="1">one</option>
                                                    <option value="2">two</option>
                                                </select>
                                            </div>
                                        </div> --}}
                                        <div class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="name" data-toggle="tooltip" data-placement="top" data-original-title="Choose the way of modifier option costing.">{{__('messages.CostingMethod')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <select  class="select2 form-control form-control-lg" onclick="costing_method" name="costing_method" id="costing_method">
                                                    @foreach($costing_method as $costing)
                                                        <option value="{{$costing->id}}" {{$costing->id == $modifier_option->costing_method ?  'selected' : ''}} >{{$costing->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                        <div  class="col-md-4 col-12">
                                            <div class="form-group">
                                                <label class="asterisk" for="name" data-toggle="tooltip" data-placement="top" data-original-title="Fixed cost per unit.">{{__('messages.COST')}} <span></span><i data-feather='alert-circle' class=""> </i></label>
                                                <input type="text" id="cost" class="form-control" name="cost" value="{{$modifier_option->cost}}"/>
                                            </div>
                                        </div>
                                        <div class="col-md-4 col-12">
                                            <div class="custom-control custom-switch custom-switch-success">
                                                <p class="mb-50">{{__('messages.STATUS')}}</p>
                                                <input type="checkbox" value="1" {{$modifier_option->status ?'checked':''}} class="custom-control-input"  onclick="checkProduct( {{ $modifier_option->id}} )" name="status" id="customSwitch111"  />
                                                <label class="custom-control-label" for="customSwitch111">
                                                    <span class="switch-icon-left"><i data-feather="check"></i></span>
                                                    <span class="switch-icon-right"><i data-feather="x"></i></span>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-12 text-right">
                                            <button class="btn btn-secondary waves-effect waves-float waves-light mr-1" type="button" onclick="location.href='{{ route('modifier_option.list') }}'"><i data-feather='chevron-left' class="mr-1"></i>{{__('messages.Back')}}</button>
{{--                                            <button type="reset" class="btn btn-outline-secondary mr-1" onclick="location.href='{{ route('modifier_option.list') }}'">Back</button>--}}
                                            <button type="submit" class="btn btn-primary">{{__('messages.Submit')}}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- Basic Horizontal form layout section end -->
        </div>

    </div>
</div>



<div class="modal-size-lg d-inline-block">
    <!-- Modal -->
    <div class="modal fade text-left" id="create" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <form class="dt_adv_search" method="POST">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel17">New @yield('stitle')</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-row mb-1">
                                    <div class="col-lg-4">
                                        <label>Type:</label>
                                        <input type="text" class="form-control dt-input dt-full-name" data-column="1" placeholder="Alaric Beslier" data-column-index="0" />
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Email:</label>
                                        <input type="text" class="form-control dt-input" data-column="2" placeholder="demo@example.com" data-column-index="1" />
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Post:</label>
                                        <input type="text" class="form-control dt-input" data-column="3" placeholder="Web designer" data-column-index="2" />
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-lg-4">
                                        <label>City:</label>
                                        <input type="text" class="form-control dt-input" data-column="4" placeholder="Balky" data-column-index="3" />
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Date:</label>
                                        <div class="form-group mb-0">
                                            <input type="text" class="form-control dt-date flatpickr-range dt-input" data-column="5" placeholder="StartDate to EndDate" data-column-index="4" name="dt_date" />
                                            <input type="hidden" class="form-control dt-date start_date dt-input" data-column="5" data-column-index="4" name="value_from_start_date" />
                                            <input type="hidden" class="form-control dt-date end_date dt-input" name="value_from_end_date" data-column="5" data-column-index="4" />
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <label>Salary:</label>
                                        <input type="text" class="form-control dt-input" data-column="6" placeholder="10000" data-column-index="5" />
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" data-dismiss="modal">Accept</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection
@push('my_scripts')
<script>
    $('.form').validate({
        rules: {
            name: {
                required: true
            },
            modifier_id: {
                required: true
            },
            price: {
                required: true
            },
            costing_method: {
                required: true
            },
            cost: {
                required: true
            },
        },
        messages:{
            name: {
                required: "Please provide a Name",
            },
            modifier_id: {
                required: "Please provide a Modifiers",
            },
            price: {
                required: "Please provide a Modifiers Price",
            },
            costing_method: {
                required: "Please provide a Costing Method",
            },
            cost: {
                required: "Please provide a COST ",
            },
        },
        errorElement: 'span',
        errorPlacement: function (error, element) {
            error.addClass('invalid-feedback');
            element.closest('.form-group').append(error);
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('is-invalid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('is-invalid');
        }
    });



    if($("#costing_method").val() =='2') {

        document.getElementById("cost").disabled = true;
    } else {
        document.getElementById("cost").disabled = false;
            // alert('1');
        }
    $('#costing_method').on('change', function() {
        if(this.value =='2') {
            document.getElementById("cost").disabled = true;
        } else {
            document.getElementById("cost").disabled = false;
            // alert('1');
        }

 });

 $("#modifier_option").on("click", ".sku_generate", function(e){
            e.preventDefault();

            var modifierId = $("#modifier_id").val();
            // alert(modifierId);

            if(modifierId == "") {
                Swal.fire({

                    title: 'Error!',
                    text: ' Please provide Modifier!',
                    icon: 'error',
                    customClass: {
                        confirmButton: 'btn btn-primary'
                    },
                    showClass: {
                        popup: 'animate__animated animate__tada'
                    },
                    buttonsStyling: false
                });
                $("#sku").val('');
            } else {

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('input[name="_token"]').val()

                    }
                });

                $.ajax({
                    // alert(modifierId);
                   type:'POST',
                    url:"{{ route('modifier_option.generate') }}",
                    data:{modifierId:modifierId},
                    success:function(data)
                    {

                        $("#sku").val(data.finalRef);

                    }
                });
            }
        });

    function checkProduct(id){
        const method = 'POST';
        const url = "{{ route('modifier_option.check_product_option') }}";
        const headers = {
            'X-CSRF-TOKEN': $('input[name="_token"]').val()
        };
        const data = {
            id,
            _method: "POST"
        };
        $.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);
                if(data.status == 'Error'){
                    Swal.fire({
                        icon: 'warning',
                        title: 'Not Disabled!',
                        text: `${data.message}`,
                        customClass: {
                            confirmButton: 'btn btn-success'
                        }
                    }).then(function(){
                        window.location.reload();
                    })
                }else{
                    Swal.fire({
                        icon: 'Success',
                        title: `${data.status}`,
                        text: `${data.message}`,
                        customClass: {
                            confirmButton: 'btn btn-success'
                        }
                    }).then(function(){
                        window.location.reload();
                    })
                }
            },
            error: function (data) {
                console.log(data);
            }
        });
    }
</script>

@endpush