@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')) }}">
@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')
    @if(!isset($students))
        <div class="message alert mb-1 rounded-0" role="alert">
            <div class="messageBody alert-body alert-danger">{{$message}}</div>
        </div>
    @endif
<x-forms.search route="students.contractWithSemester">
    <div class="row mb-1">
        <div class="col-md">
            <x-inputs.select.generic :required="false" label="السنة الدراسية" id="academic_year_id" name="academic_year_id" data-placeholder="السنة الدراسية" :options="['' => 'جميع السنوات'] + App\Models\AcademicYear::years()" onchange="toggleSearchInputs()" />
        </div>
        <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" label="الخطه الدراسيه" name="plan_id" data-placeholder="اختر الفصل الدراسي" :options="['' => 'جميع الخطط الدراسيه'] + App\Models\Plan::plans()" />
        </div>
    </div>

    <div id="search-inputs">
        <div class="row mb-1">

            <div class="col-md">
                <x-inputs.select.generic :required="false" label="الفصول الدراسيه" id="applied_semesters" name="applied_semesters" data-placeholder="اختر الفصل الدراسي" :options="['' => 'جميع الفصول الدراسيه']" onchange="toggleSearchInputs()" />
            </div>
            <div class="col-md">
                <x-inputs.select.generic :required="false" label="حاله الدفع" name="payment_status" data-placeholder="اختر حاله الدفع" :options="['' => 'جميع الحالات', '0' => 'مكتمل', '1' => 'غير مكتمل']" onchange="toggleSearchInputs()" />
            </div>

            <div class="col-md">
                <x-inputs.select.generic :required="false" label="المبلغ" name="operator" data-placeholder="اختر العلامه" :options="['' => '', '>=' => 'اكبر من', '<=' => 'اصغر من', '=' => 'يساوي']" onchange="toggleSearchInputs()" />
            </div>

            <div class="col-md">
                <x-inputs.text.Input :required="false" label="اكتب المبلغ" name="payment_amount" placeholder="ادخل المبلغ" />
            </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">قائمة الطلاب المسجلين بالمدرسة .. {{ sprintf('معروض %s طالب من اصل %s طالب مسجل بالنظام مطابق لمعطيات البحث ',isset($students)?$students->count():0,isset($students)?$students->total():0) }}</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>
            @if(request('academic_year_id'))
            <th scope="col">حالة الطالب</th>
            @can('accounts-list')
            <th scope="col">الخطة</th>
            <th scope="col">السداد</th>
            @endcan
            <th scope="col">الصف</th>
            <th scope="col">النتيجة</th>
            <th scope="col">حالة التعاقد</th>
            <th scope="col">مقدم الطلب</th>
            @endif
            <th scope="col">الرعاية</th>
            <th scope="col">مزامنة نور</th>
            <th scope="col">مزامنة odoo</th>
            <th scope="col">اخطاء مزامنة odoo</th>
            <th scope="col">اخر تعديل</th>
        </tr>
    </x-slot>

    <x-slot name="tbody">
        @if(isset($students))
            @foreach ($students as $student)
                <td>
                    @can('students-list')
                        <x-inputs.btn.view :route="route('students.show', [$student->id])" />
                    @endcan

                    @can('students-edit')
                        <x-inputs.btn.edit :route="route('students.edit', [$student->id])" />
                    @endcan

                    @can('accounts-list')
                        <x-inputs.btn.generic colorClass="warning btn-icon round" icon="list" :route="route('students.contracts.index', [$student->id])" title="قائمة التعاقدات" />
                    @endcan

                    @if($student->contract_id)
                        @can('accounts-list')
                            <x-inputs.btn.generic colorClass="primary btn-icon round" icon="dollar-sign" :route="route('students.contracts.transactions.index', [$student->id,$student->contract_id])" title="تفاصيل تعاقد عام {{$year->year_name}}" />
                        @endcan
                    @endif
                    @if($student->odoo_sync_status == 0)
                        @can('accounts-list')
                            <x-inputs.btn.generic colorClass="primary btn-icon round" icon="repeat" :route="route('students.resendToOdoo', ['id' => $student->id])" title="مزامنه حسابات odoo" />
                        @endcan
                    @endif
                </td>

                <th scope="row"> {{ $student->id }} </th>
                <td><abbr title="{{$student->student_name_en}}">{{ $student->student_name }}</abbr></td>
                <td>{{ $student->gender ? 'ذكر' : 'انثي' }}</td>
                <td>{{ $student->national_id }}</td>
                <td>{{ $student->nationality_name }}</td>
                <td><span class="badge bg-{{$student->color }}">{{ $student->category_name }}</span></td>
                @if($student->contract_id)
                    <td>{!! $student->contract->getStudentStatus($student->graduated) !!}</td>
                    @can('accounts-list')
                        <td>{{ $student->plan_name }}</td>
                        <td>{!! $student->contract->GetContractSpan() !!}</td>
                    @endcan
                    <td><abbr title="{{ sprintf('%s - %s - %s - %s',$student->school_name , $student->gender_name, $student->grade_name, $student->level_name) }}">{{ $student->level_name }}</abbr></td>
                    <td>{!! $student->contract->getExamResult() !!}</td>
                    <td>{!! $student->contract->getStatus() !!}</td>
                    <td>{{ $student->sales_admin_name }}</td>
                @endif
                <td>{{ $student->student_care ? 'نعم' : 'لا' }}</td>
                <td>@if(null !== $student->last_noor_sync) <abbr title="{{ $student->last_noor_sync }}"><em data-feather='check-circle' class="text-success"></em></abbr>@else <em class="text-danger" data-feather='x-circle'></em> @endif</td>
                <td>@if($student->odoo_sync_status) <abbr title="{{ $student->odoo_sync_status }}"><em data-feather='check-circle' class="text-success"></em></abbr>@else <em class="text-danger" data-feather='x-circle'></em> @endif</td>
                <td>{{ !$student->odoo_sync_status? $student->odoo_message : 'لا يوجد'}}</td>
                <td><abbr title="{{ $student->created_at->format('Y-m-d h:m:s') }}">{{ $student->updated_at->format('Y-m-d h:m:s') }}</abbr></td>
                </tr>
                @endforeach
                </tbody>
        @endif

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

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

