@extends('layouts.contentLayoutMaster')

@php
$breadcrumbs = [[['link' => route('students.index'), 'name' => "الطلاب الغير مجددين "],['name'=> 'ادارة الطلاب' ]],['title'=> 'ادارة الطلاب']];
@endphp

@section('title', 'الطلاب الغير مجددين')

@section('vendor-style')
<!-- Vendor css files -->
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/buttons.bootstrap5.min.css')) }}">
<link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
<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 -->
<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')

<x-forms.search route="students-without-contract.index">
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.text.Input :required="false" icon="search" label="اليحث" name="search" placeholder="يمكنك البحث عن اسم او رقم جوال او هوية ويمكن البحث بالكود عن طريق اضافة = قبل لكمة البحث" />
        </div>
    </div>

    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.select.generic :required="false" label="جنسية الطالب" name="nationality_id" data-placeholder="اختر جنسية الطالب" :options="['' => 'جميع الجنسيات'] + App\Models\nationality::nationalities()" />
        </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>

    <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" 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(! is_null($year))<span class="text-danger"> للعام الدراسي({{ $year->year_name }})</span>@endif</x-slot>
    <x-slot name="cardbody">
        <div class="">
            <div class="justify-content-start">
                قائمة الطلاب الغير مجددين علي العام الحالي .. {{ sprintf('معروض %s طالب من اصل %s طالب مسجل بالنظام مطابق لمعطيات البحث ',$students->count(),$students->total()) }}
            </div>
        </div>

    </x-slot>

    <x-slot name="thead">
        <tr>
            <th scope="col">الاجراءات</th>
            <th scope="col">كود طلب المتابعة</th>
            <th scope="col">حالة الطلب</th>
            <th scope="col">تم الاسناد بواسطة</th>
            <th scope="col">تاريخ الاسناد</th>
            <th scope="col">كود الطالب</th>
            <th scope="col">اسم الطالب</th>
            <th scope="col">النوع</th>
            <th scope="col">رقم الهوية</th>
            <th scope="col">اسم ولي الامر</th>
            <th scope="col">رقم هوية ولي الامر</th>
            <th scope="col">رقم الجوال</th>
            <th scope="col">الجنسية</th>
            <th scope="col">الصف</th>
            <th scope="col">سنة اخر تعاقد </th>
        </tr>
    </x-slot>

    <x-slot name="tbody">
        @foreach ($students as $student)
            <th scope="row">
                @can('students-without-contract-edit')
                    <x-inputs.btn.edit :route="route('students-without-contract.edit',$student->follow_up_request_id)" />
                @endcan
            </th>
            <th scope="row"> {{ $student->follow_up_request_id }} </th>
            <th scope="row"> <span class="badge bg-{{\App\Models\FollowUpRequest::$colors[$student->follow_up_request_status]}}">{{ \App\Models\FollowUpRequest::getFollowUpStatus()[$student->follow_up_request_status] }} </span></th>
            <th scope="row"> {{ $student->follow_up_request_created_by }} </th>
            <th scope="row"> {{ $student->follow_up_request_created_at }} </th>
        <td>{{$student->id}}</td>
        <td><abbr title="{{$student->student_name_en}}">{{ $student->student_name }}</abbr></td>
        <td>{{ $student->gender ? 'ذكر' : 'انثي' }}</td>
            <td>{{ $student->national_id }}</td>
            <td>{{ $student->parent_name }}</td>
        <td>{{ $student->guardian_national_id }}</td>
        <td>{{ $student->phone }}</td>
        <td>{{ $student->nationality_name }}</td>
        <td>{{ $student->level_name }}</td>
        <td>{{ $student->year_name }}</td>
        </tr>
        @endforeach
        </tbody>
    </x-slot>

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

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

@section('page-modal')
<div class="offcanvas offcanvas-start" id="Assign1AdminModal" aria-labelledby="AssignAdminModalLabel">
    <div class="offcanvas-header">
        <h5 id="AssignAdminModalLabel" class="offcanvas-title">اسناد طلب متابعة للطلاب</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body my-auto mx-0 flex-grow-0">
        <div class="text-center mb-2 text-danger">
            <me data-feather="user-plus" class="font-large-3"></me>
        </div>
        {!! Form::open(['route' => 'students-without-contract.assign','method'=>'POST' , 'onsubmit' => 'showLoader()'])  !!}

        <input type="hidden" name="selected_ids" id="selected-ids">

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


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

            <div class="col-12">
                <x-inputs.text.Input label="رقم الجوال" name="phone" :disabled="true" data-msg="' بشكل صحيح" />
            </div>
        </div>
        <button type="submit" class="btn btn-danger mb-1 d-grid w-100">تأكيد</button>
        {!! Form::close() !!}
        <button type="button" class="btn btn-outline-secondary d-grid w-100" data-bs-dismiss="offcanvas">
            تراجع
        </button>
    </div>
</div>
<style>
    .select2-container {
        z-index: 9999999; /* or any higher value as needed */
    }
</style>

@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/form-select2.js')) }}"></script>
<script>
    $(document).ready(function() {
        // Handle "Select All" checkbox
        $("#select-all").click(function () {
            $(".row-checkbox").prop('checked', this.checked);
            updateAssignButtonState();
        });

        // Handle individual row checkboxes
        $(".row-checkbox").click(function () {
            updateAssignButtonState();
        });

        function updateAssignButtonState() {
            var anyChecked = $(".row-checkbox:checked").length > 0;
            $("#assign-button").prop('disabled', !anyChecked);
        }

        // When the "assign" button is clicked
        $("#assign-button").click(function () {
            // Get the selected row IDs
            var selectedIds = [];
            $(".row-checkbox:checked").each(function() {
                selectedIds.push($(this).val());
            });

            // Update the hidden input field with the selected IDs
            $("#selected-ids").val(selectedIds.join(','));

            // Open the modal
            $('#Assign1AdminModal').offcanvas('show');
        });
    });


    $("#user_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('user_info').style.display = 'flex';
    });

    $("#user_id").select2({
        dropdownParent: $('#Assign1AdminModal'),
        minimumInputLength: 3,
        ajax: {
            url: "/admin_dashboard/json/search_employees",
            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: 'ابحث عن الموظف بواسطة الكود او رقم الجوال',
        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__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 + ')';
    }




    toggleSearchInputs();
    var AssignAdminModal = document.getElementById('Assign1AdminModal')
    AssignAdminModal.addEventListener('show.bs.offcanvas', function(event) {
        // Button that triggered the modal
        var button = event.relatedTarget

        // Extract info from data-bs-* attributes
        var user_id = button.getAttribute('data-bs-user_id')
        var user_name = button.getAttribute('data-bs-user_name')

        // Update the modal's content.
        var modalTitle = AssignAdminModal.querySelector('#slot')
        var user_id_input = AssignAdminModal.querySelector('#Assign1AdminModal')

    })

    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>
@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/extensions/sweetalert2.all.min.js')) }}"></script>

@endsection
@section('page-script')
<!-- Page js files -->

<script src="{{ asset(mix('js/scripts/forms/pickers/form-pickers.js')) }}"></script>
<script src="{{asset('js/scripts/components/components-dropdowns.js')}}"></script>

@endsection