@extends('layouts.master')
@section('content')
    <style>
        .pt-9 {
            padding-top: 9px;
        }

        .grayTopborder {
            border-top: solid 1px #e5e5e5
        }

        .assCatalogue-radio {
            margin: 10px 15px;
            background-color: #f6f6f6;
        }

        .RrulesHeading {
            padding: 0px 20px 10px 20px !important;
            background: transparent !important;
            border-bottom: solid 1px #e5e5e5
        }

        .pt-3 {
            padding-top: 3px !important;
        }

        .red-bg {
            border: solid 1px #f12300 !important
        }

        .retailerTable {
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .retailerTable .table thead th {
            border-bottom: solid 1px #001e35 !important;
            background-color: #fff !important;
        }

        .retailerTable {
            padding: 0;
            margin: 0
        }

        .retailerTable tr {
            border-bottom: solid 1px #eeeeee
        }

        .retailerTable td {
            padding-bottom: 7px;
            padding-top: 7px
        }

        .add-pr-btn {
            padding: 6px 18px;
            letter-spacing: 1px;
            font-size: 13px;
            line-height: 1;
            float: right;
            margin-right: -15px;
        }

        .productSearch {
            position: relative;
        }

        .productSearch input {
            height: 32px;
            border: solid 1px #eae9e9;
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
            padding-left: 30px;
            font-size: 13px;
            letter-spacing: 1px;
        }

        .productSearch .fa {
            position: absolute;
            top: 8px;
            left: 8px;
            color: #b5b5b5;
        }

        .AddProductTable {
            padding: 0;
            margin: 0
        }

        .AddProductTable tr {
            border-bottom: solid 1px #eeeeee
        }

        .AddProductTable td {
            padding-bottom: 7px;
            padding-top: 7px
        }

        .ProListDiv {
            padding: 0;
            display: table;
        }

        .ProListDiv .PR_Name {
            display: table-cell;
            vertical-align: middle;
            font-size: 13px;
            letter-spacing: 1px;
            line-height: 18px
        }

        .ProListDiv .PrList_img {
            width: 33px;
            height: 33px;
            margin-right: 8px;
            border: solid 1px #e0e0e0
        }

        .AddProductTable .btn-default {
            padding: 5px 8px;
            font-size: 13px;
            -webkit-border-radius: 0;
            -moz-border-radius: 0;
            border-radius: 0;
            -khtml-border-radius: 0;
            background: linear-gradient(90deg, #001e35 0%, #001e35 100%);
            color: #fff;
            text-align: center;
            margin: 0;
            line-height: 1;
            min-width: 74px;
            letter-spacing: 1px;
            float: right;
            border: none !important
        }

        .se_cus-type .form-control {
            border: 1px solid #eeeeee;
            background-color: #fff;
        }

        .retailerTable .table .btn-line:HOVER {
            border-color: #f12300 !important;
            color: #fff;
            background: linear-gradient(90deg, #f12300 0%, #f12300 100%);
        }

        .custom-file-label {
            color: #495057;
            background-color: #f6f6f6;
            border: 1px solid #f6f6f6;
            border-radius: 0;
            font-size: 14px;
            line-height: 24px;
        }

        .custom-file-label::after {
            background-color: #0038ba;
            border-left: 1px solid #0038ba;
            color: #fff;
            border-radius: 0;
            line-height: 24px;
        }

        .dropify-wrapper {
            height: 72px;
        }

        .dropify-wrapper .dropify-message span.file-icon {
            font-size: 35px;
        }

        .textarea-h {
            height: 72px !important;
        }


        .assCatalogue-radio .form-s2 .select2-container .select2-selection--single {
            border: 1px solid #e9e9e9;
            background-color: #fff;
        }

        .pl-50 {
            padding-left: 50px !important;
        }
    </style>


    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Promotion <span> Management</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Promotion </span></a></li>
                <li><span>Create</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 mb-30">
            <div class="card PB-20">
                <form method="post" action="{{  is_null($scheme)  ? route('store-loyalty-scheme') : route('update-loyalty-scheme',['id'=>$scheme->id]) }}" enctype="multipart/form-data" name="loyalty_offer_form" id="loyalty_offer_form">
                    @csrf
                <div id="floating-label">

                    <div class="header">
                        <h2>Create <span> Promotion </span></h2>
                    </div>



                    <div class="header RrulesHeading mt-15">
                        <h2>Promotion <span>Details</span></h2>
                    </div>

                    <div class="col-12">

                        <div class="row">
                            <div class="col-6 pr-0">
                                <label class="font12 mb-5">Promotion Title</label>
                                <div class="form-group h-auto">
                                    <input is_required="true" type="text" name="title" id="title" class="form-control" placeholder="">
                                </div>
                            </div>

                            <div class="col-3 pr-0">
                                <label class="font12 mb-5">Start Date</label>
                                <div class="form-group h-auto">
                                    <input is_required="true" type="text" input-type="date" id="start_date" name="start_date" class="form-control" autocomplete="off" placeholder="">
                                </div>
                            </div>

                            <div class="col-3">
                                <label class="font12 mb-5">End Date</label>
                                <div class="form-group h-auto">
                                    <input is_required="true" type="text" input-type="date" id="end_date" name="end_date" class="form-control" autocomplete="off" placeholder="">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 pr-0">
                                <label class="font12 mb-5">Description</label>
                                <div class="form-group h-auto">
                                    <textarea is_required="true" class="form-control textarea-h" name="description" id="description" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="font12 mb-5">Add Picture</label>
                                <div class="form-wrap p-0">
                                    <div class="upload-pic"></div>
                                    <input type="file" name="scheme_picture" id="input-file-now" class="dropify">
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="header RrulesHeading mt-10">
                        <h2>eligibility <span>Criteria</span></h2>
                    </div>

                    <div class="row m-0">
                        <div class="col-12 PT-5"> <strong>Sales Evaluation Period:</strong></div>
                        <div class="col-3 pr-0">
                            <label class="font12 mb-5">Sales Evaluation Type</label>
                            <div class="form-s2">
                                <select is_required="true" class="form-control formselect" name="sale_criteria_type" id="sale_criteria_type" placeholder="select Unit Type" style="width:100%">
                                    <option value="1">By Days</option>
                                    <option value="2">By Custom Date</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-3 pr-0 sale_criteria_type-by-days">
                            <label class="font12 mb-5">No of Last Days</label>
                            <div class="form-group h-auto">
                                <input is_required="true" is-depends-on="sale_criteria_type" is-depends-val="1" type="text" id="criteria_last_days" name="criteria_last_days" class="form-control sale_criteria_type-by-days-inputs" autocomplete="off" placeholder="">
                            </div>
                        </div>


                        <div class="col-3 pr-0 sale_criteria_type-by-date" style="display: none">
                            <label class="font12 mb-5">Start Date</label>
                            <div class="form-group h-auto">
                                <input is_required="true" input-type="date" disabled is-depends-on="sale_criteria_type" is-depends-val="2" type="text" id="criteria_start_date" name="criteria_start_date" class="form-control sale_criteria_type-by-date-inputs" autocomplete="off" placeholder="">
                            </div>
                        </div>

                        <div class="col-3 pr-0 sale_criteria_type-by-date" style="display: none">
                            <label class="font12 mb-5">End Date</label>
                            <div class="form-group h-auto">
                                <input is_required="true" input-type="date" disabled  is-depends-on="sale_criteria_type" is-depends-val="2"  type="text" id="criteria_end_date" name="criteria_end_date" class="form-control sale_criteria_type-by-date-inputs" autocomplete="off" placeholder="">
                            </div>
                        </div>

                        <div class="col-3 " >
                            <label class="font12 mb-5">Select Date Type</label>
                            <div class="form-s2">
                                <select is_required="true"    id="criteria_date_type" name="criteria_date_type"  class="form-control formselect " placeholder="select Evaluation Criteria" style="width: 100%">
                                    <option value="1">By Booking Date</option>
                                    <option value="2">By Execution Date</option>
                                </select>
                            </div>
                        </div>


                    </div>


                    <div class=" assCatalogue-radio PT-10 PB-10">
                        <div class="row m-0">

                            <div class="col-auto font13 mt-auto mb-auto">Sales Evaluation Criteria:</div>
                            <div class="col-auto  mt-auto mb-auto pr-400">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input sale_criteria" type="radio" name="sale_criteria" id="sale_criteria-volume" value='1' checked>
                                    <label class="custom-control-label font13 pt-3" for="sale_criteria-volume">By Volume</label>
                                </div>
                            </div>

                            <div class="col-auto mt-auto mb-auto pr-400">
                                <div class="custom-control custom-radio">
                                    <input class="custom-control-input sale_criteria" type="radio" name="sale_criteria" id="sale_criteria-value" value='2' >
                                    <label class="custom-control-label font13 pt-3" for="sale_criteria-value">By Value</label>
                                </div>
                            </div>

                            <div class="col-auto font13 mt-auto mb-auto pr-0 pl-50 sale_criteria_unit_type">Select Unit Type</div>
                            <div class="col-4 sale_criteria_unit_type">
                                <div class="form-s2">
                                    <select is_required="true"  is-depends-on="sale_criteria" is-depends-val="1" is-class="1" class="form-control formselect sale_criteria_unit_type" name="sale_criteria_unit_type" id="sale_criteria_unit_type" placeholder="select Unit Type" style="width:100%">
                                        <option value="1">Master Packing</option>
                                        <option value="2">Retail Unit</option>
                                    </select>
                                </div>
                            </div>


                            <div class="col-auto font13 mt-auto mb-auto pr-0 pl-50 sale_criteria_value_type">Select Value Type</div>
                            <div class="col-4 sale_criteria_value_type">
                                <div class="form-s2">
                                    <select is_required="true" is-depends-on="sale_criteria" is-depends-val="2" is-class="1" class="form-control formselect sale_criteria_value_type" name="sale_criteria_value_type" id="sale_criteria_value_type"  placeholder="Select Discount Apply Criteria"
                                            style="width: 100%">
                                        <option value="1">Gross Value</option>
                                        <option value="2">Net Value</option>
                                    </select>
                                </div>
                            </div>

                        </div>


                    </div>


                    <div class="row m-0">
                        <div class="col-3 pr-0">
                            <label class="font12 mb-5">Minimum Value</label>
                            <div class="form-group h-auto">
                                <input is_required="true" type="text" name="sale_criteria_min_value" id="sale_criteria_min_value" class="form-control" placeholder="">
                            </div>
                        </div>

                        <div class="col-3 pr-0">
                            <label class="font12 mb-5">Maximum Intervals Allowed</label>
                            <div class="form-group h-auto">
                                <input is_required="true" type="text" name="sale_criteria_max_interval" id="sale_criteria_max_interval" class="form-control" placeholder="">
                            </div>
                        </div>

                    </div>

                    <div class="row m-0 PT-10 PB-10">

                        <div class="col-12 font13 PB-5">Allow the promotion to be applied on live booking ?</div>
                        <div class="col-auto  mt-auto mb-auto pr-400">
                            <div class="custom-control custom-radio">
                                <input is_required="true" class="custom-control-input allow_live_booking_sale" type="radio" name="allow_live_booking_sale" id="allow_live_booking_sale-yes" value='1'>
                                <label class="custom-control-label font13 pt-3" for="allow_live_booking_sale-yes">Yes</label>
                            </div>
                        </div>

                        <div class="col-auto mt-auto mb-auto pr-400">
                            <div class="custom-control custom-radio">
                                <input is_required="true" class="custom-control-input allow_live_booking_sale" type="radio" name="allow_live_booking_sale" id="allow_live_booking_sale-no" value='0' checked>
                                <label class="custom-control-label font13 pt-3" for="allow_live_booking_sale-no">No</label>
                            </div>
                        </div>



                    </div>


                    <div class="header RrulesHeading mt-15">
                        <h2>Reward <span></span></h2>
                    </div>

                    <div class="row m-0">
                        <div class="col-3 pr-0">
                            <label class="font12 mb-5">Select Reward Type</label>
                            <div class="form-s2">
                                <select is_required="true" class="form-control formselect" name="reward_type" id="reward_type" placeholder="Select Reward Type" style="width: 100%">
                                    <option value="1">Order Discount</option>
                                    <option value="2">Free Product</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-3 pr-0 reward_type-order-value">
                            <label class="font12 mb-5">Select Discount Type</label>
                            <div class="form-s2">
                                <select is_required="true" is-depends-on="reward_type" is-depends-val="1" class="form-control formselect reward_type-order-value-inputs" name="reward_discount_type" id="reward_discount_type" placeholder="Select Discount Type" style="width: 100%">
                                    <option value="1">Value</option>
                                    <option value="2">Percentage</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-3 pr-0 reward_type-order-value">
                            <label class="font12 mb-5">Select Discount Apply Criteria </label>
                            <div class="form-s2">
                                <select is_required="true" is-depends-on="reward_type" is-depends-val="1" class="form-control formselect  reward_type-order-value-inputs" name="reward_discount_apply_on" id="reward_discount_apply_on"  placeholder="Select Discount Apply Criteria"
                                        style="width: 100%">
                                    <option value="1">Gross Value</option>
                                    <option value="2">Net Value</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-3 pr-2 reward_type-order-value"  >
                            <label class="font12 mb-5">Reward Discount Value</label>
                            <div class="form-group h-auto">
                                <input is_required="true"  is-depends-on="reward_type" is-depends-val="1"  type="text"  name="reward_discount_value" id="reward_discount_value" class="form-control  reward_type-order-value-inputs" placeholder="">
                            </div>
                        </div>



                        <div class="col-3 pr-2 reward_type-free-product" style="display: none">
                            <label class="font12 mb-5">Select Product </label>
                            <div class="form-s2">
                                <select is_required="true" disabled is-depends-on="reward_type" is-depends-val="2"  class="form-control formselect reward_type-free-product-inputs" name="reward_item_id" id="reward_item_id" placeholder="Select Product" style="width: 100%">
                                    <option value="">Product Name</option>
                                    @foreach($products as $product)
                                        <option value="{{$product->item_id}}">{{$product->item_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-3 pr-0 reward_type-free-product"  style="display: none">
                            <label class="font12 mb-5">Free Quantity</label>
                            <div class="form-group h-auto">
                                <input is_required="true" disabled  is-depends-on="reward_type" is-depends-val="2"  type="text"  name="reward_free_qty" id="reward_free_qty" class="form-control  reward_type-free-product-inputs" placeholder="">
                            </div>
                        </div>

                        <div class="col-3">
                            <label class="font12 mb-5">Maximum Discount Value</label>
                            <div class="form-group h-auto">
                                <input is_required="true" type="text" name="reward_max_discount_value" id="reward_max_discount_value" class="form-control" placeholder="">
                            </div>
                        </div>

                        <div class="col-3 pr-0">
                            <label class="font12 mb-5">Maximum Discount Interval</label>
                            <div class="form-group h-auto">
                                <input is_required="true" type="text" name="reward_max_discount_interval" id="reward_max_discount_interval" class="form-control" placeholder="">
                            </div>
                        </div>

                    </div>

                    <div class="col-md-12 text-right PT-30">
                        <button type="submit" class="btn btn-primary mr-2">Save</button>
                        <a href="{{route('loyalty-scheme')}}"  class="btn btn-cancel mr-2">Cancel</a>
                    </div>

                </div>
                </form>
            </div>

        </div>
    </div>

@endsection

@push('scripts')
    <script>
        var segments    =  location.href;
        segments        =  $.trim(segments.replace('#', ''));
        segments        =  segments.split('/');
        $('#start_date, #end_date, #criteria_start_date, #criteria_end_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            toggleActive: true,
            format: 'yyyy-mm-dd'
        }).on('changeDate', function (ev) {
            $(this).datepicker('hide');
        });






        $(document).on('click','.sale_criteria',function () {
            $('.sale_criteria_unit_type').hide();
            $('.sale_criteria_value_type').hide();
            $('.sale_criteria_unit_type').attr('disabled','disabled');
            $('.sale_criteria_value_type').attr('disabled','disabled');
            if($(this).val() == 1){
                $('.sale_criteria_unit_type').show();
                $('.sale_criteria_unit_type').removeAttr('disabled');
            }else{
                $('.sale_criteria_value_type').show();
                $('.sale_criteria_value_type').removeAttr('disabled');
            }
        });

        $(document).on('change','#reward_type',function () {
            $('.reward_type-free-product').hide();
            $('.reward_type-order-value').hide();
            $('.reward_type-free-product-inputs').attr('disabled','disabled');
            $('.reward_type-order-value-inputs').attr('disabled','disabled');
            if($(this).val() == 2){
                $('.reward_type-free-product').show();
                $('.reward_type-free-product-inputs').removeAttr('disabled');
            }else{
                $('.reward_type-order-value').show();
                $('.reward_type-order-value-inputs').removeAttr('disabled');
            }
        })
        $(document).on('change','#sale_criteria_type',function () {
            $('.sale_criteria_type-by-date').hide();
            $('.sale_criteria_type-by-days').hide();
            $('.sale_criteria_type-by-date-inputs').attr('disabled','disabled');
            $('.sale_criteria_type-by-days-inputs').attr('disabled','disabled');
            if($(this).val() == 2){
                $('.sale_criteria_type-by-date').show();
                $('.sale_criteria_type-by-date-inputs').removeAttr('disabled');
            }else{
                $('.sale_criteria_type-by-days').show();
                $('.sale_criteria_type-by-days-inputs').removeAttr('disabled');
            }
        })
        function changeEvent(thisevent){
            if($.trim(thisevent.val()) == ''){
                if (thisevent.hasClass("formselect")) {
                    thisevent.parent().find(".select2-container").css("border", "1px solid red");
                } else {
                    thisevent.css('border', '1px solid red')
                }
            }else{
                if (thisevent.hasClass("formselect")) {
                    $('.required, .select2-container').css('border', '1px solid #f6f6f6')
                } else {
                    thisevent.css('border', '1px solid #f6f6f6')
                }
            }
        }
        $(document).on('keyup','.form-control',function () {
            changeEvent($(this))
        })
        $(document).on('blur','.form-control',function () {
            changeEvent($(this))
        })
        $(document).on('change','.form-control',function () {
            changeEvent($(this))
        })

        $(document).on('focusout','.form-control',function () {
            changeEvent($(this))
        })

        $(document).ready(function (e) {
            $('#input-file-now').dropify();
            $(".formselect").select2();
            $("#loyalty_offer_form").on('submit',(function(e) {
                e.preventDefault();
                let flag = false;
                $('#loyalty_offer_form .form-control').each(function( index ) {
                   let is_required =  $(this).attr('is_required');
                   if( typeof  is_required !== 'undefined' && is_required == 'true' ){
                       if($.trim($(this).val()) == '') {
                            if($(this).attr('is-depends-on') == 'undefined' || $(this).attr('is-depends-on') == null ||  $(this).attr('is-depends-on') == ''  ){
                                //error
                                flag = true;
                                console.log($(this).attr('name') +' field is missing')
                                if ($(this).hasClass("formselect")) {
                                    $(this).parent().find(".select2-container").css("border", "1px solid red");
                                } else {
                                    $(this).css('border', '1px solid red')
                                }
                            }else{
                                var is_depends_on_val   =   '#';
                                if(typeof $(this).attr('is-class') != 'undefined' && $(this).attr('is-class') == '1'){
                                    is_depends_on_val   =    $('.'+$(this).attr('is-depends-on')+':checked').val();
                                    //alert($(this).attr('is-depends-on')+"  => "+is_depends_on_val);
                                }else{
                                    is_depends_on_val   =    $('#'+$(this).attr('is-depends-on')).val()
                                }
                                if( is_depends_on_val == $(this).attr('is-depends-val') ){
                                    //error
                                    flag = true;
                                    if ($(this).hasClass("formselect")) {
                                        $(this).parent().find(".select2-container").css("border", "1px solid red");
                                    } else {
                                        $(this).css('border', '1px solid red')
                                    }
                                }
                            }
                       }

                   }

                });
                if(flag){
                    $('#notifDiv').fadeIn();
                    $('#notifDiv').css('background', 'red');
                    $('#notifDiv').text('Please provide all the required information (*).');
                    setTimeout(() => {
                        $('#notifDiv').fadeOut();
                    }, 3000);
                    return;
                }
                $.ajax({
                    url: $("#loyalty_offer_form").attr('action'),
                    type: "POST",
                    data:  new FormData(this),
                    contentType: false,
                    cache: false,
                    processData:false,
                    beforeSend : function()
                    {
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'blue');
                        $('#notifDiv').text('processing....');

                    },
                    success: function(data)
                    {
                        if(data.status == 'success'){

                            $('#notifDiv').fadeIn();
                            $('#notifDiv').css('background', 'green');
                            $('#notifDiv').text(data.msg);
                            setTimeout(() => {
                                $('#notifDiv').fadeOut();
                            }, 3000);
                            window.location = "{{route('loyalty-scheme')}}";
                        }else{
                            $('#notifDiv').fadeIn();
                            $('#notifDiv').css('background', 'green');
                            $('#notifDiv').text(data.msg);
                            setTimeout(() => {
                                $('#notifDiv').fadeOut();
                            }, 3000);
                        }
                    },
                    error: function(e)
                    {
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'red');
                        $('#notifDiv').text('Some thing when wrong.');
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);
                    }
                });
            }));
        });
        if(segments[3] == 'EditLoyaltyScheme'){

            $.ajax({
                url: `/LoyaltyScheme/${segments[4]}`,
                type: "get",
                contentType: false,
                cache: false,
                processData:false,
                beforeSend : function()
                {
                    $('#notifDiv').fadeIn();
                    $('#notifDiv').css('background', 'blue');
                    $('#notifDiv').text('Loyalty Offer .... ');

                },
                success: function(data)
                {
                    if(data.status == 'success'){

                        if(data.data){
                            let scheme= data.data;
                            let keys = Object.keys(data.data);
                            keys.forEach(key=>{
                                $(`#${key}`).val(scheme[key]);
                                if($(`#${key}`).hasClass("formselect")){
                                    $(`#${key}`).trigger('change');
                                }
                                else if(typeof $(`#${key}`).attr('type') !== 'undefined' && $(`#${key}`).attr('type') == 'text'){
                                    if(typeof $(`#${key}`).attr('input-type') !== 'undefined' && $(`#${key}`).attr('input-type') == 'date'){
                                        $(`#${key}`).datepicker({
                                            autoclose: true,
                                            todayHighlight: true,
                                            toggleActive: true,
                                            format: 'yyyy-mm-dd'
                                        }).on('changeDate', function (ev) {
                                            $(this).datepicker('hide');
                                        });
                                    }
                                }
                                // $(`#${key}`).blur();
                            });
                            //checkboxes
                            $('.sale_criteria').prop('checked',false);
                            if(scheme['sale_criteria'] == '1'){
                                $('#sale_criteria-volume').prop('checked',true);
                                $('#sale_criteria-volume').click();
                            }else{
                                $('#sale_criteria-value').prop('checked',true);
                                $('#sale_criteria-value').click();
                            }

                            $('.allow_live_booking_sale').prop('checked',false);
                            if(scheme['allow_live_booking_sale'] == '1'){
                                $('#allow_live_booking_sale-yes').prop('checked',true);
                                $('#allow_live_booking_sale-yes').click();
                            }else{
                                $('#allow_live_booking_sale-no').prop('checked',true);
                                $('#allow_live_booking_sale-no').click();
                            }

                        }



                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'green');
                        $('#notifDiv').text(data.msg);
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);




                    }else{
                        $('#notifDiv').fadeIn();
                        $('#notifDiv').css('background', 'green');
                        $('#notifDiv').text(data.msg);
                        setTimeout(() => {
                            $('#notifDiv').fadeOut();
                        }, 3000);
                    }
                },
                error: function(e)
                {
                    $('#notifDiv').fadeIn();
                    $('#notifDiv').css('background', 'red');
                    $('#notifDiv').text('Some thing when wrong.');
                    setTimeout(() => {
                        $('#notifDiv').fadeOut();
                    }, 3000);
                }
            });
        }

    </script>
@endpush