@extends('layouts.contentLayoutMaster')
@php
$breadcrumbs = [[['link' => route('postpone-payment-applications.index'), 'name' => "الطلبات"],['name'=> ' طلبات تأجيل سداد']],['title' => 'اضافة طلب تأجيل سداد']];
@endphp

@section('title', 'تسجيل طلب تأجيل سداد')

@section('vendor-style')
<link rel="stylesheet" href="{{asset(mix('vendors/css/forms/select/select2.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/katex.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/monokai-sublime.min.css'))}}">
<link rel="stylesheet" href="{{asset(mix('vendors/css/editors/quill/quill.snow.css'))}}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
@endsection

@section('page-style')
<!-- Page css files -->
{{-- Page Css files --}}
<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/form-validation.css')) }}">
@endsection

@section('content')

@component('components.forms.formCard',['title' => sprintf('تسجيل طلب تأجيل سداد')])

{{ Form::open(['route' => 'postpone-payment-applications.store','method'=> 'POST' , 'class' => 'row','id' => 'adminform' , 'onsubmit' => 'showLoader()']) }}
<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 mb-1">
        <x-inputs.select.generic :required="true" select2="" label="نوع الطلب" onLoad="{{ request('postpone_payment_type_id') ? null : 'change'}}" id="postpone_payment_type_id" name="postpone_payment_type_id" data-placeholder="اختر نوع الطلب" data-msg="رجاء اختيار نوع الطلب" :options="['' => 'اختر نوع الطلب'] +App\Models\PostponePaymentType::postponePaymentTypes()" />
    </div>

    <div class="col-md">
        <x-inputs.select.generic disabled="disabled" label="ولي الأمر" 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>

<!-- selectorContainer -->
<div class="row mb-1" id="selectorContainer" style="display:none">
</div>

<!-- transactionsContainer -->
<div class="row mb-1" id="transactionsContainer" style="display:none">
</div>


<x-ui.divider>معلومات طلب التأجيل</x-ui.divider>

<div class="row mb-1">

    <div class="col-md">
        <x-inputs.select.generic :required="true" select2="" label="الكفيل" onLoad="{{ request('sponsor_id') ? null : 'change'}}" name="sponsor_id" data-placeholder="اختر الكفيل" data-msg="رجاء اختيار الكفيل" :options="['' => 'اختر الكفيل'] +App\Models\Sponsor::getSponsors()" />
    </div>

    <div class="col-md">
        <x-inputs.select.generic :required="true" select2="" label="نوع التأجيل" onLoad="{{ request('postpone_amount_type') ? null : 'change'}}" name="postpone_amount_type" data-placeholder="اختر نوع التأجيل" data-msg="رجاء اختيار نوع التأجيل" :options="['' => 'اختر نوع التأجيل'] +App\Models\PostponePaymentApplication::postponeAmountTypes()" />
    </div>

</div>

<div class="row mb-1">
    <div class="col-md">
        <x-inputs.number.Input min="1" label="المبلغ المؤجل" name="postpone_amount" data-msg="' بشكل صحيح" />
    </div>
    <div class="col-md">
        <x-inputs.text.Input class="flatpickr-basic" icon="calendar" :required="true" label="تاريخ التأجيل :هو التاريج المراد التأجيل للسداد فيه" data-msg="اختار تاريج تأجيل السداد" name="postpone_date_to" placeholder="yyyy-mm-dd" />
    </div>
</div>

<div class="col-12 text-center mt-2">
    <x-inputs.submit>تسجيل طلب الأنسحاب</x-inputs.submit>
    <x-inputs.link route="postpone-payment-applications.index">عودة</x-inputs.link>
</div>

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

@endcomponent

@endsection

@section('vendor-script')
<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/validation/jquery.validate.min.js')) }}"></script>
<script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection

@section('page-script')
<script src="{{ asset(mix('js/scripts/forms/pickers/form-pickers.js')) }}"></script>
<script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>

