@extends('reachassuree_admin/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
    .Position {
        margin-top: 2.3rem !important;
    }
</style>
<div class="page-content">
    <div class="container-fluid">
        @include('../reachassuree_admin/comman/header')
        <!-- end page title -->
        <!-- start row -->
        <div class="row ">

            <div class="card p-3">
                <form action="{{route('subscription.plan.save')}}" method="POST" id="plan" class="needs-validation" novalidate enctype="multipart/form-data">
                    <input type="hidden" name="subscription_plan_id" id="subscription_plan_id" value="0" />
                    @csrf
                    <div class="row">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="product_feature_product_id" class="form-label">Select Product Name</label>
                                    <select class="form-select  select2-ajax" id="subscription_plan_product_id" name="subscription_plan_product_id" required=""></select>
                                    <div class="invalid-feedback">Please select a product.</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="title" class="form-label">Plan Name</label>
                                    <input type="text" class="form-control" id="subscription_plan_name" name="subscription_plan_name" placeholder="Plan Name" value="" required>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="validationCustom03" class="form-label">Plan Type</label>
                                    <select class="form-select select2-ajax" id="plan_type" name="plan_type" required="">
                                        <option selected="" disabled="" value="">Choose...</option>
                                        <option value="1">Public</option>
                                        <option value="0">Private</option>
                                    </select>
                                    <div class="invalid-feedback">Please select a valid plan type.</div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="subscription_plan_hsn" class="form-label">HSN/SAC </label>
                                    <input type="text" class="form-control" id="subscription_plan_hsn_code" name="subscription_plan_hsn_code" placeholder="HSN/SAC" value="" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="subscription_plan_sgst" class="form-label">SGST%</label>
                                    <input type="text" class="form-control" id="subscription_plan_sgst" name="subscription_plan_sgst" placeholder="SGST%" value="" oninput="return isNumber(event)" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="subscription_plan_cgst" class="form-label">CGST%</label>
                                    <input type="text" class="form-control" id="subscription_plan_cgst" name="subscription_plan_cgst" placeholder="CGST%" value="" oninput="return isNumber(event)" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="mb-3">
                                    <label for="subscription_plan_igst" class="form-label">IGST%</label>
                                    <input type="text" class="form-control" id="subscription_plan_igst" name="subscription_plan_igst" placeholder="iGST%" value="" oninput="return isNumber(event)" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="subscription_plan_year_price" class="form-label">Year Price</label>
                                    <input type="text" class="form-control" id="subscription_plan_year_price" name="subscription_plan_year_price" placeholder="Year Price" oninput="return isNumber(event)" value="" required>
                                </div>
                            </div>
                            <div class="col-md-3 border-dark border-start">
                                <div class="mb-3">
                                    <label for="firstYearDiscountType" class="form-label">1<sup>st</sup> Year Discount</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select class="form-select" aria-label="Default select example" name="firstYearDiscountType" id="firstYearDiscountType">
                                                <option value="Percentage">Percentage</option>
                                                <option value="Fixed">Fixed</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="firstYearDiscountPrice" name="firstYearDiscountPrice" placeholder="Enter Discount" oninput="return isNumber(event)" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 border-dark border-start">
                                <div class="mb-3">
                                    <label for="secondYearDiscountType" class="form-label">2<sup>nd</sup> Year Discount</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select class="form-select" aria-label="Default select example" name="secondYearDiscountType" id="secondYearDiscountType">
                                                <option value="Percentage">Percentage</option>
                                                <option value="Fixed">Fixed</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="secondYearDiscountPrice" name="secondYearDiscountPrice" placeholder="Enter Discount" oninput="return isNumber(event)" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 border-dark border-start">
                                <div class="mb-3">
                                    <label for="thirdYearDiscountType" class="form-label">3<sup>rd</sup> Year Discount</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select class="form-select" aria-label="Default select example" name="thirdYearDiscountType" id="thirdYearDiscountType">
                                                <option value="Percentage">Percentage</option>
                                                <option value="Fixed">Fixed</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="thirdYearDiscountPrice" name="thirdYearDiscountPrice" placeholder="Enter Discount" oninput="return isNumber(event)" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 d-none">
                                <div class="mb-3">
                                    <label for="product_half_price" class="form-label">Half Year Price</label>
                                    <input type="text" class="form-control" id="subscription_plan_half_price" name="subscription_plan_half_price" placeholder="Half Year Price" oninput="return isNumber(event)" value="" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3 d-none">
                                <div class="mb-3">
                                    <label for="product_quarterly_price" class="form-label">Quarterly Price</label>
                                    <input type="text" class="form-control" id="subscription_plan_quarterly_price" name="subscription_plan_quarterly_price" placeholder="Quarterly Price" oninput="return isNumber(event)" value="" required>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="product_month_price" class="form-label">Month Price</label>
                                    <input type="text" class="form-control" id="subscription_plan_month_price" name="subscription_plan_month_price" placeholder="Month Price" oninput="return isNumber(event)" value="" required>
                                </div>
                            </div>

                            <div class="col-md-3 border-dark border-start">
                                <div class="mb-3">
                                    <label for="firstMonthDiscountType" class="form-label">1<sup>st</sup> Month Discount</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select class="form-select" aria-label="Default select example" name="firstMonthDiscountType" id="firstMonthDiscountType">
                                                <option value="Percentage">Percentage</option>
                                                <option value="Fixed">Fixed</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="firstMonthDiscountPrice" name="firstMonthDiscountPrice" placeholder="Enter Discount" oninput="return isNumber(event)" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 border-dark border-start">
                                <div class="mb-3">
                                    <label for="secondMonthDiscountType" class="form-label">2<sup>nd</sup> Month Discount</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select class="form-select" aria-label="Default select example" name="secondMonthDiscountType" id="secondMonthDiscountType">
                                                <option value="Percentage">Percentage</option>
                                                <option value="Fixed">Fixed</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="secondMonthDiscountPrice" name="secondMonthDiscountPrice" placeholder="Enter Discount" oninput="return isNumber(event)" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 border-dark border-start">
                                <div class="mb-3">
                                    <label for="thirdMonthDiscountType" class="form-label">3<sup>rd</sup> Month Discount</label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select class="form-select" aria-label="Default select example" name="thirdMonthDiscountType" id="thirdMonthDiscountType">
                                                <option value="Percentage">Percentage</option>
                                                <option value="Fixed">Fixed</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="thirdMonthDiscountPrice" name="thirdMonthDiscountPrice" placeholder="Enter Discount" oninput="return isNumber(event)" value="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="mb-3">
                                @if($data['type']!= 'edit')
                                    <label for="subscription_plan_description" class="form-label">Plan Description*</label>
                                    <textarea name="subscription_plan_description" class="form-control" id="subscription_plan_description" rows="4" value="" maxlength="240" required placeholder="Plan Description"></textarea>
                                @else
                                    <label for="subscription_plan_description" class="form-label">Plan Description*</label>
                                    <textarea name="subscription_plan_description" class="form-control" id="subscription_plan_description" rows="4" value="" maxlength="240" required placeholder="Plan Description">{{ $data['subscriptionPlan']->description }}</textarea>
                                @endif
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <div class="mb-2 mt-1">
                                    <button type="submit" class="form-control btn btn-primary" id="btnsubscriptionplanSave">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- end row -->
    </div>
</div>


@endsection('content')
@section('custom-scripts')

<script src="{{ asset('ra-assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/form-validation.init.js') }}"></script>
<script src="{{ asset('ra-assets/js/pages/jquery.form.js') }}"></script>
<script type="text/javascript">
    var ajaxSearchProductPlan = '{{route("product.search")}}';
    var ajaxPlanFeature = '{{route("subscription.plan.feature")}}';
    var Plan = '{{route("subscription.plan")}}';

    $("#subscription_plan_product_id").select2({
        ajax: {
            url: ajaxSearchProductPlan,
            dataType: 'json',
            delay: 0,
            data: function(params) {
                return {
                    search_value: params.term, // search term
                    page: params.page
                };
            },
            processResults: function(data, params) {
                params.page = params.page || 1;

                return {
                    results: data.results,
                    pagination: {
                        more: (params.page * 30) < data.total_count
                    }
                };
            },
            cache: false
        },
        placeholder: 'Search for Product Name',
    });

    $(document).ready(function() {

        var options = {
            beforeSubmit: showRequest, // pre-submit callback
            success: showResponse // post-submit callback
        };

         $('#plan').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });

        callFirstYearDiscountTypeFunction();
        callSecondYearDiscountTypeFunction();
        callThirdYearDiscountTypeFunction();
        callFirstMonthDiscountTypeFunction();
        callSecondMonthDiscountTypeFunction();
        callThirdMonthDiscountTypeFunction();
    });
    
    $('#firstYearDiscountType').on('change',function() {
        callFirstYearDiscountTypeFunction();
    });
    $('#secondYearDiscountType').on('change',function() {
        callSecondYearDiscountTypeFunction();
    });
    $('#thirdYearDiscountType').on('change',function() {
        callThirdYearDiscountTypeFunction();
    });
    $('#firstMonthDiscountType').on('change',function() {
        callFirstMonthDiscountTypeFunction();
    });
    $('#secondMonthDiscountType').on('change',function() {
        callSecondMonthDiscountTypeFunction();
    });
    $('#thirdMonthDiscountType').on('change',function() {
        callThirdMonthDiscountTypeFunction();
    });

    function callFirstYearDiscountTypeFunction() {
        var firstYearDiscountTypeInput = $('#firstYearDiscountType');
        var firstYearDiscountPrice = $('#firstYearDiscountPrice');
        firstYearDiscountPrice.val('');
        var firstYearDiscountType = firstYearDiscountTypeInput.find(':selected').val();
        if(firstYearDiscountType == 'Percentage'){
            firstYearDiscountPrice.removeAttr('oninput');
            firstYearDiscountPrice.attr('oninput', 'return isPercentage(event)');
        }else{
            firstYearDiscountPrice.removeAttr('oninput');
            firstYearDiscountPrice.attr('oninput', 'return isNumber(event)');
        }
    }

    function callSecondYearDiscountTypeFunction() {
        var secondYearDiscountTypeInput = $('#secondYearDiscountType');
        var secondYearDiscountPrice = $('#secondYearDiscountPrice');
        secondYearDiscountPrice.val('');

        var secondYearDiscountType = secondYearDiscountTypeInput.find(':selected').val();
        if(secondYearDiscountType == 'Percentage'){
            secondYearDiscountPrice.removeAttr('oninput');
            secondYearDiscountPrice.attr('oninput', 'return isPercentage(event)');
        }else{
            secondYearDiscountPrice.removeAttr('oninput');
            secondYearDiscountPrice.attr('oninput', 'return isNumber(event)');
        }
    }

    function callThirdYearDiscountTypeFunction() {
        var thirdYearDiscountTypeInput = $('#thirdYearDiscountType');
        var thirdYearDiscountPrice = $('#thirdYearDiscountPrice');
        thirdYearDiscountPrice.val('');

        var thirdYearDiscountType = thirdYearDiscountTypeInput.find(':selected').val();
        if(thirdYearDiscountType == 'Percentage'){
            thirdYearDiscountPrice.removeAttr('oninput');
            thirdYearDiscountPrice.attr('oninput', 'return isPercentage(event)');
        }else{
            thirdYearDiscountPrice.removeAttr('oninput');
            thirdYearDiscountPrice.attr('oninput', 'return isNumber(event)');
        }
    }

    function callFirstMonthDiscountTypeFunction() {
        var firstMonthDiscountTypeInput = $('#firstMonthDiscountType');
        var firstMonthDiscountPrice = $('#firstMonthDiscountPrice');
        firstMonthDiscountPrice.val('');

        var firstMonthDiscountType = firstMonthDiscountTypeInput.find(':selected').val();
        if(firstMonthDiscountType == 'Percentage'){
            firstMonthDiscountPrice.removeAttr('oninput');
            firstMonthDiscountPrice.attr('oninput', 'return isPercentage(event)');
        }else{
            firstMonthDiscountPrice.removeAttr('oninput');
            firstMonthDiscountPrice.attr('oninput', 'return isNumber(event)');
        }
    }

    function callSecondMonthDiscountTypeFunction() {
        var secondMonthDiscountTypeInput = $('#secondMonthDiscountType');
        var secondMonthDiscountPrice = $('#secondMonthDiscountPrice');
        secondMonthDiscountPrice.val('');

        var secondMonthDiscountType = secondMonthDiscountTypeInput.find(':selected').val();
        if(secondMonthDiscountType == 'Percentage'){
            secondMonthDiscountPrice.removeAttr('oninput');
            secondMonthDiscountPrice.attr('oninput', 'return isPercentage(event)');
        }else{
            secondMonthDiscountPrice.removeAttr('oninput');
            secondMonthDiscountPrice.attr('oninput', 'return isNumber(event)');
        }
    }
    
    function callThirdMonthDiscountTypeFunction() {
        var thirdMonthDiscountTypeInput = $('#thirdMonthDiscountType');
        var thirdMonthDiscountPrice = $('#thirdMonthDiscountPrice');
        thirdMonthDiscountPrice.val('');

        var thirdMonthDiscountType = thirdMonthDiscountTypeInput.find(':selected').val();
        if(thirdMonthDiscountType == 'Percentage'){
            thirdMonthDiscountPrice.removeAttr('oninput');
            thirdMonthDiscountPrice.attr('oninput', 'return isPercentage(event)');
        }else{
            thirdMonthDiscountPrice.removeAttr('oninput');
            thirdMonthDiscountPrice.attr('oninput', 'return isNumber(event)');
        }
    }

    function isNumber(evt) {
        evt = evt || window.event;
        var charCode = evt.which || evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        var inputId = event.target.id;
        var inputValue = evt.target.value;

        var YearPrice = $('#subscription_plan_year_price').val();
        var MonthPrice = $('#subscription_plan_month_price').val();
        
        if(inputId == 'firstMonthDiscountPrice' || inputId == 'secondMonthDiscountPrice' || inputId == 'thirdMonthDiscountPrice'){
            if(MonthPrice < parseFloat(inputValue)){
                event.target.value = 0;
            }
        }else if(inputId == 'firstYearDiscountPrice' || inputId == 'secondYearDiscountPrice' || inputId == 'thirdYearDiscountPrice'){
            if(YearPrice < parseFloat(inputValue)){
                event.target.value = 0;
            }
        }

        return true;
    }

    function isPercentage(event) {
        var keyCode = event.which || event.keyCode;
        var inputValue = event.target.value;

        var hasDot = inputValue.includes('.');
        if (keyCode === 46 && hasDot) {
            event.preventDefault();
        }

        var numericValue = inputValue.replace(/^0+/, '');
        numericValue = numericValue.replace(/[^\d.]/g, '');

        var parts = numericValue.split('.');

        if (parts.length > 1) {
            parts[1] = parts[1].substring(0, 2);
            numericValue = parts.join('.');
        }

        if (parseFloat(numericValue) > 100) {
            numericValue = '0';
        }

        event.target.value = numericValue;
    }



    function showRequest(formData, jqForm, options) {
        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
            if (responseText['plan_id'] != 0) {
                window.location = ajaxPlanFeature + "?id=" + responseText['plan_id'];
            } else {
                window.location = Plan;
            }
        } else if (responseText['status'] == 0) {
            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }


    
    $('#firstYearDiscountType').select2();
    $('#secondYearDiscountType').select2();
    $('#thirdYearDiscountType').select2();
    $('#firstMonthDiscountType').select2();
    $('#secondMonthDiscountType').select2();
    $('#thirdMonthDiscountType').select2();
</script>

@endsection