@extends('layouts.base')

@section('content')
<!--**********************************
                Content body start
            ***********************************-->
<div class="content-body">
    <div class="row m-4">
        <div class="col-sm-3">
            <button type="button" id="btn-renew-membership" class="btn mb-1 btn-primary">Create New Membership</button>
        </div>
        <div class="col-sm-3">
            <button type="button" id="btn-update-membership" class="btn mb-1 btn-primary">Create Addons</button>
        </div>
    </div>
    <div class="card m-4 mt-0">
        <div class="container-fluid">
            <div class="row" id="renew-membership">
                <div class="col-md-12">
                    <form action="#" id="renew-form">
                        <div>
                            <h4 id="form-title"></h4>
                            <section>
                                <div class="row">
                                    <input type="hidden" id="studentAccountId" name="studentAccountId" value="">
                                    <input type="hidden" id="studentMembershipId" name="studentMembershipId" value="">
                                    <input type="hidden" id="action" name="action" value="">
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label>Student Name</label>
                                            <input type="text" id="studentId" name="studentId" data-provide="typeahead"
                                                class="typehead form-control" placeholder="Search student name" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-3" id="div-membership">
                                        <div class="form-group">
                                            <label>Membership ID</label>
                                            <input type="text" id="membershipId" name="membershipId"
                                                class="form-control" readonly="readonly" placeholder="" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label>Duration</label>
                                            <select class="form-control" id="duration" required>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label>Start Date</label>
                                            <div class="input-group">
                                                <input type="text" id="startDate" data-date-format='yyyy-mm-dd'
                                                    class="form-control mydatepicker" placeholder="mm/dd/yyyy" required>
                                                <span class="input-group-append"><span class="input-group-text"><i
                                                            class="mdi mdi-calendar-check"></i></span></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="form-group">
                                            <label>End Date</label>
                                            <div class="input-group">
                                                <input type="text" id="endDate" data-date-format='yyyy-mm-dd'
                                                    class="form-control mydatepicker" placeholder="mm/dd/yyyy" require
                                                    readonly="readonly>
                                                <span class=" input-group-append"><span class="input-group-text"><i
                                                        class="mdi mdi-calendar-check"></i></span></span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-3" id="assetType">
                                        <div class="form-group">
                                            <label>Type</label>
                                            <select data-live-search="true" class="form-control" id="addon" required>
                                                <option value="">Select</option>
                                                <option value="1">Locker</option>
                                                <option value="2">Laptop</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" id='asset'>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Room Type</label>
                                            <select data-live-search="true" name="roomType" class="form-control"
                                                disabled="true" name="roomType" id="roomType" required>
                                                <option value="">Select</option>
                                                <option>AC</option>
                                                <option>NON AC</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Locker</label>
                                            <select class="form-control" id="locker" disabled="true" name="locker"
                                                required>
                                                <option value="">Select</option>
                                                <option>Yes</option>
                                                <option>No</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Laptop</label>
                                            <select class="form-control" id="laptop" disabled="true" name="laptop"
                                                required>
                                                <option value="">Select</option>
                                                <option>Yes</option>
                                                <option>No</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <input type="hidden" id="balance" name="balance" value="">
                                    <input type="hidden" id="grandTotal" name="grandTotal" value="">
                                    <input type="hidden" id="amountToPay" name="amountToPay" value="">
                                    <input type="hidden" id="acRoomAmount" name="acRoomAmount" value="">
                                    <input type="hidden" id="nonAcRoomAmount" name="nonAcRoomAmount" value="">
                                    <input type="hidden" id="lockerAmount" name="lockerAmount" value="">
                                    <input type="hidden" id="laptopAmount" name="laptopAmount" value="">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Payment Mode</label>
                                            <select class="form-control" name="paymentMode" id="paymentMode" required>
                                                <option value="">Select</option>
                                                <option value="1">Cash</option>
                                                <option value="2">NEFT</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Discount</label>
                                            <input type="text" id="discount" name="discount" class="form-control"
                                                value="0" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Amount</label>
                                            <input type="text" id="amount" name="amount" readonly="readonly"
                                                class="form-control" placeholder="1000" required>
                                        </div>
                                    </div>
                                </div>
                                <div id="bank-form" class="row" style="display: none">
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>Bank Name</label>
                                            <input type="text" id="bankName" name="bankName" class="form-control"
                                                placeholder="Bank Name" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>Account Number</label>
                                            <input type="text" id="bankAccountNumber" name="bankAccountNumber"
                                                class="form-control" placeholder="Account Number" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>Account Holder Name</label>
                                            <input type="text" id="bankAccountName" name="bankAccountName"
                                                class="form-control" placeholder="Holder Name" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>Bank IFSC</label>
                                            <input type="text" id="bankIFSC" name="bankIFSC" class="form-control"
                                                placeholder="IFSC code" required>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">
                                        <div class="form-group">
                                            <label>Transaction ID</label>
                                            <input type="text" id="bankTransactionId" name="bankTransactionId"
                                                class="form-control" placeholder="Transaction ID" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label>Payment Status</label>
                                            <select class="form-control" name="paymentStatus" id="paymentStatus"
                                                required>
                                                <option value="">Select</option>
                                                <option value="1">Paid</option>
                                                <option value="2">Partial Paid</option>
                                                <option value="3">Pay Later</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-4" id="partial" style="display: none;">
                                        <div class="form-group">
                                            <label>Partial Amount</label>
                                            <input type="text" id="partialAmount" name="partialAmount"
                                                class="form-control" placeholder="1000" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="row p-4" style="float: right">
                                    <button type="submit" id="btn-renew" class="btn mb-1 btn-primary">Submit</button>
                                </div>
                                <div class="row p-4" style="float: right">
                                    <button type="button" data-toggle="modal" data-target="#basicModal" id="btn-preview"
                                        class="btn mb-1 btn-primary">Preview
                                        Invoice</button>
                                </div>
                            </section>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- #/ container -->
    <div class="modal fade" id="basicModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Invoice</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div id='invoice' class="card">
                        <div class="container">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="row">

                                        <div class="col-sm-6">
                                            <h2>Invoice</h2>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <strong>Billed To:</strong><br>
                                            <address id='bill-to'>
                                            </address>
                                        </div>
                                    </div>
                                    <div class="row">

                                        <div class="col-sm-12 text-right">
                                            <strong>Date:</strong><br>
                                            <address id='invoice-date'>

                                            </address>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h3 class="panel-title"><strong>Order summary</strong></h3>
                                        </div>
                                        <div class="panel-body">
                                            <div class="table-responsive">
                                                <table class="table table-condensed">
                                                    <thead>
                                                        <tr>
                                                            <td><strong>Particulars</strong></td>
                                                            <td class="text-center">
                                                                <strong>Price</strong>
                                                            </td>
                                                            <td class="text-center">
                                                                <strong>Duration</strong>
                                                            </td>
                                                            <td class="text-right">
                                                                <strong>Total</strong>
                                                            </td>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr id='invoice-room'>
                                                        </tr>
                                                        <tr id='invoice-locker'>
                                                        </tr>
                                                        <tr id='invoice-laptop'>
                                                        </tr>
                                                        <tr id='invoice-amount'>
                                                        </tr>
                                                        <tr id='invoice-discount'>
                                                        </tr>
                                                        <tr id='invoice-total'>
                                                        </tr>
                                                        <tr id='invoice-amount-paid'>
                                                        </tr>
                                                        <tr id="invoice-balance">
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--**********************************
    Content body end
    ***********************************-->