<script>
    // variables
    var postpone_type_id = '';

    // functions
    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>"
        );

        $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 + ')';
    }

    const resetTemplatAtSelectorChaned = (selectorId = '') => {
        const typeId = '#postpone_payment_type_id';
        const guardianId = '#guardian_id';
        const studentId = '#student_id';
        const applicationId = '#application_id';



        switch (selectorId) {
            case typeId:
                $(guardianId).val('');
                $('#select2-guardian_id-container').html('ابحث عن ولي الأمر بواسطة رقم الهوية او رقم الجوال');

                $('#user_info').css('display', 'none');
                $('#selectorContainer').css('display', 'none'); // #student_id | #application_id
                $('#transactionsContainer').css('display', 'none');

                break;

            case guardianId:
                $('#user_info').css('display', 'none');
                $('#selectorContainer').css('display', 'none'); // #student_id | #application_id
                $('#transactionsContainer').css('display', 'none');
                break;

            case studentId | applicationId:
                $('#transactionsContainer').css('display', 'none');
                break;

            default:
                break;
        }

    };

    const renderTransactions = (transactionList = []) => {
        let templateContainerId = '#transactionsContainer';

        let options = '';
        transactionList.forEach((transaction) => {
            options += `<option value="${transaction.id}" >${transaction.installment_name}</option>`;
        });

        let transactionTemp1 = `
                <div class="col-12 mb-1">
                <label for="transaction_id" class="form-label">الدفعات</label>
                <select class="form-select" required="" select2_transaction_id="" onload="change"
                id="transaction_id" data-placeholder="ابحث عن دفعه" data-msg="رجاء اختر دفعه"
                name="postpone_transaction">
                <option value="" selected="selected">اختر دفعه</option>
                ${options}
                </select>
                </div>
                <div class="col-12 mb-1">
                    <div class="row mb-1" id="transaction_info" style="display: none;">

                    </div>
                </div>


                `;

        $(templateContainerId).css('display', 'flex').html('');
        $(templateContainerId).css('display', 'flex').html(transactionTemp1);


        // Get the select element
        const selectElement = $('#transaction_id');
        selectElement.on('change', function() {
            const selectedOptionVal = selectElement.val();
            $('#transaction_info').css('display', 'none').html('');
            console.log(selectedOptionVal);
            if (selectedOptionVal) {
                const result = transactionList.find(obj => obj.id == selectedOptionVal);
                console.log(result);

                let transInfContent = `
                            <div class="col-lg-3 col-md-6">
                                 <label for="full_name" class="form-label">اسم الدفعه</label>
                                 <input class="form-control" disabled="" value="${result.installment_name}" type="text">
                            </div>
                            <div class="col-lg-3 col-md-6">
                                 <label for="full_name" class="form-label">الكود</label>
                                 <input class="form-control" disabled="" value="${result.id}" type="text">
                            </div>
                            <div class="col-lg-3 col-md-6">
                                 <label for="full_name" class="form-label">المدفوع</label>
                                 <input class="form-control" disabled="" value="${result.paid_amount}" type="text">
                            </div>
                            <div class="col-lg-3 col-md-6">
                                 <label for="full_name" class="form-label">المتبقي</label>
                                 <input class="form-control" disabled="" value="${result.residual_amount}" type="text">
                            </div>

                        `;

                $('#transaction_info').css('display', 'flex').html('');
                $('#transaction_info').html(transInfContent);
            }


        });
    };

    $(document).ready(function() {


        $('select[name="postpone_payment_type_id"]').on('change', function() {

            resetTemplatAtSelectorChaned('#postpone_payment_type_id');
            postpone_type_id = $(this).val();


            if (postpone_type_id) {
                $('select[name="guardian_id"]').prop('disabled', false);
            } else {
                $('select[name="guardian_id"]').prop('disabled', true).val('');
            }
        });

        $("#guardian_id").on('select2:select', function(e) {

            resetTemplatAtSelectorChaned('#guardian_id');
            var user = e.params.data;
            var postponeTypeId = $("#postpone_payment_type_id").val();
            var guardianId = $("#guardian_id").val();

            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)

            let studentList = []; // Initialize studentList as an empty array

            $.ajax({
                url: "/admin_dashboard/json/postpone_parent_data",
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Include the CSRF token in the headers
                },
                data: {
                    postpone_type_id: postponeTypeId,
                    guardian_id: guardianId,
                },
                success: function(response) {
                    let data = response.data;
                    let studentList = response.data.data;
                    let templateContainerId = '#selectorContainer';

                    if (data.is_student) {

                        let options = '';
                        studentList.forEach((student) => {
                            options += `<option value="${student.id}">${student.student_name}</option>`;
                        });

                        let studentTemp1 = `
                            <div class="col-md mb-1">
                            <label for="student_id" class="form-label">الأبناء</label>
                            <select class="form-select" required="" select2_student_id="" onload="change"
                                id="student_id" data-placeholder="ابحث عن ابن" data-msg="رجاء اختر ابن"
                                name="student_id">
                                <option value="" selected="selected">اختر ابن</option>
                                ${options}
                            </select>
                            </div>`;

                        $(templateContainerId).css('display', 'flex').html('');
                        $(templateContainerId).css('display', 'flex').html(studentTemp1);

                        // Get the select element
                        const selectElement = $('#student_id');

                        // Add an event listener for the 'change' event
                        selectElement.on('change', function() {

                            resetTemplatAtSelectorChaned('#student_id');
                            // Get the selected option value
                            const selectedOption = selectElement.val();

                            $.ajax({
                                url: "/admin_dashboard/json/postpone_transaction_data",
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Include the CSRF token in the headers
                                },
                                data: {
                                    postpone_type_id: postponeTypeId,
                                    student_id: selectedOption,
                                },
                                success: function(data) {
                                    let transactionList = data.data.transactions;
                                    renderTransactions(transactionList);
                                },
                                error: function(error) {
                                    // Handle any errors that occur during the AJAX request
                                    console.error(error);
                                }
                            });
                        });


                    } else {

                        let applicationList = response.data.data;

                        let options = '';
                        applicationList.forEach((application) => {
                            options += `<option value="${application.id}">${application.student_name}</option>`;
                        });

                        let applicationTemp1 = `
                    <div class="col-md mb-1">
                    <label for="application_id" class="form-label">الطلبات</label>
                    <select class="form-select" required="" select2_application_id="" onload="change"
                        id="application_id" data-placeholder="ابحث عن طلب" data-msg="رجاء اختر طلب"
                        name="application_id">
                        <option value="" selected="selected">اختر طلب</option>
                        ${options}
                    </select>
                    </div>`;


                        $(templateContainerId).css('display', 'flex').html('');
                        $(templateContainerId).css('display', 'flex').html(applicationTemp1);

                        // Get the select element
                        const selectElement = $('#application_id');

                        // Add an event listener for the 'change' event
                        selectElement.on('change', function() {

                            resetTemplatAtSelectorChaned('#student_id');
                            // Get the selected option value
                            const selectedOption = selectElement.val();

                            $.ajax({
                                url: "/admin_dashboard/json/postpone_transaction_data",
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Include the CSRF token in the headers
                                },
                                data: {
                                    postpone_type_id: postponeTypeId,
                                    application_id: selectedOption,
                                },
                                success: function(data) {
                                    let transactionList = data.data.transactions;
                                    renderTransactions(transactionList);
                                },
                                error: function(error) {
                                    // Handle any errors that occur during the AJAX request
                                    console.error(error);
                                }
                            });
                        });

                    }

                },
                error: function(xhr, status, error) {
                    // Handle any errors that occurred during the request
                    console.error(error);
                }
            });



        });

        $("#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) {
                    return {
                        results: data.data.users,
                    };
                },
                cache: true
            },
            placeholder: 'ابحث عن ولي الأمر بواسطة رقم الهوية او رقم الجوال',
            minimumInputLength: 3,
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });


        $("#submit_btn").on("click", function() {
            $(this).prop("disabled", true);
            $('#adminform').submit();
        });


    });
</script>
@endsection