@extends('layouts.contentLayoutMaster')

@php
$breadcrumbs = [[['link' => route('coupons.index'), 'name' => "قسائم الخصم"],['link' => route('coupons.create'), 'name' => "اضافة قسيمة" ]],['title'=> 'اضافة قسيمة']];
@endphp

@section('title', 'اضافة قسيمة خصم ')

@section('vendor-style')
<!-- vendor css files -->
<link rel="stylesheet" href="{{asset(mix('vendors/css/forms/select/select2.min.css'))}}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/pickadate/pickadate.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
@endsection

@section('page-style')
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/pickers/form-flat-pickr.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/pickers/form-pickadate.css')) }}">
@endsection


@section('content')

    @component('components.ui.validationErrors')
    @endcomponent
@component('components.forms.formCard',['title' =>' اضافة قسيمة خصم' ])



{!! Form::open(['route' => 'coupons.store','method'=>'POST' , 'onsubmit' => 'showLoader()']) !!}


<div class="row mb-1 ">
    <div class="col-md">
        <x-inputs.select.generic select2="" label="العام الدراسي" name="academic_year_id" data-placeholder="اختر العام الدراسي" data-msg="رجاء اختيار العام الدراسي" :required :options="['' => 'اختر العام الدراسي'] + App\Models\AcademicYear::years()" onchange="get_CouponClassification()" />
    </div>
    <div class="col-md">
            <span id="special_span" style="display:none;" data-bs-toggle="tooltip" class="text-danger" data-bs-placement="top" title="لن يتم خصم قيمة القسيمة من الحد الأقصي للخصومات طبقا لأعدادات النظام">
                <em data-feather="info"></em></span>
        <x-inputs.select.generic :required="false" select2="" :required label="نوع القسيمة" name="classification_id" data-placeholder="اختر نوع القسيمة" data-msg="رجاء اختيار نوع القسيمة" :options="old('classification_id') ? ['' => 'قسائم عامة'] + getCouponClassification(old('academic_year_id')) : []" onchange="get_discount_values()" />
    </div>
</div>

<div class="row mb-1" id="#classifications_dev">
    <div class="row mb-1 ">
        <div class="col-md">
            <label for="academic_year_id" class="form-label">خصومات القسائم</label>
            <span id="total_discount_span" class="badge bg-primary"></span>
            <div class="progress progress-bar-primary mt-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated" id="total_discount" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
            </div>
        </div>

        <div class="col-md">
            <label for="academic_year_id" class="form-label">قسائم صالحة</label>
            <span id="unused_discount_span" class="badge bg-warning"></span>
            <div class="progress progress-bar-warning mt-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated" id="unused_discount" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
            </div>
        </div>

        <div class="col-md">
            <label for="academic_year_id" class="form-label">الخصومات المستخدمة</label>
            <span id="used_discount_span" class="badge bg-danger"></span>
            <div class="progress progress-bar-danger mt-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated" id="used_discount" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
            </div>
        </div>

        <div class="col-md">
            <label for="academic_year_id" class="form-label">الخصومات المتاحة</label>
            <span id="remain_discount_span" class="badge bg-success"></span>
            <div class="progress progress-bar-success mt-1">
                <div class="progress-bar progress-bar-striped progress-bar-animated" id="remain_discount" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
            </div>
        </div>
    </div>
</div>


<div class="row mb-2">
    <div class="col-12">
        <div class="  mt-1">
            <input id="dev1Checkbox" class="form-check-input me-1" name="parent_flag" type="checkbox">
            <label class="form-check-label mr-1" for="dev1Checkbox"> تخصيص القسيمة لولي امر </label>
        </div>
    </div>
    <div class="col-12">
        <div class="  mt-1">
            <input id="dev2Checkbox" class="form-check-input me-1" name="level_flag" type="checkbox">
            <label class="form-check-label mr-1" for="dev2Checkbox"> تخصيص القسيمة لصف دراسي </label>
        </div>
    </div>
</div>

