@extends('layouts.contentLayoutMaster')

@php
    $breadcrumbs = [[['link' => route('applications.index'), 'name' => "الطلبات"],['name'=> 'طلبات الألتحاق']],['title'=> 'ادارة الطلبات']];
@endphp

@section('title', 'طلبات الألتحاق')
@section('vendor-style')
    <!-- vendor css files -->
    <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')) }}">
    <link rel="stylesheet" href="{{ asset('css/custom/login.css') }}">

@endsection


@section('content')

    <x-forms.search route="applications.index">
        <div class="row mb-1">
            <div class="col-md">
                <x-inputs.text.Input :required="false" icon="search" label="اليحث" name="search" placeholder="يمكنك البحث عن اسم او رقم جوال او هوية ويمكن البحث بالكود عن طريق اضافة = قبل لكمة البحث" />
            </div>
            <div class="col-md">
                <x-inputs.select.generic :required="false" label="السنة الدراسية" name="academic_year_id" data-placeholder="السنة الدراسية" :options="['' => 'جميع السنوات'] + App\Models\AcademicYear::years()" onchange="toggleSearchInputs()"/>
            </div>
        </div>
        <div id="search-inputs">
            <div class="row mb-1">
                <div class="col-md">
                    <x-inputs.select.generic :required="false" select2="" label="المدرسة" onLoad="{{ request('school_id') ? null : 'change'}}" name="school_id" data-placeholder="اختر المدرسة" data-msg="رجاء اختيار المدرسة" :options="['' => 'اختر المدرسة'] +schools()" />
                </div>

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

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

                <div class="col-md">
                    <x-inputs.select.generic :required="false" select2="" label="الصف الدراسي" name="level_id" data-placeholder="اختر الصف الدراسي" data-msg="رجاء اختيار الصف الدراسي" :options="request('grade_id') ?  ['' => 'اختر الصف'] + App\Models\Level::levels(true,request('grade_id')) : []" />
                </div>
            </div>
        </div>
        <div class="row mb-1">
            <div class="col-md">
                <x-inputs.select.generic label="حالة الطلب" name="status_id" data-placeholder="اختر حالة الطلب" :options="['all' => 'جميع الطلبات'] + App\Models\ApplicationStatus::Statuses()" />
            </div>
            <div class="col-md">
                <x-inputs.text.Input class="flatpickr-basic" icon="calendar" :required="false" label="تاريخ من :" name="date_from" placeholder="yyyy-mm-dd" />
            </div>
            <div class="col-md">
                <x-inputs.text.Input class="flatpickr-basic" icon="calendar" :required="false" label="تاريخ الي :" name="date_to" placeholder="yyyy-mm-dd" />
            </div>
        </div>

        <div class="row mb-1">
            <div class="col-md">
                <label class="form-label">خدمة النقل </label>
                <x-inputs.checkbox :required="false" name="transportation">يرغب في خدمة النقل</x-inputs.checkbox>
            </div>
        </div>

        <x-slot name="export">
            <div class="btn-group">
                <button class="btn btn-outline-secondary waves-effect" name="action" type="submit" value="export_xlsx"><em data-feather='save'></em> اكسل</button>
                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split waves-effect" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="visually-hidden"></span>
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <button class="dropdown-item" style="width: 100%;" name="action" type="submit" value="export_pdf"><em data-feather='save'></em> PDF</button>
                </div>
            </div>
        </x-slot>

    </x-forms.search>

    <!-- Striped rows start -->
    <x-ui.table>
        <x-slot name="title">طلبات الألتحاق بالمدرسة @if(request('myapplications')) <span class="text-danger">(المقدمة من حسابي)</span> @endif</x-slot>
        <x-slot name="cardbody">قائمة الطلبات المقدمة من اولياء الأمور .. {{$applications->count()}} طلب</x-slot>

        <x-slot name="thead">
            <tr>
                <th scope="col">الاجراءات</th>
                <th scope="col">كود</th>
                <th scope="col">الاسم</th>
                <th scope="col">رقم الجوال
                <th scope="col">رقم الهوية</th>
                <th scope="col">الصف</th>
                <th scope="col">العام</th>
                <th scope="col">النقل</th>
                <th scope="col">حالة الطلب</th>
                <th scope="col">مجموعة الطلب</th>
                @can('accounts-list')
                    <th scope="col">السداد</th>
                @endcan
                <th scope="col"> تم الاضافة بواسطة</th>
            <th scope="col">اخر تحديث بواسطة</th>
                <th scope="col">اخر تعديل</th>
            </tr>
        </x-slot>

        <x-slot name="tbody">
            @foreach ($applications as $key => $application)
                <td>

                    @can('applications-list')
                        <x-inputs.btn.generic icon="book-open" data-bs-original-title="سجل الطلب" colorClass="primary" route="{{ route('applications.logs',$application->id) }}" />
                        <x-inputs.btn.view route="{{ route('applications.show',$application->id) }}" />
                    @endcan

                    @can('applications-edit')
                        @if($application->status_id == 1 || $application->status_id == 2)
                            <x-inputs.btn.edit :route="route('applications.edit',$application->id)" />
                        @endif
                        @switch($application->status_id)
                            {{--بانتظار المقابلة--}}
                            @case(1)
                            <x-inputs.btn.generic icon="message-circle" colorClass="warning" data-id="{{ $application->appointment_id }}" onClick="GetMettingInfo(this)" data-bs-original-title="تفاصيل المقابلة" />

                            <x-inputs.btn.generic icon="message-circle" colorClass="secondary" data-id="{{ $application->appointment_id }}, {{ $application->id }}" onClick="updateMettingresult(this)" data-bs-original-title="نتيجة المقابلة" />
                            @break
                            {{--قائمة الانتظار--}}
                            @case(2)
                            <x-inputs.btn.generic icon="message-circle" colorClass="warning" data-id="{{ $application->appointment_id }}" onClick="GetMettingInfo(this)" data-bs-original-title="تفاصيل المقابلة" />
                            <x-inputs.btn.generic icon="message-circle" colorClass="secondary" data-id="{{ $application->appointment_id }}, {{ $application->id }}" onClick="updateMettingresult(this)" data-bs-original-title="نتيجة المقابلة" />
                            @break
                            {{--بانتظار سداد المصروفات بالكامل--}}


                            @case(3)
                            @can('account-paymentAttempts')
                            <x-inputs.btn.generic colorClass="primary btn-icon round" :route="route('applications.transactions.index', ['application' => $application->id])" icon="dollar-sign" title="سداد المصروفات بالكامل"/>
                                @endcan
                            {{--            <x-inputs.btn.generic icon="link" colorClass="warning" data-id="{{ $application->id }}" onClick="ChangeStatus(this)" data-bs-original-title="قبول نهائي " data-changeTo="confirm" />--}}
                            @break
                            {{--بانتظار سداد دفعة فصل دراسي--}}*
                            @case(4)
                                @can('account-paymentAttempts')
                            <x-inputs.btn.generic colorClass="primary btn-icon round" :route="route('applications.transactions.index', ['application' => $application->id])"  icon="dollar-sign" title="سداد دفعة فصل دراسي"/>
                                @endcan
                            {{--                <x-inputs.btn.generic icon="link" colorClass="warning" data-id="{{ $application->id }}" onClick="ChangeStatus(this)" data-bs-original-title="قبول نهائي " data-changeTo="confirm" />--}}
                            @break
                            {{--بانتظار سداد دفعة التعاقد--}}
                            @case(5)
                                @can('account-paymentAttempts')
                                <x-inputs.btn.generic colorClass="primary btn-icon round" :route="route('applications.transactions.index', ['application' => $application->id])"  icon="dollar-sign" title="سداد دفعة التعاقد"/>
                                @endcan
                            @break



                            @case(6)
                                <x-inputs.btn.generic icon="message-circle" colorClass="secondary" data-id="{{ $application->id }}" onClick="verifyApplicationOTP(this)" data-bs-original-title="تأكيد الطلب الخاص" />
                            @break
                            @case(7)

                            @break
                            {{-- مرفوض --}}
                            {{--            @case(9)--}}
                            {{--            <x-inputs.btn.generic icon="book-open" colorClass="warning" data-id="{{ $application->id }}" onClick="ChangeStatus(this)" data-bs-original-title="اعادة فتح الطلب" data-changeTo="reopen" />--}}

                            {{--            @break--}}
                        @endswitch
                    @endcan
                    @can('applications-edit')
                        @if($application->status_id == 3 || $application->status_id == 4 || $application->status_id == 5)
                            <x-inputs.btn.cancel :route="route('applications.cancel.ClassReservation',$application->id)" />
                        @endif
                    @endcan

                </td>
                <th>{{ $application->id }}</th>
                <td>@if(!$application->contract) {{ $application->student_name }} @else <a href="{{ route('students.index',http_build_query(['search'=> $application->national_id, 'academic_year_id' => $application->academic_year_id])) }}">{{ $application->student_name }}</a> @endif</td>
                <td>{{ $application->phone }}</td>
                <td>{{ $application->national_id }}</td>
                <td><abbr title="{{ sprintf('%s - %s - %s - %s',$application->school_name , $application->gender_name, $application->grade_name, $application->level_name) }}">{{ $application->level_name }}</abbr></td>
                <td>{{ $application->year_name }}</td>
                <td>{{ $application->transportation_type ?? 'لا يرغب' }}</td>
                <td><span class="badge bg-{{$application->color}}">{{ $application->status_name }}</span></td>
                <td>{{$application->group_name}}</td>
                @can('accounts-list')
                    @if($application->contract && $application->contract->total_paid > 0)
                        <td><span class="badge bg-success">{{ $application->contract->total_paid  }} ر.س</span></td>
                    @else
                        <td><span class="badge bg-danger">لم يسدد</span></td>
                    @endif
                @endcan
{{--                <td><abbr title="{{ $application->sales_id }}">{{ $application->salse_admin_name }}</abbr></td>--}}
                <td><abbr title="{{ $application->created_by }}">{{ $application->created_by_name }}</abbr></td>
                <td><abbr title="{{ $application->updated_by }}">{{ $application->updated_by_name }}</abbr></td>
                <td><abbr title="{{ $application->created_at->format('Y-m-d H:m:s') }}">{{ $application->updated_at->format('Y-m-d H:m:s') }}</abbr></td>

                </tr>
                @endforeach
                </tbody>
        </x-slot>

        <x-slot name="pagination">
            {{ $applications->appends(request()->except('page'))->links() }}
        </x-slot>
    </x-ui.table>
    <x-ui.SideDeletePopUp />
    <x-ui.SideCancelPopUp />

    <!-- Striped rows end -->