@endsection

@section('script')
<script>
let plans = [];
let plan = null;
let active_membership = {};
let room_amount = 0;
let ac_room_amount = 0;
let non_ac_room_amount = 0;
let locker_amount = 0;
let laptop_amount = 0;
let partial_amount = 0;
let balance = 0;
let discount = 0;
let amount_to_pay = 0;
let sub_total = 0;
let grand_total = 0;
let duration = 0;
let locker_rate = 0;
let laptop_rate = 0;
let ac_room_rate = 0;
let non_ac_room_rate = 0;
let plan_end_date = '';
$('#amount').val(0);

$('#reportrange').hide();
$("#renew-form").validate({

    rules: {
        studentMobile: {
            required: true,
            digits: true
        },
        studentEmail: {
            required: true,
            email: true
        },
        startDate: {
            required: true,
        },
        endDate: {
            required: true,
        },
        duration: {
            required: true
        },
        paymentStatus: {
            required: true
        }
    },
    submitHandler: function(form, e) {

        if ($('#action').val() == 'renew') {
            fnAddStudentMembership()
        } else {
            fnUpdateStudentMembership()
        }

    }
}).settings.ignore = ":disabled,:hidden";

$('#form-title').html("Renew Membership")
$('#div-membership').hide();
$('#action').val('renew');
$('#amount').val(0);
$('#partialAmount').val(0);
$('#duration').val(0);
$('#assetType').hide();
$('#startDate').datepicker({
    autoclose: true,
});
//$('#endDate').datepicker();
$('.typeahead').typeahead();
$("#startDate").val(new Date().toISOString().split('T')[0]);
getPlans();
getDurations();