<div class="" id="levelContainer">
    <x-ui.divider>معلومات الصف</x-ui.divider>

        <div class="row mb-1" id="selection">
            <div class="col-md">
                <x-inputs.select.generic select2="" :required="false" label="المدرسة" name="school_id" data-placeholder="اختر المدرسة" data-msg="رجاء اختيار المدرسة" :options="['' => 'اختر المدرسة'] + schools()" />
            </div>

            <div class="col-md">
                <x-inputs.select.generic select2="" :required="false" label="القسم" name="gender_id" data-placeholder="اختر القسم" data-msg="رجاء اختيار القسم" :options="old('school_id')  ? App\Models\Gender::genders(true,old('school_id') ) : []" />
            </div>

            <div class="col-md">
                <x-inputs.select.generic select2="" :required="false" label="المسار" name="grade_id" data-placeholder="اختر المسار" data-msg="رجاء اختيار المسار" :options="old('gender_id')  ? App\Models\Grade::grades(true,old('gender_id') ) : []" />
            </div>

            <div class="col-md">
                <x-inputs.select.generic select2="" :required="false" label="الصف الدراسي" name="level_id" data-placeholder="اختر الصف الدراسي" data-msg="رجاء اختيار الصف الدراسي" :options="old('grade_id') ?  ['' => 'اختر الصف'] + App\Models\Level::levels(true,old('grade_id')) : []" onchange="get_discount_values()" />
            </div>
        </div>

    <div class="" id="level_flags"></div>
</div>
<div id="parentContainer">
    <x-ui.divider>معلومات ولي الأمر</x-ui.divider>
    @php
        if(old('guardian_id')) {
        $guardian = App\Models\User::where('id', old('guardian_id'))->get()->pluck('first_name','id');
        }
    @endphp
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.select.generic label="ولي الأمر" :required="false" name="guardian_id" data-placeholder="ابحث عن ولي الأمر" data-msg="رجاء ولي الأمر" :options="$guardian ?? []" />
        </div>
    </div>

    <div class="row mb-1" id="user_info" style="display: none;">
        <div class="col-md">
            <x-inputs.text.Input label="اسم ولي الأمر" name="full_name" :disabled="true" placeholder="ادخل اسم ولي الأمر" data-msg="'اسم ولي الأمر بشكل صحيح" />
        </div>

        <div class="col-md">
            <x-inputs.text.Input label="رقم الجوال" name="phone" :disabled="true" data-msg="' بشكل صحيح" />
        </div>

        <div class="col-md">
            <x-inputs.text.Input label="رقم الهوية" name="user_national_id" :disabled="true" data-msg="' بشكل صحيح" />
        </div>

        <div class="col-md">
            <x-inputs.text.Input label="الفئة" name="category" :disabled="true" data-msg="' بشكل صحيح" />
        </div>
    </div>

    <div id="parent_check_boxes">

    </div>

    <div id="parent_data_dev">
        <div id="parent_students_data" style="display: none">

        </div>
        <div id="parent_applications_data" style="display: none">

        </div>
    </div>

