@extends('../layout/' . $layout)

@section('subhead')
<title>Atarud MIS - Create Student</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }

    .fileBtn:hover {
        cursor: progress;
        color: red;
    }
</style>
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@section('subcontent')
<div class="intro-y flex items-center mt-8">
    <h2 class="text-lg font-medium mr-auto">Create Student </h2>
</div>
<div class="box ">

    <div class="col-span-12 lg:col-span-8 2xl:col-span-9 ">
        <form id="studentForm" action="{{ route('student.store') }}" method="post" enctype="multipart/form-data">
            @csrf
            @method('post')
            <!-- BEGIN: Display Information -->

            <div class="intro-y box lg:mt-5">
                <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                    style="background-color: #292727; border-radius: 4px;">
                    <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Personal
                        Information</h2>
                </div>
                <div class="p-5 box bg-primary/10">
                    <div class="flex flex-col-reverse xl:flex-row flex-col">
                        <div class="flex-1 mt-6 xl:mt-0">


                            <div class="grid grid-cols-12 gap-2">
                                <div class="form-control col-span-4">
                                    <label for="input-wizard-1" class="form-label">Full Name</label><br>
                                    <input id="input-wizard-1" required type="text" name="name"
                                        value="{{ old('name') }}" class="form-control col-span-4"
                                        placeholder="First Name">
                                </div>
                                <div class="form-control col-span-4">
                                    <label for="input-wizard-3" class="form-label">Father name</label>
                                    <input id="input-wizard-3" type="text" name="father_name" class="form-control"
                                        value="{{ old('father_name') }}" placeholder="Father Name">
                                </div>
                                <div class="form-control col-span-4">
                                    <label for="field-2" class="col-sm-3 control-label">Gender </label>
                                    <div class="mt-2">
                                        <select name="sex" id="input-wizard-4" class="form-control" required
                                            value="{{ old('sex') }}">
                                            <option value="">Select Gender </option>
                                            <option value="male">Male</option>
                                            <option value="female">Female</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label for="input-wizard-4" class="form-label">Private Number</label>
                                    <input id="input-wizard-4" type="text" name="private_phone"
                                        value="{{ old('private_phone') }}" class="form-control"
                                        placeholder="Personal Phone Number" required>
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label for="input-wizard-4" class="form-label">Family Number</label>
                                    <input id="input-wizard-4" type="text" name="family_phone"
                                        value="{{ old('family_phone') }}" class="form-control"
                                        placeholder="Personal Phone Number" required>
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label for="field-2" class="col-sm-3 control-label">Discount </label>
                                    <div class="mt-2">

                                        <select name="discount" id="discountSelector" value="{{ old('discount') }}"
                                            onchange="return dis(this);" class="form-control">
                                            <option value="">Select Discount </option>
                                            <option value="1">Allowed</option>
                                            <option value="0">Not Allowed</option>
                                        </select>
                                    </div>

                                </div>

                                <div class="form-control col-span-6">
                                    <div class="mt-3">
                                        <label for="update-profile-form-5" class="form-label">Address</label>
                                        <textarea id="update-profile-form-5" rows="3" name="address"
                                            class="form-control" placeholder="Address"></textarea>
                                    </div>
                                </div>


                                <div class="w-52 mx-auto xl:mr-0 xl:ml-6" style="margin-left: 200px;">
                                    <div class=" shadow-sm border-slate-200/60 dark:border-darkmode-400 rounded-md p-5">
                                        <div class="h-40 relative image-fit cursor-pointer zoom-in mx-auto"
                                            style="width: 250px; height: 140px;">
                                            <img class="rounded-md zoom-in mx-auto" alt="Midone - HTML Admin Template"
                                                data-action="zoom" id="st_img">

                                        </div>
                                        <div class="mx-auto cursor-pointer relative mt-5 ml-8">
                                            <button type="button" class="btn btn-primary w-full ml-5">Change
                                                Photo</button>
                                            <input type="file" id="image" name="image"
                                                class="w-full h-full top-0 left-0 absolute opacity-0">
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>

                    </div>
                </div>
                <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                    style="background-color: #292727; border-radius: 4px;">
                    <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Tusion
                        Information</h2>
                </div>

                <div class="p-5 box bg-primary/10">
                    <div class="flex flex-col-reverse xl:flex-row flex-col">
                        <div class="flex-1 mt-6 xl:mt-0">

                            <div class="grid grid-cols-12 gap-2">
                                <div class="form-control col-span-3">
                                    <label for="field-2" class="control-label"> Program </label>

                                    <select name="program_id" class="form-control" value="{{ old('program_id') }}"
                                        id="class_id" onchange="get_class_semesters(this.value)">
                                        <option value="">Select</option>
                                        @foreach ($programs as $row)
                                        <option value="{{ $row->id }}">
                                            {{ $row->title }}
                                        </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-control col-span-3">
                                    <label for="field-2" class="control-label">Select Semester </label>

                                    <select name="semester_id" class="form-control" value="{{ old('semester_id') }}"
                                     id="semester_id" onchange="getSection(this.value)">
                                        <option value="">Select Semester</option>
                                    </select>
                                </div>
                                <div class="form-control col-span-3">
                                    <label for="field-2" class="control-label">Select Section </label>

                                    <select name="section_id" class="form-control"
                                        value="{{ old('section_id') }}" id="section_id"
                                        onchange="get_section_courses(this.value)">
                                        <option value="">Select Section</option>
                                    </select>

                                </div>
                                <div class="form-control col-span-3 ">
                                    <label for="field-2" class="control-label"> Course ID </label>
                                    <div class="col-sm-9">
                                        <select name="course_id" class="form-control" id="section_selector_holder"
                                            value="{{ old('course_id') }}"
                                            onchange="return get_section_students(this.value)">
                                            <option value="">Select Class</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!--books count -->
                <input type="hidden" name="count" id="count">
                <!--materials or book book div -->
                <div id="material">

                    <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                        style="background-color: #292727; border-radius: 4px;">
                        <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Materials
                            Information</h2>
                    </div>
                    <!--books will display here -->
                    <div id="books" class="box bg-primary/10"></div>
                    <!--end of books display here -->

                </div>
                <!--end of materials or book book div -->


                <div class="flex box items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                    style="background-color: #292727; border-radius: 4px;">
                    <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Payment
                        Information</h2>
                </div>

                <div class="p-5 box bg-primary/10 ">
                    <div class="flex flex-col-reverse xl:flex-row flex-col">
                        <div class="flex-1 mt-6 xl:mt-0">

                            <div class="grid grid-cols-12 gap-2">
                                <div class="form-control col-span-4 mt-2" id="discountPercentage">
                                    <label class="control-label"> Discount Percentage</label>
                                    <input type="number" class="form-control" name="discountPercent" id="discount"
                                        value="{{ old('discountPercent') > 0 ? old('discountPercent') : 0 }}"
                                        onchange="calculate()" placeholder="Discount Amount" />
                                </div>
                                <div class="form-control col-span-4 mt-2" id="discountTitle">
                                    <label class="control-label"> Title </label>
                                    <input type="text" class="form-control" placeholder="Enter Title" name="title"
                                        value="{{ old('title') }}" id="title" />
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Admission Fee</label>
                                    <input type="number" class="form-control" name="admission_fee" id="admission_fee"
                                    value="0" value="{{ old('admission_fee') }}" onchange="calculate()"
                                        placeholder="Enter Total Amount" />
                                </div>

                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Materials</label>
                                    <input type="number" class="form-control" name="material_fee" id="material_fee"
                                        value="{{ old('material_fee') > 0 ? old('material_fee') : 0 }}"
                                        onchange="calculate()" value="0" placeholder="Enter Total Amount" />
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Date </label>
                                    <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2"
                                        onchange="get_monthly_fee();" id="start_date"
                                        value="@php echo(Morilog\Jalali\Jalalian::now()->format('Y-m-01')); @endphp"
                                        name="date" />
                                </div>

                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Due Date</label>
                                    <input type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2"
                                        onchange="get_monthly_fee();" id="due_date"
                                        value="@php echo(Morilog\Jalali\Jalalian::now()->format('Y-m-t')); @endphp"
                                        name="due_date" value="{{ old('due_date') }}" />
                                </div>
                              
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Monthly Fee</label>
                                    <input type="number" class="form-control" name="monthly_fee" id="monthly_fee"
                                        onchange="calculate()" value="0" placeholder="Enter Total Amount"
                                        value="{{ old('monthly_fee') }}" />
                                </div>

                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Tax</label>
                                    <input type="text" value="4" id="tax" class="form-control" name="tax" id="discount"
                                        onchange="calculate()" value="0" value="{{ old('tax') }}"
                                        placeholder="Discount Amount" />
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Tax Amount</label>
                                    <input type="number" value="4" id="tax_amount" class="form-control" name="tax_amount"
                                        id="discount" onchange="calculate()"
                                        value="{{ old('tax_amount') > 0 ? old('tax_amount') : 0 }}"
                                        placeholder="Discount Amount" />
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label">Net Amount</label>
                                    <input type="number" class="form-control" name="net_amount" id="net_amount"
                                        value="{{ old('net_amount') }}" onchange="calculate()" value="0"
                                        placeholder="Enter Total Amount" />
                                </div>

                                <div class="form-control col-span-4 mt-2">
                                    <label class="control-label">Total Amount To Pay</label>
                                    <input type="number" class="form-control" name="payable_amount" id="total_to_pay"
                                        value="{{ old('amount') }}" onchange="calculate()" value="0"
                                        placeholder="Enter Total Amount" />
                                </div>
                                  <div class="form-control col-span-4 mt-2">
                                    <label class="control-label"> Fees Payment Amount</label>
                                    <select name="fees_payment" class="form-control" id="fees_payment"
                                        value="{{ old('fees_payment') }}">
                                        <option value="">Select</option>
                                        <option value="half">Half</option>
                                        <option value="complete">Complete</option>
                                    </select>
                                </div>
                                <div class="form-control col-span-4 mt-2">
                                    <label class="  control-label">Payment</label>
                                    <input type="number" class="form-control" name="payment" id="payment" required
                                        value="{{ old('payment') }}" onkeyup="check_payment()"
                                        placeholder="Enter Payment Amount" />
                                </div>
                                <div class="intro-y col-span-12 sm:col-span-6 mt-2">
                                    <label for="input-wizard-4" class="control-label">Description</label>
                                    <br>
                                    <textarea name="description" id="" cols="76" rows="4"
                                        value="{{ old('description') }}"></textarea>
                                </div>

                            </div>

                            <button type="submit" class="btn btn-primary mt-5" style="float: right;">Save</button>

                        </div>

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