$('#btn-preview').click(function() {
    fnPreviewInvoice()
});

$('#btn-renew-membership').click(function() {
    $('#div-membership').hide();
    $('#asset').show();
    $('#assetType').hide();

    $('#action').val('renew')
    $('#form-title').html("Renew Membership")
    $('#studentId').val("");
});

$('#btn-update-membership').click(function() {
    $('#div-membership').show();
    $('#asset').hide();
    $('#assetType').show();

    $('#action').val('update')
    $('#form-title').html("Create Add Ons")
    $('#studentId').val("");
});

$('#studentId').typeahead({
    hint: true,
    highlight: true,
    minLength: 4,
    displayText: function(item) {
        return (item.id + "-" + item.student_name)
    },
}, {
    limit: 12,
    async: true,
    source: function(query, processSync, processAsync) {
        processSync();
        return $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                "Authorization": "Bearer " + localStorage.getItem('token')
            },
            url: "/api/auth/search_student",
            type: 'GET',
            data: {
                query: query
            },
            dataType: 'json',
            success: function(response) {
                return processAsync(response.data.display_result);
            }
        });
    }
});

$('#studentId').on('typeahead:autocompleted typeahead:selected', function(evt, item) {
    let url = "/api/auth/getStudentMembership";
    let data = {
        student_id: $("#studentId").val().split('-')[0]
    }
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + localStorage.getItem('token')
        },
        data: data,
        url: url,
        type: "POST",
        success: function(response) {

            if (response.data) {

                if ($("#action").val() == "renew") {
                    sweetAlert("Oops...", "Membership is already active for this student!",
                        "error");

                    $('#studentMembershipId').val("");
                    $('#membershipId').val("");
                    $('#studentId').val("");
                } else {
                    $('#studentMembershipId').val(response.data.id);
                    $('#membershipId').val(response.data.id);

                    active_membership = response.data;
                    plan_end_date = response.data.end_date
                    fnCalculateDates()
                }
            } else {
                sweetAlert("Oops...", "No active membership found for this student!!", "error");
            }


        }
    });
})

// $('#discount').change(function() {

//     if (parseInt($('#discount').val()) > parseInt($('#amount').val())) {
//         sweetAlert("Oops...", "Discount cannot be greater than total", "error");
//         return
//     }

//     grand_total = $('#grandTotal').val() - $('#discount').val()
//     $('#grandTotal').val(grand_total)
// });

// $('#duration').change(function() {
//     duration = $('#duration option:selected').val()
//     start_date = new Date($("#startDate").val())

//     if (duration != "") {
//         $('#roomType').prop('disabled', false);
//         $('#locker').prop('disabled', false);
//         $('#laptop').prop('disabled', false);
//     } else {
//         $('#roomType').val('');
//         $('#locker').val('');
//         $('#laptop').val('');
//         $('#roomType').prop('disabled', true);
//         $('#locker').prop('disabled', true);
//         $('#laptop').prop('disabled', true);
//     }

//     if (duration == 7) {
//         end_date = new Date(start_date.getFullYear(), start_date.getMonth(), start_date.getDate() + 7);
//     } else {
//         end_date = new Date(start_date.getFullYear(), start_date.getMonth() + parseInt(duration), start_date
//             .getDate());
//     }

//     if ($('#action').val() != 'renew') {

//         if (plan_end_date >= end_date) {
//             $("#endDate").val(end_date.toISOString().split('T')[0]);
//         } else {
//             sweetAlert("Expires at: " + plan_end_date.toISOString().split('T')[0],
//                 "Student membership ends before the requested duration please re-confirm before creating add ons!!",
//                 "error");
//             $("#endDate").val(plan_end_date.toISOString().split('T')[0]);
//         }