@section('page-modal')
<div class="offcanvas offcanvas-start" tabindex="-1" id="AssignAdminModal" 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>
        <h3 class="text-center text-dark" id="slot">
            جاري تحميل المعلومات
        </h3>
        {!! Form::open(['route' => 'admins.assignAdminRole','method'=>'POST' , 'onsubmit' => 'showLoader()']) !!}

        <input type="hidden" name="user_id" id="user_id">

        <div class="col-lg mb-1">
            <x-inputs.text.Input label="المسمي الوظيفي" icon="user" name="job_title" placeholder="ادخل المسمي الوظيفي" data-msg="ادخل المسمي الوظيفي بشكل صحيح" />
        </div>

        <div class="col-lg mb-1">
            <x-inputs.select.generic label="الدور الأداري" name="roles[]" data-placeholder="اختر الدور الأداري" data-msg="رجاء اختيار الدور الأجاري" :options="Spatie\Permission\Models\Role::pluck('display_name', 'name')->toArray()" multiple />
        </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>

@endsection

@section('page-script')
<script>
    $(document).ready(function() {
        let current_academic_year = $("#academic_year_id").val();
        $("#payment_status").empty();
        $("#payment_status").append('<option value="" selected>جميع الحالات</option>');
        $("#payment_status").append('<option value="0"> مكتمل</option>');
        $("#payment_status").append('<option value="1"> غير مكتمل</option>');
            get_semesters(current_academic_year);
        // Bind change event handler to academic_year_id
        $("#academic_year_id").change(function() {
            var selectedValue = $(this).val();
            get_semesters(selectedValue);
        });


    });
    function get_semesters(year) {
        let applied_semesters = $("#applied_semesters");
        let paymentStatus = document.getElementById('payment_status');
        if (year) {
            $.ajax({
                url: '/admin_dashboard/setting/getSemestersByYear/' + year,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    applied_semesters.empty();
                    applied_semesters.append('<option value="">-- كل الفصول الدراسية --</option>');
                    $.each(data.data, function(key, value) {
                        applied_semesters.append('<option value="' + value.id + '">' + value.text + '</option>');
                    });
                }
            });
        } else {
            applied_semesters.empty();
            applied_semesters.append('<option value="">-- كل الفصول الدراسية --</option>');
        }
    }
    toggleSearchInputs();
    var AssignAdminModal = document.getElementById('AssignAdminModal')
    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('#AssignAdminModal #user_id')

        modalTitle.textContent = 'تعيين ولي الامر : ' + user_name + ' #(' + user_id + ') - كمدير'
        user_id_input.value = user_id
    })

    function toggleSearchInputs() {
        input = document.getElementById('academic_year_id');
        var semester = document.getElementById('applied_semesters');
        var operator = document.getElementById('operator');

        let school = document.getElementById('school_id');
        let gender = document.getElementById('gender_id');

        let paymentStatus = document.getElementById('payment_status');
        let amount = document.getElementById('payment_amount');

        paymentStatus.style = !semester.value ? 'pointer-events: none;opacity: 0.4;' : '';
        amount.style = !operator.value ? 'pointer-events: none;opacity: 0.4;' : '';
        school.style = !input.value ? 'pointer-events: none;opacity: 0.4;' : '';
        gender.style = !input.value ? 'pointer-events: none;opacity: 0.4;' : '';

    }
</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