@extends('layouts.app')
    
 @section('content')
    <!-- BEGIN CONTENT -->
    <div class="page-content-wrapper">
        <!-- BEGIN CONTENT BODY -->
        <div class="top_bar page-content">
            <div class="top_status_bar">
                <div id="top_progress_bar" class="progress_bar">
                </div>
            </div>
            <div class="breadcrumbs">
                <ul>
                     <li><a class="breadcrumb_link" href="#">HOME</a></li>
                        <li><a href="#">Members Tiers</a></li>
                </ul>
                <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
            </div>
        </div>
        <div class="page-content">
            <div class="portlet">
                <!-- BEGIN PAGE HEADER-->
                <div class="portlet-title page_heading">
                    <div class="row">
                        <div class="col-md-9">
                            <div class="caption">
                                <h2 style="font-weight: 600; margin-top: 0;">page_heading</h2>
                                <span class="subtitle"> page_description</span>
                            </div>
                        </div>
                        <div class="col-md-3 text-right"></div>
                    </div>
                </div>
                <!-- BEGIN PAGE BAR -->
                <div class="row">
                    <div class="col-md-2">
                        <div class="form-group">
                            <select class="form-control select2 member_rewards">
                                <option value="points" selected>Points</option>
                                <option value="discount">Discount</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <!--THIS IS CONTENT DIV START-->
                        <div class="portlet-body flip-scroll">
                            <form method="post" id="member_tiers_form" action="#">
                                
                                <div class="row">
                                    <div class="col-md-2 col-sm-3">
                                        <div class="form-group">
                                            <label>Tier Name*</label>
                                            <input type="text" class="form-control" name="tier_name[]" value="tier_name" readonly>
                                            <input type="hidden" name="tier_uuid[]" value="tier_name">
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3">
                                        <div class="form-group">
                                            <label>Spending Start From*</label>
                                            <input type="number" class="form-control validate spendingstart" name="spending_start[]">
                                            <input type="hidden" class="form-control spendingend" name="spending_end[]" value="spending_end">
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-sm-3 member_points">
                                        <div class="form-group">
                                            <label>Points Reward * <span> (1 Currency = points_reward Points)</span></label>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <span class="points_span">Currency</span>
                                                    <input type="number" class="form-control col-sm-6 reward_currency">
                                                </div>
                                                <div class="col-sm-6">
                                                    <span class="points_span">Points</span>
                                                    <input type="number" class="form-control col-sm-6 reward_points">
                                                </div>
                                            </div>
                                            <input type="hidden" class="points_reward" name="points_reward[]">
                                        </div>
                                    </div>
                                    <div class="col-md-3 col-sm-3 member_points">
                                        <div class="form-group">
                                            <label>Points Conversion * <span> (1 Point = points_conversion Currency)</span></label>
                                            <div class="row">
                                                <div class="col-sm-6">
                                                    <span class="points_span">Points</span>
                                                    <input type="number" class="form-control col-sm-6 conversion_points">
                                                </div>
                                                <div class="col-sm-6">
                                                    <span class="points_span">Currency</span>
                                                    <input type="number" class="form-control col-sm-6 conversion_currency">
                                                </div>
                                            </div>
                                            <input type="hidden" class="points_conversion>" name="points_conversion[]">
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3 member_discount" style="display: none;">
                                        <div class="form-group">
                                            <label>Discount*</label>
                                            <input type="number" class="form-control validate" value="discount_percentage" name="discount_percentage[]">
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-sm-12 text-right" style="padding: 3px 25px 0 0px;">
                                        <button type="button" class="btn dismiss">Cancel</button>
                                        <button type="button" class="btn theme_btn_round save_tiers"> Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--THIS IS CONTENT DIV END-->
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('admin_css')
   <link href="{{asset('assets/global/plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css"/>
    <link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css"/>
    <style type="text/css">
        .points_span{
            position: absolute;
            right: 20px;
            top: 5px;
            z-index: 99;
            color: #9ba0a7;
        }
        label span {
            font-weight: bold !important;
            font-size: 14px;
         }
    </style>
@stop