//     } else {
//         $("#endDate").val(end_date.toISOString().split('T')[0]);
//     }

// });

$('#startDate').change(function() {
    fnCalculateDates()
});


// $('#roomType').change(function() {
//     room = $('#roomType option:selected').val()
//     duration = $('#duration option:selected').val()

//     room_plan = plans.find(i => i.type == room);
//     room_amount = room_plan.rate * parseInt(duration);

//     if (room_amount > 0) {
//         $("#amount").val(room_amount + laptop_amount + locker_amount);
//         $('#grandTotal').val($('#amount').val())
//         $('#balance').val(0)
//         $('#discount').val(0)
//     }

// });

// $('#locker').change(function() {
//     locker = $('#locker option:selected').val()

//     if (locker == "Yes") {
//         duration = $('#duration option:selected').val()
//         locker_plan = plans.find(i => i.type == 'LOCKER');
//         locker_amount = locker_plan.rate * parseInt(duration);

//         $("#amount").val(room_amount + laptop_amount + locker_amount);
//         $('#grandTotal').val($('#amount').val())
//     } else {
//         if (locker_amount != 0) {
//             $("#amount").val($("#amount").val() - locker_amount);
//             $('#grandTotal').val($('#amount').val())
//         } else {
//             $("#amount").val(room_amount + laptop_amount);
//         }
//         locker_amount = 0;
//     }

// });

// $('#laptop').change(function() {
//     laptop = $('#laptop option:selected').val()

//     if (laptop == "Yes") {
//         duration = $('#duration option:selected').val()
//         laptop_plan = plans.find(i => i.type == 'LAPTOP');
//         laptop_amount = laptop_plan.rate * parseInt(duration);

//         $("#amount").val(room_amount + laptop_amount + locker_amount);
//         $('#grandTotal').val($('#amount').val())

//     } else {
//         if (laptop_amount != 0) {
//             $("#amount").val($("#amount").val() - laptop_amount);
//             $('#grandTotal').val($('#amount').val())
//         } else {
//             $("#amount").val(room_amount + locker_amount);
//         }
//         laptop_amount = 0;
//     }

// });

// $('#paymentMode').change(function() {
//     payment_mode = $('#paymentMode option:selected').val()

//     if (payment_mode == "2") {
//         document.getElementById('bank-form').style.display = "flex";
//     } else {
//         document.getElementById('bank-form').style.display = "none";
//     }
// });

// $('#paymentStatus').change(function() {
//     payment_status = $('#paymentStatus option:selected').val()

//     if (payment_status == "2") {
//         document.getElementById('partial').style.display = "block";
//     } else {
//         document.getElementById('partial').style.display = "none";
//     }
// });

// $('#partialAmount').change(function() {

//     if ($('#partialAmount').val() <= "0") {
//         $('#grandTotal').val($('#amount').val())
//         return
//     }

//     if (parseInt($('#partialAmount').val()) > parseInt($('#grandTotal').val())) {
//         sweetAlert("Oops...", "Partial amount cannot be greater than total", "error");
//         return
//     }

//     balance = $('#grandTotal').val() - $('#partialAmount').val()
//     $('#balance').val(balance)

// });

$('#discount').change(function() {

    if (parseInt($('#discount').val()) > parseInt($('#amount').val())) {
        sweetAlert("Oops...", "Discount cannot be greater than total", "error");
        $('#discount').val(0);
        return
    }

    discount = $('#discount').val()
    fnCalculateInvoice();
    fnPreviewInvoice();

});

$('#duration').change(function() {
    duration = $('#duration option:selected').val()
    fnCalculateInvoice();
    fnCalculateDates();

});


$('#addon').change(function() {
    add_on = $('#addon option:selected').text();

    if (add_on == "Laptop") {
        if (active_membership.laptop == "1") {
            sweetAlert("Oops...", "This add on is already active in current membership", "error");
            return
        }
    }

    if (add_on == "Locker") {
        if (active_membership.locker == "1") {
            sweetAlert("Oops...", "This add on is already active in current membership", "error");
            return
        }
    }

    fnCalculateInvoice();
});