</div>
<!-- END: Display Information -->

</form>
</div>
@endsection

@section('script')
<script src="{{ asset('dist/js/jquery.js') }}"></script>
<script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
<script>
    $(function () {

        $(".pdpF2").persianDatepicker({
            months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
            dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
            shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
            showGregorianDate: !1,
            persianNumbers: !0,
            formatDate: "YYYY-MM-DD",
            selectedBefore: !1,
            selectedDate: null,
            startDate: null,
            endDate: null,
            prevArrow: '\u25c4',
            nextArrow: '\u25ba',
            theme: 'default',
            alwaysShow: !1,
            selectableYears: null,
            selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            cellWidth: 25, // by px
            cellHeight: 20, // by px
            fontSize: 13, // by px
            isRTL: !1,
            calendarPosition: {
                x: 0,
                y: 0,
            },
            onShow: function () {},
            onHide: function () {},
            onSelect: function () {get_monthly_fee();},
            onRender: function () {}
    });

    });
        $('#fees_payment').on('change',function(){
            var type = $(this).val();
            var totalToPay = $('#total_to_pay').val();

            if(type == "complete"){
                $('#payment').val(totalToPay);
            }else{
                $('#payment').val(null);
            }
        });
    // Start of discount show functionality
        jQuery('#discountPercentage').hide();
        jQuery('#discountTitle').hide();

        function dis(el) {
            if (el.value == 1) {
                jQuery('#discountPercentage').show();
                jQuery('#discountTitle').show();
            } else {
                jQuery('#discountPercentage').hide();
                jQuery('#discountTitle').hide();
            }
        }
        // End of discount show functionality

        $(document).ready(function() {
            // Start of image show functionality
            var img = document.getElementById('st_img');
            var fl = document.getElementById('image');
            fl.onchange = evt => {
                const [file] = fl.files;
                if (file) {
                    img.src = URL.createObjectURL(file);
                }
            }
            // end of image show functionality
        });

        var books = [];

        jQuery('#book_container').hide();
        jQuery('#material').hide();

        function get_class_semesters(program_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/program/semester/') }}",
                data: {
                    p_id: program_id,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#semester_id').html(response);

                }
            });
            // payment_info(program_id);
            get_book(program_id);
        }

        function get_section_courses(section_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/section/course/') }}",
                data: {
                    s_id: section_id,
                },
                success: function(response) {
                    jQuery('#section_selector_holder').html(response);
                }
            });
        }

        function getSection(semester_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/semester/section/') }}",
                data: {
                    s_id: semester_id,
                },
                success: function(response) {
                    jQuery('#section_id').html(response);
                }
            });
        }
        
        // Change Material Fee Functionality
        function change_material_fee(book) {
            var id = book.dataset.id;
            var number = book.dataset.number;
            var selected_book_quantity = document.getElementById('book_amount' + number);
            var selected_book_checkbox = document.getElementById('book' + number);
            var price = book.dataset.price;
            var book_quantity = Number(selected_book_quantity.value);
            var total = 0;

            if (selected_book_checkbox.checked) {

                document.getElementById('total_book_amount' + number).value = Number(price) * book_quantity;
                $('input:hidden[class=total_book_amount]').each(function() {
                    total += Number($(this).val());
                });
                document.getElementById("material_fee").value = total;
                calculate();

            } else {
                document.getElementById('total_book_amount' + number).value = Number(0);
                $('input:hidden[class=total_book_amount]').each(function() {
                    total += Number($(this).val());
                });
                document.getElementById("material_fee").value = total;
                calculate();
            }
        }

        function get_book(program_id) {

            $.ajax({
                method: 'GET',
                url: "{{ url('/get/book/') }}",
                data: {
                    p_id: program_id,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#books').html(response[0]);
                    jQuery('#book_container').show();
                    jQuery('#material').show();
                    jQuery('#count').val(response[1]);
                }
            });
            // payment_info(program_id);
        }

        // function payment_info(program_id) {
        //     $.ajax({
        //         method: 'GET',
        //         url: "{{ url('/payment/info') }}",
        //         data: {
        //             p_id: program_id,
        //         },

        //         success: function(response) {
        //             jQuery('#admission_fee').attr('value', response.admission_fee);
        //             jQuery('#exam_fee').attr('value', response.examination_fee);
        //             calculate();
        //         }
        //     });
        // }

        function get_monthly_fee() {
            var form_data = {
                start_date: jQuery('#start_date').val(),
                due_date: jQuery('#due_date').val(),
                section_id: jQuery('#section_selector_holder').val()
            }

            $.ajax({
                method: 'GET',
                url: "{{ url('/get/monthly/fee') }}",
                data: form_data,

                success: function(response) {
                    console.log(response.total_fee);
                    var monthly_fee = parseInt(response.total_fee);
                    var admission_fee = parseInt(response.admission_fee);
                    jQuery('#monthly_fee').attr('value', monthly_fee);
                    jQuery('#admission_fee').attr('value', admission_fee);
                    calculate();

                }
            });

        }

        function get_section_students(class_id) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/get/section/students') }}",
                data: {
                    class_id: class_id,
                },

                success: function(response) {
                    jQuery('#student_selector_holder').html(response);
                    get_monthly_fee();

                }
            });
        }

        function check_payment() {
            var total = parseInt($('#total_to_pay').val());
            var amount_paid = parseInt($('#payment').val());

            if (amount_paid > total) {
                alert("payment cannot be more than total amount");
            }

        }

        function calculate() {
            var taxAmount = (parseInt(jQuery('#monthly_fee').val()) * jQuery('#tax').val()) / 100;
            console.log(taxAmount);

            var admission_fee = parseInt(jQuery('#admission_fee').val());
            var material_fee = parseInt(jQuery('#material_fee').val());
            var monthly_fee = parseInt(jQuery('#monthly_fee').val());
            // var exam_fee = parseInt(jQuery('#').val());
            var discount = parseInt(jQuery('#discount').val());
            var tax = parseInt(jQuery('#tax').val());

            // Total amount
            var total = 0;
            if (admission_fee) total += admission_fee;
            if (material_fee) total += material_fee;
            // if (exam_fee) total += exam_fee;
            if (monthly_fee) total += monthly_fee;

            //net amount
            jQuery('#net_amount').attr('value', Math.round(total));
            jQuery('#net_amount').attr('value', Math.round(total + (monthly_fee * jQuery('#tax').val()) / 100));

            //discount amount
            if (discount != 0 && discount != '' && monthly_fee > 0) {
                discount_amount = (monthly_fee * discount) / 100;

                $('#title').attr('value', discount + '% discount ( ' + discount_amount + ' AFG )');
                total -= discount_amount;
            }

            jQuery('#total_to_pay').attr('value', Math.round(total));
            var tax_amount = (monthly_fee * jQuery('#tax').val()) / 100;
            jQuery('#tax_amount').attr('value', Math.round(tax_amount));

            // jQuery('#payment').attr('value', Math.round(tax_amount + Number(jQuery('#total_to_pay').val())));
            jQuery('#total_to_pay').attr('value', Math.round(tax_amount + Number(jQuery('#total_to_pay').val())));
        }
</script>
@endsection