@extends('layouts.app')

@section('content')


    <form action="" class="col col-lg-9 pd-30" id="form_request_ajax" method="POST">
        @csrf
        <!-- Page Title -->
        {{--  <div class="page-title divider-b pdb-10 flexbox align-between align-center-y mb-20">

        <h1 class="reset-block primary-color lineheight-130 fs-20">حاسبة سريعة</h1>
        <button class="btn small primary">حفظ </button>

    </div>  --}}
    <div class="">
        <!-- Page Title -->
        @component('components.print')
        @endcomponent
        <div class="page-title not_print divider-b pdb-10 flexbox align-between align-center-y mb-20">
            <h1 class="reset-block primary-color lineheight-130 fs-20">الحاسبة السريعة</h1>
        </div>
        <!-- Grid -->
        <div class="row ">

            <!-- Widget Block -->
            <div class="col-6">
                <div class="widget-block mb-30 white-bg radius-g pdb-5 form-ui gray-form">
                    <!-- Title -->
                    <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20">بيانات الحكم والنزيل
                    </h3>
                    <!-- Content -->
                    <div class="widget-content pdx-20">
                        <!-- grid -->
                        <div class="row  gpx-15">
                            <div class="col-12">
                                اسم النزيل
                            </div>
                            <div class="col-12">
                                <div class=" form-group  " style="margin-top: 10px">
                                    <div class="col-3">
                                        <input type="text" class="input_validation" name="first_name" id="first_name"
                                            placeholder="الاسم الأول" value="">
                                    </div>
                                    <div class="col-3">
                                        <input type="text" class="input_validation" name="second_name" id="second_name"
                                            placeholder="الاسم الثاني" value="">
                                    </div>
                                    <div class="col-3">
                                        <input type="text" class="input_validation" name="third_name" id="third_name"
                                            placeholder="الاسم الثالث" value="">
                                    </div>
                                    <div class="col-3">
                                        <input type="text" class="input_validation" name="fourth_name" id="fourth_name"
                                            placeholder="الاسم الرابع" value="">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="row  gpx-15" style="margin-top: 30px">
                            <div class="col-12">
                                مدة المحكومية
                            </div>
                            <div class="col-12" style="margin-top: 10px">
                                <div class=" form-group justify-content-around">
                                    <div class="col-4">
                                        <input type="number" class="input_validation daycalc" name="dayes" id="day"
                                            placeholder="يوم" value="">
                                    </div>
                                    <div class="col-4">
                                        <input type="number" class="input_validation monthcalc" name="month"
                                            id="month" placeholder="شهر" value="">
                                    </div>
                                    <div class="col-4">
                                        <input type="number" class="input_validation" name="year" id="year"
                                            placeholder="سنة" value="">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row  gpx-15" style="margin-top: 30px">
                            <div class="col-12">
                                تاريخ الايقاف
                            </div>
                            <div class="col-12" style="margin-top: 10px">
                                <input type="text" class="date-hijri" name="stop_date" id="stop_date" placeholder=""
                                    value="">
                            </div>
                        </div>

                        <div class="row  gpx-15" style="margin-top: 30px">

                            <label class="checkbox fs-13 pds-15">
                                <input type="checkbox" value="0" data-url="" name="quaran_quarter"
                                    class="check-toggle-both get_prisoner check-toggle-any" date-requered="1">
                                <span>
                                    احتساب عفو حفظ القران الكريم على أساس ربع مدة المحكومية
                                </span>
                            </label>
                        </div>
                        <div class="row  gpx-15" style="margin-bottom: 30px">

                        </div>
                        <!-- // grid -->
                    </div>
                    <!-- // Content -->
                </div>
            </div>


            <!-- Widget Block -->
            <div class="col-6">
                <div class="widget-block mb-30 white-bg radius-g pdb-5 form-ui gray-form">
                    <!-- Title -->
                    <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20">بيانات التخفيض</h3>
                    <!-- Content -->
                    <div class="widget-content pdx-20">
                        <!-- grid -->
                        <div class="row  gpx-15">
                            <div class="col-12">
                                نوع التخفيض
                            </div>
                            <div class="col-12">
                                <select id="select_discounts" name="select_discounts">
                                    <option value="">-- اختيار --</option>
                                    <option value="quran">عفو حفظ القران الكريم</option>
                                    <option value="learn"> عفو التعليم والتدريب </option>
                                    <option value="quarter"> عفو ربع مدة المحكومية </option>
                                </select>
                            </div>

                        </div>
                        <div id="box_dicounts">




                        </div>
                        <div>
                            <button type="button" class="btn small primary hidden btn-show-duration"
                                style="margin-top: 10px">
                                اظهار المدة المستحقة وتاريخ الانتهاء
                            </button>
                        </div>

                        <!-- // grid -->
                    </div>
                    <!-- // Content -->
                </div>
            </div>


            <!-- Widget Block -->
            <div class="col-12">
                <div class="widget-block mb-30 white-bg radius-g pdb-5 form-ui gray-form">
                    <!-- Title -->
                    <h3 class="far fa-angle-up widget-title fs-15 pdx-20 pdy-10 medium-weight mb-20">بيانات الاستحقاق</h3>
                    <!-- Content -->
                    <div class="widget-content pdx-20" id="box_duration_data">

                    </div>
                    <!-- // Content -->
                </div>
            </div>







        </div>
    </form>