$('#roomType').change(function() {
    fnCalculateInvoice();
});

$('#locker').change(function() {
    fnCalculateInvoice();
});

$('#laptop').change(function() {
    fnCalculateInvoice();
});

$('#paymentMode').change(function() {
    payment_mode = $('#paymentMode option:selected').val()

    if (payment_mode == "2") {
        document.getElementById('bank-form').style.display = "flex";
    } else {
        document.getElementById('bank-form').style.display = "none";
    }

    fnPreviewInvoice()
});

$('#paymentStatus').change(function() {
    payment_status = $('#paymentStatus option:selected').val()

    if (payment_status == "1") {
        balance = 0;
        fnCalculateInvoice()
        fnPreviewInvoice()
    }

    if (payment_status == "2") {
        document.getElementById('partial').style.display = "block";
    } else {
        document.getElementById('partial').style.display = "none";
    }

    if (payment_status == "3") {

        balance = $('#amountToPay').val()
        amount_to_pay = 0;
        fnCalculateInvoice()
        fnPreviewInvoice()

    }
});

$('#partialAmount').change(function() {

    if (parseInt($('#partialAmount').val()) >= parseInt($('#grandTotal').val())) {
        sweetAlert("Oops...", "Partial amount cannot be greater than or equal to total", "error");
        return
    }

    partial_amount = $('#partialAmount').val();
    fnCalculateInvoice();
    fnPreviewInvoice()

});

function fnCalculateDates() {

    current_date = new Date()
    current_date = new Date(current_date.getFullYear(), current_date.getMonth(), current_date
        .getDate())
    start_date = new Date($('#startDate').val())
    start_date = new Date(start_date.getFullYear(), start_date.getMonth(), start_date
        .getDate());

    if (start_date > current_date) {
        sweetAlert("Oops...", "Please select today's date", "error");
        return
    }

    plan_end_date = new Date(plan_end_date)
    console.log(plan_end_date);
    plan_end_date = new Date(plan_end_date.getFullYear(), plan_end_date.getMonth(), plan_end_date
        .getDate())
    end_date = new Date(start_date.getFullYear(), start_date.getMonth() + parseInt(duration), start_date
        .getDate());

    if ($('#action').val() != 'renew') {

        if (plan_end_date >= end_date) {
            $("#endDate").val(formatDate(end_date));

        } else {
            sweetAlert("Expires at: " + formatDate(plan_end_date),
                "Student membership ends before the requested duration please re-confirm before creating add ons!!",
                "error");
            $("#endDate").val(formatDate(plan_end_date));
        }
    } else {
        $("#endDate").val(formatDate(end_date));
    }
}

function formatDate(date) {
    var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear();

    if (month.length < 2)
        month = '0' + month;
    if (day.length < 2)
        day = '0' + day;

    return [year, month, day].join('-');
}

function fnCalculateInvoice() {

    if (duration == 0) {
        sweetAlert("Oops...", "Please select duration first", "error");
        return
    } else {
        room = $('#roomType option:selected').val();
        laptop = $('#laptop option:selected').val();
        locker = $('#locker option:selected').val();
        add_on = $('#addon option:selected').text();

        if (add_on == "Laptop") {
            locker = ""
            locker_amount = 0
            room = ""
            room = ""
            non_ac_room_amount = 0
            ac_room_amount = 0
            room_amount = 0
            laptop = "Yes"
        } else if (add_on == "Locker") {
            laptop = ""
            laptop_amount = 0
            room = ""
            non_ac_room_amount = 0
            ac_room_amount = 0
            room_amount = 0
            locker = "Yes"
        }

        if (room == 'NON-AC') {
            non_ac_room_amount = duration * non_ac_room_rate;
        } else {
            non_ac_room_amount = 0;
        }

        if (room == 'AC') {
            ac_room_amount = duration * ac_room_rate;
        } else {
            ac_room_amount = 0;
        }

        if (locker == 'Yes') {
            locker_amount = duration * locker_rate;
        } else {
            locker_amount = 0;
        }

        if (laptop == 'Yes') {
            laptop_amount = duration * laptop_rate;
        } else {
            laptop_amount = 0;
        }

        sub_total = non_ac_room_amount + ac_room_amount + locker_amount + laptop_amount

        grand_total = sub_total
        if (discount > 0) {
            grand_total = grand_total - discount
        }

        amount_to_pay = grand_total

        if (balance == grand_total) {
            amount_to_pay = 0
        }

        if (partial_amount > 0) {
            amount_to_pay = partial_amount
            balance = grand_total - partial_amount
        }

        $("#nonaAcRoomAmount").val(non_ac_room_amount);
        $("#acRoomAmount").val(ac_room_amount);
        $("#lockerAmount").val(locker_amount);
        $("#laptopAmount").val(laptop_amount);
        $("#subTotal").val(sub_total);
        $("#grandTotal").val(grand_total);
        $("#discount").val(discount);
        $("#balance").val(balance);
        $("#amountToPay").val(amount_to_pay);
        $("#partialAmount").val(partial_amount);
        $("#amount").val(grand_total);
    }

}