@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    var flag = '0';
    var msg_one;
    var msg_two;
    var reward_points1,reward_points2,reward_points3,reward_currency1,reward_currency2,reward_currency3;
    var conversn_points1,conversn_points2,conversn_points3,conversn_currency1,conversn_currency2,conversn_currency3;

    $(document).ready(function () {
        //SELECT 2 Simple//
        $(".select2").select2({
            placeholder: "--Select--",
            allowClear: true
        });
    });

    //Cancel Button Redirect to Dashboard
    $(document).on('click', '.dismiss', function () {
       //window.location.href = SITE_ROOT;
    });

    //Member Ponits Reward Selection
    $(document).on('change', '.member_rewards', function (e) {
        var member_reward = $(this).find('option:selected').val();
        if (member_reward == 'points') {
            $('.member_points').show();
            $('.member_discount').hide();
            console.log(member_reward);
        }
        else {
            $('.member_points').hide();
            $('.member_discount').show();
            console.log(member_reward);
        }
    });

    //Member Tiers Spending Settings
    //First input
    $(document).on("input", ".spendingstart_1", function () {
        var this_tier = parseFloat($(this).val());
        $(".spendingend_3").val(this_tier);
    });

    //Second input
    $(document).on("input", ".spendingstart_2", function () {
        var this_tier   = parseFloat($(this).val());
        var first_tier  = $(".spendingstart_1").val();
        var third_tier  = $(".spendingstart_3").val();
        if (this_tier < first_tier) {
            flag = '1';
            msg_one = 'Your spending start must be greater than first spending start!';
            $(".spendingstart_2").addClass('error_custom');
        }
        else {
            msg_one = '';
            $(".spendingstart_2").removeClass('error_custom');
            if(this_tier > third_tier) {
                flag    = '1';
                msg_two = 'Your spending start must be greater than second spending start!';
                $(".spendingstart_3").addClass('error_custom');
            }
            else {
                flag    = '0';
                msg_two = '';
                $(".spendingstart_3").removeClass('error_custom');
            }
        }
        $(".spendingend_1").val((this_tier - parseFloat(1)));
    });

    //Third input
    $(document).on("input", ".spendingstart_3", function () {
        var this_tier   = parseFloat($(this).val());
        var second_tier = $(".spendingstart_2").val();
        if( this_tier < second_tier ){
            flag    = '1';
            msg_two = 'Your spending start must be greater than second spending start!';
            $(".spendingstart_3").addClass('error_custom');
        } else{
            flag    = '0';
            msg_two = '';
            $(".spendingstart_3").removeClass('error_custom');
        }
        $(".spendingend_2").val((this_tier - parseFloat(1)));
    });

    //Points Reward Script for Silver
    $(document).on("input", ".reward_points_1, .reward_currency_1", function () {
        $('.points_reward_1').val('');
        reward_points1 = $('.reward_points_1').val();
        reward_currency1 = $('.reward_currency_1').val();
        if(reward_currency1!=''&&reward_points1!='') {
            var final_points = parseFloat(reward_points1 / reward_currency1).toFixed(2);
            $('.points_reward_1').val(final_points);
        }
    });

    //Points Reward Script for Gold
    $(document).on("input", ".reward_points_2, .reward_currency_2", function () {
        $('.points_reward_2').val('');
        reward_points2 = $('.reward_points_2').val();
        reward_currency2 = $('.reward_currency_2').val();
        if(reward_currency2!=''&&reward_points2!='') {
            var final_points = parseFloat(reward_points2 / reward_currency2).toFixed(2);
            $('.points_reward_2').val(final_points);
        }
    });

    //Points Reward Script for Platinum
    $(document).on("input", ".reward_points_3, .reward_currency_3", function () {
        $('.points_reward_3').val('');
        reward_points3 = $('.reward_points_3').val();
        reward_currency3 = $('.reward_currency_3').val();
        if(reward_currency3!=''&&reward_points3!='') {
            var final_points = parseFloat(reward_points3 / reward_currency3).toFixed(2);
            $('.points_reward_3').val(final_points);
        }
    });

    //Points Conversion Script for Silver
    $(document).on("input", ".conversion_points_1, .conversion_currency_1", function () {
        $('.points_conversion_1').val('');
        conversn_points1 = $('.conversion_points_1').val();
        conversn_currency1 = $('.conversion_currency_1').val();
        if(conversn_currency1!=''&&conversn_points1!='') {
            var final_points = parseFloat(conversn_currency1 / conversn_points1).toFixed(2);
            $('.points_conversion_1').val(final_points);
        }
    });

    //Points Conversion Script for Gold
    $(document).on("input", ".conversion_points_2, .conversion_currency_2", function () {
        $('.points_conversion_2').val('');
        conversn_points2 = $('.conversion_points_2').val();
        conversn_currency2 = $('.conversion_currency_2').val();
        if(conversn_points2!=''&&conversn_currency2!='') {
            var final_points = parseFloat(conversn_currency2 / conversn_points2).toFixed(2);
            $('.points_conversion_2').val(final_points);
        }
    });

    //Points Conversion Script for Platinum
    $(document).on("input", ".conversion_points_3, .conversion_currency_3", function () {
        $('.points_conversion_3').val('');
        conversn_points3 = $('.conversion_points_3').val();
        conversn_currency3 = $('.conversion_currency_3').val();
        if(conversn_points3!=''&&conversn_currency3!='') {
            var final_points = parseFloat(conversn_points3 / conversn_currency3).toFixed(2);
            $('.points_conversion_3').val(final_points);
        }
    });

    //Member Tiers Update Script
    $(document).on('click', '.save_tiers', function () {
        $('#member_tiers_form *').filter(':input').each(function () {
            if ($(this).hasClass('validate')) {
                if (($(this).val() == '') || ($(this).val() === null)) {
                    $(this).addClass('error_custom');
                    flag = '1';
                } else {
                    $(this).removeClass('error_custom');
                }
            }
        });
        if (flag > '0') {
            var msg = (msg_one=='')?msg_two:msg_one;
            msg = (msg==''||msg==undefined)?'Mendatory fields are required!':msg;
            alertbox('warning', msg);
            return false;
        } else {
            var formData = new FormData(document.getElementById("member_tiers_form"));
            var url = 'members/member_tier';
            $('#busyloading, .overlay').show();
            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    $('#busyloading, .overlay').fadeOut(200);
                    var result = $.parseJSON(res);
                    console.log(res);
                    if(result.type == 'success'){
                        alertbox('success', result.msg);
                        window.setTimeout(function(){
                            window.location.reload();
                        }, 2000);
                    }
                    else if(result.type == 'expired') {
                        alertbox('danger', result.msg);
                        window.setTimeout(function(){
                            //window.location.href = SITE_ROOT;
                        }, 1000);
                    }
                    else {
                        alertbox('danger', result.msg);
                    }
                },
                error: function (error) {
                    $('#busyloading, .overlay').fadeOut(200);
                    alertbox('danger', error);
                }
            });
        }
    });

</script>
@stop