@extends('layouts.base')

@section('content')
<!--**********************************
    Content body start
***********************************-->
<div class="content-body">
    <div class="container-fluid">
        <div class="row" id="new-membership" style="display: block">
            <div class="col-md-12">
                <form action="#" id="step-form-horizontal" class="step-form-horizontal">
                    <div>
                        <h4>User Details</h4>
                        <section>
                            <div class="row">
                                <input type="hidden" id="studentId" name="studentId" value="">
                                <input type="hidden" id="studentAccountId" name="studentAccountId" value="">
                                <input type="hidden" id="studentMembershipId" name="studentMembershipId" value="">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Student Name</label>
                                        <input type="text" id="studentName" name="studentName" class="form-control"
                                            placeholder="Student name" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Student Email</label>
                                        <input type="email" id="studentEmail" name="studentEmail" class="form-control"
                                            placeholder="Student Email" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Student Mobile</label>
                                        <input type="text" id="studentMobile" name="studentMobile" class="form-control"
                                        maxlength="10" placeholder="Student Mobile" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Student DOB</label>
                                        <div class="input-group">
                                            <span class="input-group-append"><span class="input-group-text"><i
                                                        class="mdi mdi-calendar-check"></i></span></span>
                                            <input type="text" data-date-format='yyyy-mm-dd' id="studentDob"
                                                class="form-control mydatepicker" placeholder="yyyy-mm-dd" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Student Aadhar Number</label>
                                        <input type="text" id="studentAadharNumber" name="studentAadharNumber"
                                        maxlength="12" controls="false" class="form-control" placeholder="Aadhar Number" required>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Duration</label>
                                        <select class="form-control" id="duration" name="duration" required>
                                            <option value="">Select</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Start Date</label>
                                        <div class="input-group">
                                            <input type="text" data-date-format='yyyy-mm-dd' id="startDate"
                                                class="disabled form-control mydatepicker" placeholder=""
                                                readonly="readonly" required disabled>
                                            <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-6">
                                    <div class="form-group">
                                        <label>End Date</label>
                                        <div class="input-group">
                                            <input type="text" data-date-format='yyyy-mm-dd' id="endDate"
                                                class="disabled form-control mydatepicker" placeholder=""
                                                readonly="readonly" required disabled> <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-6">
                                    <div class="form-group">
                                        <label>Room Type</label>
                                        <select class="form-control" id="roomType" name="roomType" required>
                                            <option value="">Select</option>
                                            <option>AC</option>
                                            <option>NON-AC</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Locker</label>
                                        <select class="form-control" id="locker" name="locker" required>
                                            <option value="">Select</option>
                                            <option>Yes</option>
                                            <option>No</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Laptop</label>
                                        <select class="form-control" id="laptop" name="laptop" required>
                                            <option value="">Select</option>
                                            <option>Yes</option>
                                            <option>No</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </section>
                        <h4>Upload Documents</h4>
                        <section>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="form-group">
                                        <label>Upload Aadhar Card</label>
                                        <div class="input-group">
                                            <input type="file" accept="image/*" id="aadharCard" class="form-control">
                                        </div>
                                    </div>
                                </div>
                                <img id="aadharCardBase64" style="display: none;">
                            </div>
                        </section>
                        <h4>Payment Details</h4>
                        <section>
                            <div class="row">
                                <div class="col-md-4"></div>
                                <div class="col-md-8"></div>
                            </div>
                            <div class="row">
                                <div class="col-sm-4">
                                    <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-12">
                                            <div class="form-group">
                                                <label>Payment Mode</label>
                                                <select class="form-control" id="paymentMode" name="paymentMode"
                                                    required>
                                                    <option value="">Select</option>
                                                    <option value="1">Cash</option>
                                                    <option value="2">NEFT</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-12" id="bank-form" style="display: none">
                                            <div>
                                                <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="form-group">
                                                    <label>Bank Name</label>
                                                    <input type="text" id="bankName" name="bankName"
                                                        class="form-control" placeholder="Bank Name" required>
                                                </div>
                                            </div>
                                            <div>
                                                <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>
                                                <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>
                                                <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>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>Discount</label>
                                                <input type="text" value="0" id="discount" name="discount" class="form-control"
                                                    placeholder="" required>
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <label>Payment Status</label>
                                                <select class="form-control" id="paymentStatus" name="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-12" 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>
                                <div class="col-sm-8">
                                    <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-6">
                                                            <strong>Payment Method:</strong><br>
                                                            <address id='invoice-payment'>
                                                            </address>
                                                        </div>
                                                        <div class="col-sm-6 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>
                        </section>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- #/ container -->
</div>
<!--**********************************
        Content body end
***********************************-->
@endsection

@section('script')
<script>
let plans = [];
let plan = null;
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;   

$('#reportrange').hide();

