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

@section('subhead')
    <title>Atarud MIS - Edit Invoice</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">Edit Invoice </h2>
    </div>
    <div class="box ">

        <div class="col-span-12 lg:col-span-8 2xl:col-span-9 ">
            <form  action="{{ route('invoice.update', $invoice) }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('put')
                <!-- BEGIN: Display Information -->
                <input type="hidden" name="id" value="{{ $invoice->id }}">
                <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;">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" data-validate="required"
                                            value="{{ old('program_id') }}" id="class_id"
                                            onchange="get_class_semesters(this.value)">
                                            <option>Select Program</option>
                                            @foreach ($data['programs'] as $row)
                                                <option value="{{ $row->id }}" @if($row->id == $data['program']->id) selected @endif>{{ $row->title }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label">Select Semester </label>
                                        <select id="semester_id" class="form-select" name="semester_id" onchange="getSection(this.value)">
                                            <option>Select Semester</option>
                                            @foreach ($data['semesters'] as $row)
                                                <option value="{{ $row->id }}" @if($row->id == $data['semester']->id) selected @endif>{{ $row->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-control col-span-3">
                                        <label for="field-2" class="control-label">Select Section </label>
                                        <select id="section_id" onchange="get_section_courses(this.value)" class="form-select" name="section_id">
                                            <option>Select Section</option>
                                            @foreach ($data['sections'] as $row)
                                                <option value="{{ $row->id }}" @if($row->id == $data['section']->id) selected @endif>{{ $row->name }}</option>
                                            @endforeach
                                        </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 id="section_selector_holder" name="course_id" class="form-select" onchange="return get_section_students(this.value)">
                                                <option>Select Course</option>
                                                @foreach ($data['courses'] as $row)
                                                    <option value="{{ $row->id }}" @if($row->id == $data['course']->id) selected @endif>{{ $row->title }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </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">
                                        <label class="control-label"> Admission Fee</label>
                                        <input type="text" class="form-control" name="admission_fee"
                                            id="admission_fee" value="{{ $invoice->admission_fee }}" onchange="calculate()"
                                            value="0" placeholder="Enter Total Amount" />
                                    </div>

                                    <div class="form-control col-span-4 mt-2">
                                        <label class="control-label"> Materials</label>
                                        <input type="text" class="form-control" name="material_fee" id="material_fee"
                                            value="{{ $invoice->material_fees }}"
                                            onchange="calculate()" value="0" placeholder="Enter Total Amount" />
                                    </div>
                                    <div class="form-control col-span-4 mt-2">
                                        <label class="control-label"> Exam Fee</label>
                                        <input type="text" class="form-control" name="exam_fee" id="exam_fee"
                                            value="{{ $invoice->exam_fee }}"
                                            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" @if($invoice->fees_payment == 'half') selected @endif>Half</option>
                                            <option value="complete" @if($invoice->fees_payment == 'complete') selected @endif>Complete</option>
                                        </select>
                                    </div>
                                    <div class="form-control col-span-4 mt-2">
                                        <label class="control-label"> Monthly Fee</label>
                                        <input type="text" class="form-control" name="monthly_fee" id="monthly_fee"
                                            onchange="calculate()"placeholder="Enter Total Amount"
                                            value="{{  $data['monthly_fee']}}" />
                                    </div>

                                    <div class="form-control col-span-4 mt-2">
                                        <label class="control-label"> Tax</label>
                                        <input type="text" id="tax" class="form-control"
                                            name="tax" onchange="calculate()"
                                            value="{{ $invoice->tax }}" />
                                    </div>
                                    <div class="form-control col-span-4 mt-2">
                                        <label class="control-label"> Tax Amount</label>
                                        <input type="text" id="tax_amount" class="form-control"
                                            name="tax_amount" onchange="calculate()"
                                            value="{{ $invoice->tax_amount }}" />
                                    </div>
                                    <div class="form-control col-span-4 mt-2">
                                        <label class="control-label">Net Amount</label>
                                        <input type="text" class="form-control" name="net_amount" id="net_amount"
                                            value="{{ $invoice->net_amount }}" onchange="calculate()"/>
                                    </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="{{ $invoice->payable_amount }}" onchange="calculate()"/>
                                    </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="{{ $invoice->payment }}" onkeyup="check_payment()"/>
                                    </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="{{ $invoice->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 () {}
    });


    });
</script>

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

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

                }
            });


        }


        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);
                    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 check_payment() {
            var total = parseInt($('#total_to_pay').val());
            var amount_paid = parseInt($('#payment').val());

            if (amount_paid > total) {
                //alert("total: " + total + " Amount Paid: " + amount_paid);
                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('#exam_fee').val());
            var tax = parseInt(jQuery('#tax').val());

            // Total amount
            var total = 0;
            if (admission_fee) total += admission_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));

            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