@endsection

@section('script')
    <script>
        $(function() {







            $(".btn-show-duration").click(function() {
                var values_data = [];
                var validate = null;
                var values_learn_all = 0;


                var duration = 0;

                $(".borderRed").removeClass("borderRed")

                if (!$("#day").val() && !$("#month").val() && !$("#year").val()) {
                    var validate = true;
                    Phenix(document).notfications({
                        message: 'قم بتسجيل مدة المحكومية',
                        type: 'error',
                        duration: 5000,
                    });

                } else {
                    if ($("#day").val()) {
                        duration += +$("#day").val();
                    }

                    if ($("#month").val()) {
                        duration += +$("#month").val() * 30;
                    }

                    if ($("#year").val()) {
                        duration += +$("#year").val() * 360;
                    }
                }




                $(".input_rows").each(function(key, value) {
                    var type = $(this).data("type");
                    var index = $(this).data("index");

                    if (type == "quaran") {
                        var val_index_type = $("input[name='quaran_" + index + "']").val();

                        if (!val_index_type) {
                            validate = 'قم بكتابة عدد الاجزاء';
                            $("input[name='quaran_" + index + "']").addClass("borderRed")
                            Phenix(document).notfications({
                                message: 'قم بكتابة عدد الاجزاء',
                                type: 'error',
                                duration: 5000,
                            });
                        } else {
                            values_data.push({
                                "quaran": val_index_type
                            })
                        }
                    } else if (type == "learn") {

                        var val_index_type = $("input[name='learn_" + index + "']:checked").val();

                        if (!val_index_type) {
                            validate = 'قم باختيار نسبة  التخفيض  ';

                            Phenix(document).notfications({
                                message: 'قم باختيار نسبة  التخفيض  ',
                                type: 'error',
                                duration: 5000,
                            });
                        } else {
                            values_learn_all += +val_index_type
                            values_data.push({
                                "learn": val_index_type
                            })
                        }
                    } else if (type == "quarter") {
                        values_data.push({
                            "quarter": true
                        })
                    }

                })



                if (values_learn_all > 15) {
                    validate = 'يجب أن لا تتعدى نسبة التخفيض للتعليم والتدريب 15 % ';
                    Phenix(document).notfications({
                        message: 'يجب أن لا تتعدى نسبة التخفيض للتعليم والتدريب 15 % ',
                        type: 'error',
                        duration: 5000,
                    });

                }


                if (!validate) {
                    console.log("success and send request ")
                    var url = window.location.origin + "/calc/discount";
                    $.ajax({
                        url,
                        data: {
                            stop_date: $("#stop_date").val(),
                            quaran_quarter: $("input[name='quaran_quarter']").val(),
                            duration,
                            discounts: values_data
                        },
                        success: function(res) {
                            $("#box_duration_data").html(res)
                        }
                    })


                }


            })

            $(document).on("change click keyup keydown", ".quaran", function() {
                var valus_all = 0;
                $(".quaran").each(function() {

                    valus_all += +$(this).val()
                    console.log(valus_all)
                })


                if (valus_all > 30) {
                    $(".quaran").val(0)
                    Phenix(document).notfications({
                        message: 'أقصى حد  لعدد الاجزاء فى  تخفيض القران الكريم هو 30 جزء ',
                        type: 'error',
                        duration: 5000,
                    });
                }
            })


            $(document).on("click", ".btn_remove", function() {

                if ($(this).hasClass("quarter_remove")) {
                    is_check_quarter = false;
                }
                $("#" + $(this).data("row_id")).remove()
            })

            var first_click = false;
            var index = 0;
            is_check_quarter = false;
            $("#select_discounts").click(function() {

                if (!$("#day").val() && !$("#month").val() && !$("#year").val()) {

                    Phenix(document).notfications({
                        message: 'قم بتسجيل مدة المحكومية',
                        type: 'error',
                        duration: 5000,
                    });

                } else {



                    var duration = 0;
                    if ($("#day").val()) {
                        duration += +$("#day").val();
                    }

                    if ($("#month").val()) {
                        duration += +$("#month").val() * 30;
                    }

                    if ($("#year").val()) {
                        duration += +$("#year").val() * 360;
                    }



                    index++
                    first_click = !first_click
                    if (!first_click) {
                        $(".btn-show-duration").removeClass('hidden')
                        var sel_val = $("#select_discounts").val();
                        if (sel_val == "quran") {
                            if (duration < 90) {

                                Phenix(document).notfications({
                                    message: 'يجب أن لا تقل مدة المحكومية عن 3 أشهر',
                                    type: 'error',
                                    duration: 5000,
                                });
                            } else {
                                $("#box_dicounts").append(`
                            <div id="row_${index+1}" data-type="quaran" data-index="${index}" class="row input_rows  gpx-15" style="margin-top: 30px; border:1px solid rgb(29, 27, 27); padding:10px">
                                <div class="col-12">
                                    <div class="row">
                                            <div class="col-6">عدد الاجزاء</div>
                                            <div class="col-6" style="text-align: end; ">
                                            <span data-row_id="row_${index+1}" class="fas fa-times btn_remove" style=" color: red;padding: 7px;border-radius: 7px;cursor: pointer;"></span>
                                            </div>
                                    </div>
                                </div>
                                <input  type="number" class="not_minus_zero quaran " name="quaran_${index}" placeholder="" value="" style="margin-top: 20px">

                            </div>
                        `)
                            }

                        } else if (sel_val == "learn") {
                            $("#box_dicounts").append(`
                            <div id="row_${index+1}"  data-type="learn" data-index="${index}" class="row  input_rows gpx-15" style="margin-top: 30px ; border:1px solid rgb(29, 27, 27); padding:10px">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-6">نسبة التخفيض</div>
                                        <div class="col-6" style="text-align: end; ">
                                        <span data-row_id="row_${index+1}" class="fas fa-times btn_remove" style="    color: red;padding: 7px;border-radius: 7px;cursor: pointer;"></span>
                                        </div>
                                </div>
                                </div>
                                <div class="col-4" style="margin-top: 10px">
                                    <label class="checkbox fs-13 pds-15">
                                        <input value="5" type="radio" data-url="" name="learn_${index}"   class="check-toggle-both get_prisoner check-toggle-any" date-requered="1">
                                        <span>
                                            5 %
                                        </span>
                                    </label>
                                </div>
                                <div class="col-4" style="margin-top: 10px">
                                    <label class="checkbox fs-13 pds-15">
                                        <input value="10" type="radio" data-url="" name="learn_${index}"  class="check-toggle-both get_prisoner check-toggle-any" date-requered="1">
                                        <span>
                                            10 %
                                        </span>
                                    </label>
                                </div>
                                <div class="col-4" style="margin-top: 10px">
                                    <label class="checkbox fs-13 pds-15">
                                        <input value="15" type="radio" data-url="" name="learn_${index}"  class="check-toggle-both get_prisoner check-toggle-any" date-requered="1">
                                        <span>
                                            15 %
                                        </span>
                                    </label>
                                </div>
                            </div>
                        `)
                        } else if (sel_val == "quarter") {

                            if (is_check_quarter) {
                                Phenix(document).notfications({
                                    message: 'لايمكن اختيار عفو ربع مدة المحكومية أكثر من مرة',
                                    type: 'error',
                                    duration: 5000,
                                });

                            } else {

                                var max_duration = 9 * 30;
                                if (duration < max_duration) {
                                    Phenix(document).notfications({
                                        message: 'يجب أن لا تقل مدة المحكومية عن 9 أشهر',
                                        type: 'error',
                                        duration: 5000,
                                    });

                                } else {
                                    is_check_quarter = true;
                                    $("#box_dicounts").append(`
                                <div  id="row_${index+1}" data-type="quarter" data-index="${index}"   class="row input_rows  gpx-15" style="margin-top: 30px; border:1px solid rgb(29, 27, 27); padding:10px">
                                    <div class="col-12">
                                           <div class="row">
                                                <div class="col-6">عفو ربع مدة المحكومية</div>
                                                <div class="col-6" style="text-align: end; ">
                                                  <span data-row_id="row_${index+1}" class="fas fa-times btn_remove quarter_remove" style=" color: red;padding: 7px;border-radius: 7px;cursor: pointer;"></span>
                                                </div>
                                           </div>
                                    </div>

                                </div>`)
                                }


                            }

                        }
                    }
                }



            })
        })
    </script>
@endsection