</div>





    <x-ui.divider>معلومات القسيمة</x-ui.divider>

        <div class="row mb-1">
            <div class="col-md">
                <x-inputs.text.Input :required="false" label="رمز القسيمة (اختياري)"  onchange="toUpperCase(this)" class="only-english" icon="file-text" name="code" placeholder="في حالة ترك الخانة فارغة .. سيتم توليد رمز القسيمة تلقائيا" data-msg="ارمز القسيمة بشكل صحيح" />
            </div>
            <div class="col-md">
                <x-inputs.text.Input type="number" min="0" label="قيمة الخصم" icon="file-text" name="coupon_value" placeholder="ادخل قيمة الخصم" data-msg="رجاء ادخال قيمة االخصم بشكل صحيح" />
            </div>
        </div>


        <div class="row mb-1">
            <div class="col-md">
                <x-inputs.text.Input label="متاح ابتداء من" class="form-control flatpickr-basic" icon="calendar" name="available_at" placeholder="ادخل متاح ابتداء من" />

            </div>

            <div class="col-md">
                <x-inputs.text.Input label="تاريخ الانتهاء" class="form-control flatpickr-basic" icon="calendar" name="expire_at" placeholder="ادخل تاريخ الانتهاء" />

            </div>
        </div>




        <div class="row mb-1">
            <div class="col-md">
                <label class="form-label mb-1" for="active"> الحالة </label>
                <x-inputs.checkbox name="active">مفعل</x-inputs.checkbox>
            </div>
        </div>

        <div class="col-12 text-center mt-2">
            <x-inputs.submit id="AddCouponSubmitButtonId">اضافة القسيمة </x-inputs.submit>
            <x-inputs.link route="coupons.index">عودة</x-inputs.link>
        </div>

        {!! Form::close() !!}

        @endcomponent

        @endsection

        @section('vendor-script')
        <!-- vendor files -->
        <script src="{{ asset(mix('vendors/js/pickers/pickadate/picker.js')) }}"></script>
        <script src="{{ asset(mix('vendors/js/pickers/pickadate/picker.date.js')) }}"></script>
        <script src="{{ asset(mix('vendors/js/pickers/pickadate/picker.time.js')) }}"></script>
        <script src="{{ asset(mix('vendors/js/pickers/pickadate/legacy.js')) }}"></script>
        <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
            <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
        @endsection
        @section('page-script')
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function () {
                const dev1Checkbox = document.getElementById('dev1Checkbox');
                const dev2Checkbox = document.getElementById('dev2Checkbox');
                const levelContainer = document.getElementById('levelContainer');
                const parentContainer = document.getElementById('parentContainer');

                // Hide the containers on page load
                levelContainer.style.display = 'none';
                parentContainer.style.display = 'none';

                // Add event listeners to the checkboxes
                dev1Checkbox.addEventListener('change', function () {
                    // Toggle the visibility of the parentContainer
                    parentContainer.style.display = this.checked ? 'block' : 'none';

                    // If dev1Checkbox is checked, hide the levelContainer
                    if (this.checked) {
                        levelContainer.style.display = 'none';
                        // You can also reset the dev2Checkbox if needed
                        dev2Checkbox.checked = false;
                    }
                });

                dev2Checkbox.addEventListener('change', function () {
                    // Toggle the visibility of the levelContainer
                    levelContainer.style.display = this.checked ? 'block' : 'none';

                    // If dev2Checkbox is checked, hide the parentContainer
                    if (this.checked) {
                        parentContainer.style.display = 'none';
                        // You can also reset the dev1Checkbox if needed
                        dev1Checkbox.checked = false;
                    }
                });

                // Add the event listener to the parent container for checkboxes
                document.getElementById('parent_check_boxes').addEventListener('change', function (event) {
                    const dev3Checkbox = document.getElementById('dev3Checkbox');
                    const dev4Checkbox = document.getElementById('dev4Checkbox');
                    // const parent_data_dev = document.getElementById('parent_applications_data');
                    const parent_students_data = document.getElementById('parent_students_data');
                    const parent_applications_data = document.getElementById('parent_applications_data');
                    // Hide the containers on page load
                    parent_students_data.style.display = 'none';
                    parent_applications_data.style.display = 'none';

                    if (event.target.type === 'checkbox') {
                        // Handle the event here
                        const checkboxId = event.target.id;
                        const isChecked = event.target.checked;

                        // Perform actions based on the checkbox state
                        if (checkboxId === 'dev3Checkbox') {
                            // Toggle the visibility of the parentContainer
                            parent_students_data.style.display = checkboxId ? 'block' : 'none';
                            // If dev3Checkbox is checked, hide the parent_applications_data
                            if (isChecked) {
                                parent_applications_data.style.display = 'none';
                                // You can also reset the dev4Checkbox if needed
                                dev4Checkbox.checked = false;
                            }
                        } else if (checkboxId === 'dev4Checkbox') {
                            // Toggle the visibility of the parent_applications_data
                            parent_applications_data.style.display = checkboxId ? 'block' : 'none';

                            // If dev4Checkbox is checked, hide the parent_students_data
                            if (isChecked) {
                                parent_students_data.style.display = 'none';
                                // You can also reset the dev3Checkbox if needed
                                dev3Checkbox.checked = false;
                            }
                        }
                    }
                });

            });

        </script>
        <script type="text/javascript">
            get_discount_values();

            $("#guardian_id").on('select2:select', function(e) {
                var user = e.params.data;
                document.getElementById('full_name').value = user.full_name;
                document.getElementById('phone').value = user.phone;
                document.getElementById('category').value = user.category_name;
                document.getElementById('user_national_id').value = user.national_id;
                document.getElementById('user_info').style.display = 'flex';
                get_parent_data(user.id);

                document.getElementById('parent_check_boxes').innerHTML = '<div class="row mb-2">'+
                    '<div class="col-12">' +
                    '<div class="mt-1">' +
                    '<input id="dev3Checkbox" class="form-check-input me-1" name="student_flag" type="checkbox">'+
                    '<label class="form-check-label mr-1" for="dev3Checkbox"> تخصيص لاحد ابناء لولي الامر </label>'+

                    '</div>'+
                    '</div>'+

                    '<div class="col-12">' +
                    '<div class="mt-1">' +
                    '<input id="dev4Checkbox" class="form-check-input me-1" name="application_flag" type="checkbox">'+
                    '<label class="form-check-label mr-1" for="dev4Checkbox"> تخصيص لطلب التحاق </label>'+
                    '</div>'+
                    '</div>' +
                    '</div>';

            });

            $("#guardian_id").select2({
                ajax: {
                    url: "/admin_dashboard/json/search_users",
                    method: "post",
                    delay: 500,
                    data: function(params) {
                        return {
                            q: params.term, // search term
                            _token: document.getElementsByName('_token')[0].value
                        };
                    },
                    processResults: function(data, params) {
                        // parse the results into the format expected by Select2
                        // since we are using custom formatting functions we do not need to
                        // alter the remote JSON data, except to indicate that infinite
                        // scrolling can be used

                        return {
                            results: data.data.users,
                        };
                    },
                    cache: true
                },
                placeholder: 'ابحث عن ولي الأمر بواسطة رقم الهوية او رقم الجوال',
                minimumInputLength: 3,
                templateResult: formatRepo,
                templateSelection: formatRepoSelection
            });

            function formatRepo(repo) {
                if (repo.loading) {
                    return " ...جاري البحث في قاعدة البيانات";
                }
                var $container = $(
                    "<div class='select2-result-users clearfix'>" +
                    "<div class='select2-result-users__meta'>" +
                    "<div class='select2-result-users__title'></div>" +
                    "<div class='select2-result-users__national_id'></div>" +
                    "<div class='select2-result-users__phone'></div>" +
                    "</div>" +
                    "</div>" +
                    "<div class='parent_check_boxis'>" +
                    "</div>"
                );
                $container.find(".select2-result-users__title").html('<span class="text-danger">الاسم : </span>' + repo.full_name + '</span>');
                $container.find(".select2-result-users__national_id").html('<span class="text-danger">الهوية : </span>' + repo.national_id + '</span>');
                $container.find(".select2-result-users__phone").html('<span class="text-danger">الجوال : </span>' + repo.phone + '</span>');
                return $container;
            }

            function formatRepoSelection(repo) {
                if (repo.id === '') {
                    return 'اختر ولي الأمر';
                }
                if (repo.full_name == undefined) {
                    return repo.text
                }
                return repo.full_name + ' - (' + repo.phone + ')';
            }

            function get_parent_data(guardian_id) {
                const parentDataElement = document.getElementById('parent_data_dev');
                parentDataElement.style.display = 'none';
                const url = `/admin_dashboard/json/parent_data`;
                const data = {
                    guardian_id: guardian_id
                };
                const headers = new Headers();
                headers.append('Content-Type', 'application/json');
                headers.append('X-CSRF-TOKEN', '{{ csrf_token() }}');
                fetch(url, {
                    method: 'POST',
                    body: JSON.stringify(data),
                    headers: headers,
                })
                    .then(response => response.json())
                    .then(data => {
                        renderParentData(data)
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }

            function renderParentData(data) {
                const parentDataElement = document.getElementById('parent_data_dev');
                parentDataElement.style.display = 'block'
                const parent_students = document.getElementById('parent_students_data')
                const parent_applications = document.getElementById('parent_applications_data')
                parent_students.innerHTML = '';
                parent_applications.innerHTML= '';
                parent_students.style.display = 'none'
                parent_applications.style.display= 'none';

                students = data.data.students;
                applications = data.data.applications;


                const selectElement = document.createElement('select');
                selectElement.classList.add('form-select');
                selectElement.setAttribute('name', 'student_id');
                selectElement.setAttribute('aria-label', 'Default select example');
                if (students.length === 0) {
                    const placeholderOption = document.createElement('option');
                    placeholderOption.textContent = 'لا يوجد طلاب';
                    placeholderOption.value = '';
                    placeholderOption.setAttribute('selected', true);
                    selectElement.appendChild(placeholderOption);
                } else {
                    const defaultOption = document.createElement('option');
                    defaultOption.value = ''; // Set an empty value
                    defaultOption.textContent = 'حدد الطالب';
                    defaultOption.setAttribute('selected', true);
                    selectElement.appendChild(defaultOption);
                }
                students.forEach((student) => {
                    const optionElement = document.createElement('option');
                    optionElement.value = student.id;
                    optionElement.textContent = `${student.student_name} - (${student.national_id})`;
                    selectElement.appendChild(optionElement);
                });
                parent_students.innerHTML = '';
                parent_students.appendChild(selectElement);
                const checkboxRow = document.createElement('div');
                // checkboxRow.classList.add('form-check', 'form-check-inline');
                checkboxRow.classList.add('row', 'm-2');
                // Adding event listener for selectElement change
                selectElement.addEventListener('change', function () {
                    const selectedStudentId = selectElement.value;
                    // Clear existing checkboxes
                    checkboxRow.innerHTML = '<label>يمكن الدفع علي : </label>';
                    if (selectedStudentId !== '') {
                        // Create and add the checkboxes
                        const checkboxes = [
                            { label: 'مديونية', name: 'debt_flag' },
                            { label: 'تعاقد', name: 'contract_flag' },
                            { label: 'تجديد تعاقد', name: 'transfer_request_flag' }
                        ];
                        checkboxes.forEach((checkbox) => {
                            const colDiv = document.createElement('div');
                            colDiv.classList.add('col-4'); // Add Bootstrap class for column width

                            const checkboxInput = document.createElement('input');
                            checkboxInput.id = checkbox.name;
                            checkboxInput.classList.add('form-check-input', 'me-1');
                            checkboxInput.name = checkbox.name;
                            checkboxInput.type = 'checkbox';
                            const checkboxLabel = document.createElement('label');
                            checkboxLabel.classList.add('form-check-label', 'mr-1');
                            checkboxLabel.setAttribute('for', checkbox.name);
                            checkboxLabel.textContent = checkbox.label;
                            colDiv.appendChild(checkboxInput);
                            colDiv.appendChild(checkboxLabel);
                            checkboxRow.appendChild(colDiv);
                        });
                    }
                });
                // Append the checkbox row to the parent_students element
                parent_students.appendChild(checkboxRow);


                //application select menu
                const selectElementApplication = document.createElement('select');
                selectElementApplication.classList.add('form-select');
                selectElementApplication.setAttribute('aria-label', 'Default select example');
                if (students.length === 0) {
                    const placeholderOption1 = document.createElement('option');
                    placeholderOption1.textContent = 'لا يوجد طلبات إلتحاق';
                    placeholderOption1.value = '';
                    placeholderOption1.setAttribute('selected', true);
                    selectElementApplication.appendChild(placeholderOption1);
                } else {
                    const defaultOption1 = document.createElement('option');
                    defaultOption1.value = ''; // Set an empty value
                    defaultOption1.textContent = 'حدد طلب الالتحاق';
                    defaultOption1.setAttribute('selected', true);
                    selectElementApplication.appendChild(defaultOption1);
                }
                applications.forEach((application) => {
                    const optionElement1 = document.createElement('option');
                    optionElement1.value = application.id;
                    optionElement1.textContent = `${application.student_name} - (${application.id})`;
                    selectElementApplication.appendChild(optionElement1);
                });
                parent_applications.innerHTML = '';
                parent_applications.appendChild(selectElementApplication);
            }

            function validateCheckboxes() {
                return dev1Checkbox.checked || dev2Checkbox.checked;
            }

            document.getElementById('AddCouponSubmitButtonId').addEventListener('click', function (event) {
                if (!validateCheckboxes()) {
                    event.preventDefault();
                    alert("من فضلك اختر تخصيص القيمة لصف دراسي ام لولي امر !");
                }
            });


        </script>
        <!-- Page js files -->
        <script src="{{ asset(mix('js/scripts/forms/pickers/form-pickers.js')) }}"></script>
        @endsection