function fnPreviewInvoice() {

    toHtml = $("#studentId").val().split('-')[1];
    $("#bill-to").html(toHtml);

    invoiceDateHtml = new Date().toJSON().slice(0, 10) + '<br><br>';
    $('#invoice-date').html(invoiceDateHtml)

    if (ac_room_amount > 0) {
        room_amount = ac_room_amount
    } else if (non_ac_room_amount > 0) {
        room_amount = non_ac_room_amount
    } else {
        room_amount = 0;
    }

    if (room_amount > 0) {
        invoiceRoomHtml = '<td>Room Type: ' + $('#roomType').val() + '</td>' +
            '<td class="text-center">' + room_amount / duration + '</td>' +
            '<td class="text-center">' + duration + '</td>' +
            '<td class="text-right">&#8377 ' + room_amount + '</td>'

        $('#invoice-room').html(invoiceRoomHtml)
    }

    if (locker_amount > 0) {
        invoiceLockerHtml = '<td>Locker</td>' +
            '<td class="text-center">' + locker_amount / $('#duration').val() + '</td>' +
            '<td class="text-center">' + $('#duration').val() + '</td>' +
            '<td class="text-right">&#8377 ' + locker_amount + '</td>'

        $('#invoice-locker').html(invoiceLockerHtml)
    }

    if (laptop_amount > 0) {
        invoiceLaptopHtml = '<td>Laptop</td>' +
            '<td class="text-center">' + laptop_amount / $('#duration').val() + '</td>' +
            '<td class="text-center">' + $('#duration').val() + '</td>' +
            '<td class="text-right">&#8377 ' + laptop_amount + '</td>'

        $('#invoice-laptop').html(invoiceLaptopHtml)
    }

    invoiceSubtotalHtml = '<td class="no-line"></td>' +
        '<td class="no-line"></td>' +
        '<td class="no-line text-center">' +
        '<strong>Sub Total</strong></td>' +
        '<td class="no-line text-right">&#8377 ' + sub_total + '</td>'
    $('#invoice-amount').html(invoiceSubtotalHtml);

    invoiceDiscountHtml = '<td class="no-line"></td>' +
        '<td class="no-line"></td>' +
        '<td class="no-line text-center">' +
        '<strong>Discount</strong></td>' +
        '<td class="no-line text-right">&#8377 ' + discount + '</td>'
    $('#invoice-discount').html(invoiceDiscountHtml);

    invoiceGrandTotalHtml = '<td class="no-line"></td>' +
        '<td class="no-line"></td>' +
        '<td class="no-line text-center">' +
        '<strong>Total</strong></td>' +
        '<td class="no-line text-right">&#8377 ' + grand_total + '</td>'
    $('#invoice-total').html(invoiceGrandTotalHtml);

    if (balance > 0) {
        invoiceAmountPaidHtml = '<td class="no-line"></td>' +
            '<td class="no-line"></td>' +
            '<td class="no-line text-center">' +
            '<strong>Paid Amount</strong></td>' +
            '<td class="no-line text-right">&#8377 ' + amount_to_pay + '</td>'

        $('#invoice-amount-paid').html(invoiceAmountPaidHtml);

        invoiceBalancePaidHtml = '<td class="no-line"></td>' +
            '<td class="no-line"></td>' +
            '<td class="no-line text-center">' +
            '<strong>Balance Amount</strong></td>' +
            '<td class="no-line text-right">&#8377 ' + balance + '</td>'

        $('#invoice-balance').html(invoiceBalancePaidHtml);
    }

}