var form = $("#step-form-horizontal");
form.validate({
    rules: {
        studentName: {
            required: true,
            lettersonly: false,
            maxlength: 100
        },
        studentMobile: {
            required: true,
            digits: true
        },
        studentEmail: {
            required: true,
            email: true
        },
        studentAadharNumber: {
            required: true,
            digits: true,
            minlength: 12,
            maxlength: 12
        },
        startDate: {
            required: true,
        },
        endDate: {
            required: true,
        },
        duration: {
            required: true
        },
        paymentStatus: {
            required: true
        },
        paymentMode: {
            required: true
        },
        roomType: {
            required: true
        },
        locker: {
            required: true
        },
        laptop: {
            required: true
        },
        aadharCard: {
            required: false,
            accept: "image/jpeg,image/jpg,image/png",
            filesize: 31457280
        },
    }
}).settings.ignore = ":disabled,:hidden";

form.children('div').steps({
    headerTag: "h4",
    bodyTag: "section",
    transitionEffect: "slideLeft",
    autoFocus: true,
    transitionEffect: "slideLeft",
    onStepChanging: function(event, currentIndex, newIndex) {

        fnCalculateInvoice();

        if (newIndex == '2') {
            fnPreviewInvoice()
        }

        return form.valid();
    },

    onFinished: function() {

        if (form.valid() == true) {
            $('#preloader').show();
            fnAddStudent();
        }
    }
});

var studentMobile = document.getElementById('studentMobile');

studentMobile.addEventListener('input', function(event) {
    var input = event.target.value;
    event.target.value = input.replace(/\D/g, '');
});

var studentAadharNumber = document.getElementById('studentAadharNumber');

studentAadharNumber.addEventListener('input', function(event) {
    var input = event.target.value;
    event.target.value = input.replace(/\D/g, '');
});

$('#studentDob').datepicker({
    autoclose: true,
});
$('#startDate').datepicker({
    autoclose: true,
});
$('#endDate').datepicker({
    autoclose: true,
});
$("#startDate").val(new Date().toISOString().split('T')[0]);
getPlans();
getDurations();

$('#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();

    start_date = new Date($("#startDate").val())

    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());
    }

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

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

    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());
    }
    $("#endDate").val(end_date.toISOString().split('T')[0]);

});


$('#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 = "block";
    } 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 total", "error");
        return
    }

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

});

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

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

            if (response.data == false) {
                sweetAlert("Oops...", response.message, "error");
                $("#studentEmail").val("")
            }

        }
    });

});

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

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

            if (response.data == false) {
                sweetAlert("Oops...", response.message, "error");
                $("#studentMobile").val("")
            }

        }
    });

});

function fnCalculateInvoice() {

    room = $('#roomType option:selected').val();
    laptop = $('#laptop option:selected').val();
    locker = $('#locker option:selected').val();

    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);

}

function fnPreviewInvoice() {

    toHtml = $('#studentName').val();
    $("#bill-to").html(toHtml);

    paymentModeHtml = $('#paymentMode option:selected').text() + '<br>' + $('#studentEmail').val();
    $('#invoice-payment').html(paymentModeHtml)

    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 = '';
            durations.forEach(element => {
                durationHtml += '<option value="' + element.duration + '">' + element.duration +
                ' ' + (element.duration == "1" ? 'Month' : 'Months')+'</option>'
            });

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

        }
    });
}

function fnAddStudent() {
    let url = "/api/auth/createStudent";
    let data = {
        student_name: $("#studentName").val(),
        student_dob: $("#studentDob").val(),
        student_email: $("#studentEmail").val(),
        student_mobile: $("#studentMobile").val(),
        student_aadhar_number: $("#studentAadharNumber").val()
    };
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + localStorage.getItem('token')
        },
        url: url,
        type: "POST",
        data: data,
        success: function(response) {
            if (response.success == true) {
                $("#studentId").val(response.data.id);
                fnAddStudentMembership();
            } else {
                $('#preloader').hide();
                sweetAlert("Oops...", response.message, "error");
            }

        }
    });
}

function fnAddStudentMembership() {

    let url = "/api/auth/createStudentMembership";
    let data = {
        student_id: $("#studentId").val(),
        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)
            fnUploadStudentDocument();
        }
    });
}

function fnAddStudentTransaction() {

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

    if ($("#paymentStatus").val() == '2') {
        $("#grandTotal").val($("#partialAmount").val())
    }

    let url = "/api/auth/createStudentTransaction";
    let data = {
        student_id: $("#studentId").val(),
        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: $("#studentMembershipId").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("/new_membership");
        },
        error: function(response) {
            $('#preloader').hide();
            sweetAlert("Oops...", "Something went wrong !!", "error");
        }
    });
}

function fnUploadStudentDocument() {
    var data = new FormData();
    var img = $("#aadharCardBase64").attr('src');
    data.append('file', img);
    data.append('student_id', $("#studentId").val());
    console.log(data);
    let url = "/api/auth/uploadStudentDocument";
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            "Authorization": "Bearer " + localStorage.getItem('user')
        },
        url: url,
        type: "POST",
        data: data,
        contentType: false,
        cache: false,
        processData: false,
        success: function(response) {
            fnAddStudentTransaction();
        }
    });
}

$('#aadharCard').change(function() {
    let reader = new FileReader();
    reader.onload = (e) => {
        $('#aadharCardBase64').attr('src', e.target.result);
    }
    reader.readAsDataURL(this.files[0]);
});
</script>
@endsection