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

@section('subhead')
    <title>Atarud MIS - Add Invoice</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
    <style>
        .form-group {
            margin-top: 10px;
        }

        .control-label {
            margin-top: 45px;
        }
    </style>
@endsection

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Add Invoice</h2>
    </div>
    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 lg:col-span-6">
            <!-- BEGIN: Basic Notification -->
            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Invoice Informations</h2>

                </div>
                <div id="basic-textual-notification" class="p-5">
                    <div class="preview">
                        <div class="row">
                            <div class="col-md-6">
                                <form action="{{ route('invoice.store') }}" method="post">
                                    @csrf
                                    <div class="form-group">
                                        <label for="field-2" class="control-label"> Program </label>

                                        <select name="program_id" class="form-control" data-validate="required"
                                            value="{{ old('program_id') }}" id="class_id"
                                            data-message-required="value_required "
                                            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-group">
                                        <label for="field-2" class="control-label">Select Semester </label>

                                        <select name="semester_id" class="form-control" data-validate="required"
                                            value="{{ old('semester_id') }}" id="semester_id"
                                            data-message-required=" value_required "
                                            onchange="getSection(this.value)//get_class_sections(this.value)">
                                            <option value="">Select Semester</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="field-2" class="control-label">Select Section </label>

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

                                    </div>
                                    <div class="form-group">
                                        <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 class="form-group">
                                    <label for="field-2" class="control-label"> Student </label>
                                    <div class="col-sm-9">
                                        <select name="student_id" class="form-control" id="student_selector_holder"
                                            onchange="has_admission(this.value)">
                                            <option value=""> select_section_first </option>

                                        </select>
                                    </div>
                                </div>
                                <div class="form-control col-span-4 mt-2" id="discountPercentage">
                                    <label class="control-label"> Discount Percentage</label>
                                    <input type="text" class="form-control" name="discountPercent" id="discount"
                                        value="{{ old('discountPercent') > 0 ? old('discountPercent') : 0 }}"
                                        onchange="calculate()" value="12332" placeholder="Discount Amount" />
                                </div>
                                <div class="form-group">
                                    <label class="  control-label"> Title </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="Enter Title" name="title"
                                            id="title" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="  control-label">Description</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" placeholder="Enter Description"
                                            name="description" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="  control-label"> Date </label>
                                    <div class="col-sm-9">
                                        <input type="date" onchange="get_monthly_fee();" id="start_date"
                                            class="form-control" value="{{ date('Y-m-01') }}" name="date" />
                                    </div>
                                </div>
                                

                                <div class="form-group">
                                    <label class="  control-label"> Due Date</label>
                                    <div class="col-sm-9">
                                        <input type="date" onchange="get_monthly_fee();" id="due_date"
                                            class="form-control" value="{{ date('Y-m-t') }}" name="due_date" />
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
            <!-- END: Basic Notification -->
        </div>
        <!-- END: of first box -->

        <div class="intro-y col-span-12 lg:col-span-6">

            <div class="intro-y box">
                <div
                    class="flex flex-col sm:flex-row items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                    <h2 class="font-medium text-base mr-auto">Payments Informations</h2>

                </div>
                <div id="notification-with-avatar" class="p-5">
                    <div class="preview">
                        <div class="">
                            <!-- BEGIN: Notification Content -->
                            <div class="form-group">
                                <label class=" control-label"> Admission Fee</label>
                                <input type="text" class="form-control" name="admission_fee"
                                    id="admission_fee" value="{{ old('admission_fee') }}" onchange="calculate()"
                                    value="0" placeholder="Enter Total Amount" />
                            </div>

                            <div class="form-group">
                                <label class="control-label"> Exam Fee</label>
                                <div class="">
                                    <input type="text" class="form-control" name="examination_fee" id="exam_fee"
                                        onchange="calculate()" value="0" placeholder="Enter Total Amount');?>" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label"> Materials</label>
                                <input type="text" 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-group">
                                <label class="control-label"> Monthly Fee</label>
                                <div class="">
                                    <input type="text" class="form-control" name="monthly_fee" id="monthly_fee"
                                        onchange="calculate()" value="0" placeholder="Enter Total Amount" />
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label"> Discount Percentage</label>
                                <div class="">
                                    <input type="text" class="form-control" name="discount" id="discount"
                                        onchange="calculate()" value="0" placeholder="Discount Amount" />
                                </div>
                            </div>
                            <div class="form-group">
                                <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-group">
                                <label class="control-label"> Tax Amount</label>
                                <input type="text" 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-group">
                                <label class="control-label">Net Amount</label>
                                <input type="text" 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="text" 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">Payment</label>
                                <input type="text" class="form-control" name="payment" id="payment"
                                    value="{{ old('payment') }}" onkeyup="check_payment()"
                                    placeholder="Enter Payment Amount" />
                            </div>

                            <div class="col-md-6">

                                <div class="form-group">
                                    <div class="col-sm-5">
                                        <button type="submit" class="btn btn-info">Add Invoice</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                        </div>
                    </div>

                </div>
            </div>
            <!-- END: Notification With Avatar -->


        </div>
    </div>
