@extends('layouts.new-app')
@section('content')
<div class="container-fluid">
    <div class="col-md-12 col-sm-12 col-lg-12">
        <div class="row">
            <div class="col-md-9 col-sm-9 col-lg-9 breadcrumbcustomize">
                <div class="row">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ url('/home') }}">Home</a></li>
                            <li class="breadcrumb-item"><a href="{{ url('/user/chapter-home/1') }}">Operator @if($id == 1) AB @elseif($id == 2) B @else C @endif</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Payment</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <h4 class="name" style="color: #1f60ba">Course Purchase</h4>
</div>
<div class="container-fluid">
    {{ Form::open(['url'=>'user/save-payment', 'method'=>'POST', 'id'=>'paymentForm']) }}
    <div class="row">
        <div class="col-lg-6">
            <div class="chapterscontainer">
                <div class="coursepaymentcontainer">
                    <h4>Courses</h4>
                </div>
                @if($id == 1)
                <div class="paymentrow">
                    <div class="row">
                        <div class="col-lg-6">
                            <h5>Class AB Operator</h5>
                        </div>
                        <div class="col-lg-3">$59.00</div>
                        {{ Form::hidden('optr1', '59', ['id'=>'optr1']) }}
                        <div class="col-lg-3 text-right">
                            <div class="checkbox">
                                <label>
                                <input type="checkbox" name="operator1" id="checkbox1" value="1" onchange="show(1)">
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">Begin Course</div>
                        <div class="col-lg-3"></div>
                        <div class="col-lg-3 text-right"></div>
                    </div>
                    <div class="row pb-10">
                        <div class="col-lg-6">Final Evaluation</div>
                        <div class="col-lg-3"></div>
                        <div class="col-lg-3 text-right"></div>
                    </div>
                </div>
                @endif
            </div>
        </div>
        <div class="col-lg-6">
            <div class="chapterscontainer">
                <div>
                    <div class="coursepaymentcontainer">
                        <h4>Courses</h4>
                    </div>
                    <div class="paymentrow">
                        @if($id == 1)
                        <div class="row div1">
                            <div class="col-lg-6">
                                <h5>Class AB Operator</h5>
                            </div>
                            <div class="col-lg-6 text-right">$59.00</div>
                        </div>
                        <div class="row div1">
                            <div class="col-lg-6">Begin Course</div>
                            <div class="col-lg-6 text-right"></div>
                        </div>
                        <div class="row div1">
                            <div class="col-lg-6">Final Evaluation</div>
                            <div class="col-lg-6 text-right"></div>
                        </div>
                        @endif

                        <div class="row subtotal">
                            <div class="col-lg-6"><span style="font-weight: bold">Sub Total</span></div>
                            <div class="col-lg-6 text-right" id="show_sub_total">$00.00</div>
                            <input type="hidden" name="sub_total" id="sub_total" class="filled-in chk-col-green" value="0" readonly>
                        </div>

                        <div class="row" style="margin-top: -15px">
                            <div class="col-lg-6">
                                <div>
                                    <div class="input-group" style="width: 100%">
                                        <div class="form-group label-floating" style="width: 100%">
                                            <label class="control-label">Coupon Code</label>
                                            <input name="coupon" type="text" class="form-control" value="" id="coupon-code">
                                            <input name="coupon_id" type="hidden" class="form-control" value="" id="coupon_id">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row" style="margin-top: -10px;">
                            <div class="col-lg-6">
                                <div class="checkbox">
                                    <button class="btn-xs btn-primary" type="button" id="applyBtn">Apply Coupon</button>
                                </div>
                            </div>
                            <div class="col-lg-6 text-right" id="show_discount">$00.00</div>
                            <input type="hidden" name="discount" id="discount" class="filled-in chk-col-green" value="0" readonly>
                        </div>
                        <div class="row subtotal">
                            <div class="col-lg-6"><span style="font-weight: bold">Total</span></div>
                            <div class="col-lg-6 text-right" id="show_total">$00.00</div>
                            <input type="hidden" name="total" id="total" class="filled-in chk-col-green" value="0" readonly>
                        </div>
                        <div class="row">
                            <div class="col-lg-12" style="margin-bottom: 15px;">
                                <button type="button" class="btn buttonorange btn-block" style="margin: 0px" id="savePaymentBtn">Proceed To Payment</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{ Form::close() }}
</div>

<script>
    $(function() {
        $("#savePaymentBtn").on('click', function() {
            if($("#checkbox1").prop('checked') == true) {
                $("#paymentForm").submit();
            } else {
                swal('Please select course');
                return false;
            }
        });

        $(".div1").hide();
    });

    function show(id) {
        if($("#checkbox"+id).prop("checked") == true) {
            $(".div"+id).show();
            findSubTotal(1);
            findTotal(1);
        } else {
            $(".div"+id).hide();
            removeTotal(id);
        }
    }

    function findSubTotal(id) {
        var subtotal = $("#sub_total").val();
        var amount = $("#optr"+id).val();
        var total = +subtotal + +amount;
        $("#show_sub_total").text('$'+total);
        $("#sub_total").val(total);
    }
    // Grand Total
    function findTotal(id) {
        applyDiscount();
    }

    // Apply Discount
    $("#applyBtn").on('click', function() {
        applyDiscount();
    });

    function applyDiscount() {
        // Get Coupon discount
        var counpon = $("#coupon-code").val();
        var sub_total = $("#sub_total").val();

        if(counpon == '') {
            $("#show_total").html('$'+sub_total);
            $("#total").val(sub_total);
            return false;
        }

        $.ajax({
            url: '/user/get_discount',
            data: 'coupon='+counpon+'&sub_total='+sub_total,
            success: function (result) {
                console.log(result.amount);
                // Sub Total is zero
                if(result == 0) {
                    swal('Please select course');
                    $("#show_total").html(0);
                    $("#total").val(0);
                    $("#coupon-code").val('');
                    $("#coupon_id").val('');
                    return false;
                }
                // Coupon Expired
                if(result == 1) {
                    swal('Coupon is expired or not valid');
                    removeTotal(1);
                    return false;
                }
                // Coupon not applicable
                if(result == 2) {
                    swal('Coupon is used already');
                    removeTotal(1);
                    return false;
                }

                $("#show_discount").html('- $'+result.discount);
                $("#discount").val(result.discount);

                $("#show_total").html('$'+result.amount);
                $("#total").val(result.amount);

                $("#coupon_id").val(result.coupon_id);
            }
        });
    }

    function removeTotal(id) {
        $("#coupon-code").val('');
        $("#coupon_id").val('');
        var amount = $("#optr"+id).val();

        $("#show_sub_total").text('$'+amount);
        $("#sub_total").val(amount);
        $("#show_discount").text('-$0');
        $("#discount").val(0);
        $("#show_total").text('$'+amount);
        $("#grand_total").val(amount);
    }
</script>
@endsection