@endsection

@section('page-modal')
    <div class="offcanvas offcanvas-width-30 offcanvas-start" tabindex="-1" id="meetingModal" tabindex="-1" aria-labelledby="meetingModalLabel" aria-hidden="true">

    </div>

    <div class="offcanvas offcanvas-width-30 offcanvas-start" tabindex="-1" id="verifyApplicationModal" tabindex="-1" aria-labelledby="verifyApplicationModelLabel" aria-hidden="true">

    </div>
@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>
@endsection

@section('page-script')

    <script>
        toggleSearchInputs();

        function toggleSearchInputs() {
            input = document.getElementById('academic_year_id')
            let div = document.getElementById('search-inputs');
            div.style = !input.value ? 'pointer-events: none;opacity: 0.4;' : '';
        }



        // Get the select menus
        const academicYearSelect = document.getElementById('academic_year_id');
        const levelSelect = document.getElementById('level_id');

        // Add change event listener to academic year select menu
        academicYearSelect.addEventListener('change', function() {
            // Get the selected option value
            const selectedValue = academicYearSelect.value;
            // Set the value as a data attribute to the level select menu
            levelSelect.setAttribute('data-academic_year_id', selectedValue);

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


        function optFunction(application_id){
            $(".sessionMessage").css("display","none");
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "/admin_dashboard/special-group-verify-code",
                method: 'post',
                data: {
                    "application_id": application_id,
                    "code": $("#opt1").val() + $("#opt2").val() + $("#opt3").val() + $("#opt4").val()
                },
                success: function (response){
                    console.log(response);
                    if(response.code == 402){
                        $(".errorMessage").css("display","flex");
                        $('.errorMessageBody').text(response.message);
                        $('.errorBody').text(response.error);
                        // $(".otpCodeInteract").css("display","none");
                    }else if(response.code == 200){
                       alert(response.message)
                        window.location.reload();
                    }
                }
            });
        }

        function resendOtp(application_id){
            $(".sessionMessage").css("display","none");
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "/admin_dashboard/resend-special-group-verify-code",
                method: 'post',
                data: {
                    "application_id": application_id
                },
                success: function (response){
                    console.log(response);
                    if(response.code == 401){
                        $(".errorMessage").css("display","flex");
                        $('.errorMessageBody').text(response.message);
                        $('.errorBody').text(response.error);
                        $(".otpCodeInteract").css("display","none");
                    }else if(response.code == 200){
                        alert(response.message)

                    }
                }
            });
        }




        var interval;
        function countdown() {
            clearInterval(interval);
            interval = setInterval( function() {
                var timer = $('.js-timeout').html();
                timer = timer.split(':');
                var minutes = timer[0];
                var seconds = timer[1];
                seconds -= 1;
                if (minutes < 0) return;
                else if (seconds < 0 && minutes != 0) {
                    minutes -= 1;
                    seconds = 59;
                }
                else if (seconds < 10 && length.seconds != 2) seconds = '0' + seconds;

                $('.js-timeout').html(minutes + ':' + seconds);

                if (minutes == 0 && seconds == 0){
                    clearInterval(interval);
                    $('.customBtn').css("display","none");
                    $('.resend').css("display","inline-block");
                    $("#opt1").val('');
                    $("#opt2").val('');
                    $("#opt3").val('');
                    $("#opt4").val('');
                };
            }, 1000);
        }

        let digitValidate = function digitValidate(ele){
            ele.value = ele.value.replace(/[^0-9]/g,'');
        }

        let isValidPhoneLength =false;
        let isValidPasswordLength =false;
        let isValidPhone = function isValidPhone(ele){
            isValidPhoneLength = ele.value.trim().length >= 9;
            canEnableBtn();
        }
        let isValidPassword = function isValidPassword(ele){
            isValidPasswordLength = ele.value.trim().length >= 8;
            canEnableBtn();
        }
        let canEnableBtn = function canEnableBtn(){
            if (isValidPasswordLength && isValidPhoneLength) {
                $('.btn-submit').removeClass("disabled");
            }else{
                if(!$(".btn-submit").hasClass("disabled")){
                    $('.btn-submit').addClass("disabled");
                }
            }
        }

        var tabChange = function(val){
            let ele = document.querySelectorAll('input.otp');
            if(ele[val-1].value != ''){
                if (val == 4){
                    return;
                }
                ele[val].focus()
            }else if(ele[val-1].value == ''){
                ele[val-2].focus()
            }
        }
    </script>
@endsection