@endsection
@section('script')
<script src="{{ asset('dist/js/jquery.js') }}"></script>
<script >

    // print invoice function
    function PrintElem(elem) {
        Popup($(elem).html());
    }

    function Popup(data) {
        var mywindow = window.open('', 'invoice', 'height=600,width=850');
        mywindow.document.write('<html><head><title>Invoice</title>');
        mywindow.document.write('<link rel="stylesheet" href="assets/css/neon-theme.css" type="text/css" />');
        mywindow.document.write(
            '<link rel="stylesheet" href="assets/js/datatables/responsive/css/datatables.responsive.css" type="text/css" />'
        );
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }
      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);

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

                }
            });

            payment_info(program_id);
            get_book(program_id);
        }

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

                }
            });


        }


    function get_class_sections(program_id) {
        $.ajax({
            method: 'GET',
            url: "{{ url('/get/course/section/') }}",
            data: {
                p_id: program_id,
            },

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

            }
        });


        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);
            jQuery('#material_fee').attr('value', response.material_fee);
            // jQuery('#monthly_fee').attr('value', response.monthly_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);
                var monthly_fee = parseInt(response);
                jQuery('#monthly_fee').attr('value', monthly_fee);
                calculate();

            }
        });

    }

    function get_section_students(class_id) {
        
        var program_id = jQuery('#class_id').val();
        var semester_id = jQuery('#semester_id').val();
        var section_id = jQuery('#section_id').val();
        var course_id = jQuery('#section_selector_holder').val();


        $.ajax({
            method: 'GET',
            url: "{{ url('/get/section/students') }}",
            data: {
                program_id: program_id,
                semester_id: semester_id,
                section_id: section_id,
                course_id: course_id,
            },

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

            }
        });
    }


    function has_admission(student_id) {
        var class_id = jQuery('#class_id').val();
        var section_id = jQuery('#section_selector_holder').val();

        $.ajax({
            url: 'index.php?admin/has_admission/' + class_id + '/' + section_id + '/' + student_id,
            success: function(response) {
                if (response == 'true') {
                    $("#admission_fee").prop('disabled', true);
                    jQuery('#admission_fee').attr('value', 0);

                    calculate();
                } else {
                    jQuery('#admission_fee').show();

                    payment_info(class_id);
                    calculate();
                }
            }
        });

        //has_examination_fee(student_id);
        //has_material_fee(student_id);
    }

    function has_examination_fee(student_id) {
        var class_id = jQuery('#class_id').val();
        var section_id = jQuery('#section_selector_holder').val();

        $.ajax({
            url: 'index.php?admin/has_examination_fee/' + class_id + '/' + section_id + '/' + student_id,
            success: function(response) {
                if (response == 'true') {
                    jQuery('#exam_fee').hide();
                    jQuery('#exam_fee').attr('value', '0');

                    calculate();
                } else {
                    jQuery('#exam_fee').show();
                    calculate();
                }
            }
        });
    }

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

        if (amount_paid > total) {
            //alert("total: " + total + " Amount Paid: " + amount_paid);
            alert("payment cannot be more than total amount");
        }

    }

        function calculate() {
            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('#exam_fee').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