function getPlans() {
    let url = "/api/auth/getRateCards";
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + localStorage.getItem('token')
        },
        url: url,
        type: "GET",
        success: function(response) {
            plans = response.data

            non_ac_room_plan = plans.find(i => i.type == 'NON-AC');
            non_ac_room_rate = non_ac_room_plan.rate

            ac_room_plan = plans.find(i => i.type == 'AC');
            ac_room_rate = ac_room_plan.rate

            locker_plan = plans.find(i => i.type == 'LAPTOP');
            locker_rate = locker_plan.rate

            laptop_plan = plans.find(i => i.type == 'LOCKER');
            laptop_rate = laptop_plan.rate
        }
    });
}

function getDurations() {
    let url = "/api/auth/getDurations";
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + localStorage.getItem('token')
        },
        url: url,
        type: "GET",
        success: function(response) {
            durations = response.data
            let durationHtml = '<option value="">Select</option>'
            durations.forEach(element => {
                durationHtml += '<option value="' + element.duration + '">' + element.duration +
                    ' ' + (element.duration == "1" ? 'Month' : 'Months')+'</option>'
            });

            $("#duration").html(durationHtml);

        }
    });
}

function fnAddStudentMembership() {

    $('#preloader').show();

    let url = "/api/auth/createStudentMembership";
    let data = {
        student_id: $("#studentId").val().split('-')[0],
        start_date: $("#startDate").val(),
        end_date: $("#endDate").val(),
        room_type: $("#roomType").val(),
        duration: $('#duration option:selected').val(),
        locker: $("#locker").val() == 'Yes' ? 1 : 0,
        laptop: $("#laptop").val() == 'Yes' ? 1 : 0
    };
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + localStorage.getItem('user')
        },
        url: url,
        type: "POST",
        data: data,
        success: function(response) {
            $("#studentMembershipId").val(response.data.membership_id)
            $("#amount").val(response.data.amount)
            fnAddStudentTransaction()
        },
        error: function(response) {
            sweetAlert("Oops...", "Something went wrong !!", "error");
        }
    });
}

function fnAddStudentTransaction() {

    if ($("#paymentStatus").val() == '3') {
        $("#grandTotal").val(0)
    }

    let url = "/api/auth/createStudentTransaction";
    let data = {
        student_id: $("#studentId").val().split('-')[0],
        payment_mode: $("#paymentMode").val(),
        room_amount: room_amount,
        locker_amount: locker_amount,
        laptop_amount: laptop_amount,
        discount: discount,
        grand_total: grand_total,
        balance: balance,
        amount_paid: amount_to_pay,
        transaction_id: $("#bankTransactionId").val(),
        membership_id: $("#membershipId").val(),
        bank_ac_name: $("#bankAccountName").val(),
        bank_name: $("#bankName").val(),
        bank_ac_number: $("#bankAccountNumber").val(),
        bank_ifsc: $("#bankIFSC").val(),
        status: $("#paymentStatus").val()
    };
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + localStorage.getItem('user')
        },
        url: url,
        type: "POST",
        data: data,
        success: function(response) {
            $('#preloader').hide();
            swal("Thank you", "Student membership created successfully", "success");
            window.location.replace("/renew_membership");
        },
        error: function(response) {
            sweetAlert("Oops...", "Something went wrong !!", "error");
        }
    });
}

function fnUpdateStudentMembership() {

    $('#preloader').show();

    let url = "/api/auth/updateStudentMembership";
    let data = {
        student_id: $("#studentId").val().split('-')[0],
        student_membership_id: $("#membershipId").val(),
        start_date: $("#startDate").val(),
        end_date: $("#endDate").val(),
        duration: $('#duration option:selected').val(),
        type: $('#addon').val() == "1" ? "locker" : "laptop"
    };
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + localStorage.getItem('user')
        },
        url: url,
        type: "POST",
        data: data,
        success: function(response) {
            $("#studentMembershipId").val(response.data.membership_id)
            $("#amount").val(response.data.amount)
            fnAddStudentTransaction()
        },
        error: function(response) {
            sweetAlert("Oops...", "Something went wrong !!", "error");
        }
    });
}
</script>
@endsection