@extends('layouts.contentLayoutMaster')

@php
$breadcrumbs = [[['link' => route('cancel-contracts.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')) }}">
@endsection


@section('content')

    <x-forms.search route="cancel-contracts.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 id="search-inputs">
            <div class="row mb-1">
                <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 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" name="level_id" data-open_year="false" data-academic_year_id="{{request('academic_year_id') ?? null}}" id="level_id" label="الصف" select2="" :options="request('grade_id') ?  ['' => 'اختر الصف'] + App\Models\Level::levels(true,request('grade_id'),request('academic_year_id')) : []" />--}}
{{--                </div>--}}
            </div>

            <div class="row mb-1">
                <div class="col-md">
                    <x-inputs.text.Input class="flatpickr-basic" icon="calendar" :required="false" label="تاريخ الإلغاء تعاقد" name="withdrawal_date" placeholder="yyyy-mm-dd" />
                </div>

                <div class="col-md-3">
                    <x-inputs.select.generic :required="false" label="حالة الطلب" name="application_status" :options="['' => 'جميع الطلبات'] + App\Models\CancelContractApplication::getCancelContractStatus()  " />
                </div>
                <div class="col-md-3">
                    <x-inputs.select.generic :required="false" label="سبب الإلغاء تعاقد" name="reason" data-placeholder="ابحث عن سبب الإلغاء تعاقد" data-msg="رجاءاختيار سبب الإلغاء تعاقد" :options=" ['' => 'جميع الاسباب'] + App\Models\CancelContractApplication::getCancelContractReasons() " />
                </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" style="width: 100%;" name="action" type="submit" value="export_pdf"><em data-feather='save'></em> PDF</button>
                </div>
            </div>
        </x-slot>


    </x-forms.search>

    <div class="message alert mb-1 rounded-0" role="alert" style="display: none">
        <div class="messageBody alert-body"></div>
    </div>
    <div class="alert alert-warning mb-1 rounded-0" role="alert">
        <div class="alert-body" style="font-weight: bold">  لا يمكن مسح طلب إلغاء التعاقد بعد تاكيد الطلب ولا يمكن استرجاع الدفعات المحذوفه من التعاقد</div>
    </div>

<!-- Striped rows start -->
<x-ui.table>
    <x-slot name="title">طلبات إلغاء التعاقد بالمدرسة </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>
            <th scope="col">تمت الاضافة بواسطة</th>
            <th scope="col">اخر تحديث بواسطة</th>
            <th scope="col">الاجراءات</th>
        </tr>
    </x-slot>

    <x-slot name="tbody">
        @foreach ($cancelContractApplications as $application)
            <th scope="row">
                {{ $application->id }}
            </th>

            <td>{{ $application->student_name }}</td>
            <td>{{ $application->national_id }}</td>
            <td>{{ $application->date }}</td>
            <td>{{ $application->level_name }}</td>
            <td>{{ $application->year_name }}</td>
            <td>
                <span class="badge bg-{{\App\Models\CancelContractApplication::$colors[$application->application_status]}}">
                    {{\App\Models\CancelContractApplication::getCancelContractStatus()[$application->application_status]}}
                </span>
            </td>
                <td style="max-width:70px; white-space: pre-line;">
                        {{$application->discount_details?? '-'}}
                </td>
            <td style="max-width:70px; white-space: pre-line;">{{ $application->reason }}</td>
            <td>{{ $application->comment }}</td>
            <td>{{ $application->school_name }}</td>
            <td>{{ $application->transportation_fees? ($application->amount_fees - $application->transportation_fees) : $application->amount_fees }}</td>
            <td>{{ $application->transportation_fees?? '-' }}</td>
            <td>{{ $application->amount_fees}}</td>
            <td>{{ $application->amount_fees-$application->contract_total_paid}}</td>
            <td>{{ $application->created_by_name}}</td>
            <td>{{ $application->updated_by_name}}</td>
            <td>
                @can('cancel-contract-applications-list')
                    <x-inputs.btn.generic icon="book-open" data-bs-original-title="سجل الطلب" colorClass="primary" route="{{ route('cancel-contracts.logs',$application->id) }}" />
                    <x-inputs.btn.view route="{{ route('cancel-contracts.show',$application->id) }}" />
                @endcan

                @can('cancel-contract-applications-edit')
                    @if($application->application_status == 0)
                        <a class="btn btn-icon round btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="right" onclick="openConfirmModel({{$application->id}},1, {{$application->trans_id??null}})" title="إلغاء الطلب">
                            <em data-feather="x"></em>
                        </a>
                        <a class="btn btn-icon round btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="right" onclick="openConfirmModel({{$application->id}},2, {{$application->trans_id??null}})" title="إلغاء الطلب مقابل خصم">
                            <em data-feather="percent"></em>
                        </a>
                        <a class="btn btn-icon round btn-sm btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="right" onclick="openConfirmModel({{$application->id}},3, {{$application->trans_id??null}})" title="قبول الطلب">
                            <em data-feather="check"></em>
                        </a>
                    @endif
                        @if($application->application_status == 4)
                            @can('accounts-list')
                                <x-inputs.btn.generic colorClass="primary btn-icon round" icon="dollar-sign" :route="route('cancel-contracts.contracts.transactions.index', ['cancel_contract'=>$application->id,'contract'=>$application->contract_id])" title="الدفعات"/>
                            @endcan
                        @endif
                    @endcan
                    <p id="demo"></p>

            </td>

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

<!-- Striped rows end -->
@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')
<!-- Page js files -->
<script src="{{ asset(mix('js/scripts/forms/pickers/form-pickers.js')) }}"></script>

    <script>
        function openConfirmModel(app_id,application_status, e=null) {
            if(e && application_status === 3){
                let fees = prompt("ادخل قيمة رسوم النقل... علما بان الضفط علي زر ok سوف يتم اضافة رسوم النقل الي الطلب");
                if (fees != null) {
                    showLoader(10000)
                    $.ajax(
                        {
                            type: "GET",
                            url: "cancel-contracts/" + app_id + "/edit?",
                            data: {
                                "fees": fees,
                                "application_status":application_status
                            },
                            success: function(response)
                            {
                                hideLoader()
                                console.log(response)
                                if(response.code == 200){
                                    $(".message").css("display","block");
                                    $('.message').removeClass("alert-danger");
                                    $('.message').removeClass("alert-success");
                                    $('.message').addClass("alert-success");
                                    $('.messageBody').text(response.message);
                                    window.setTimeout(function(){
                                        location.reload()
                                    }, 2000);
                                }else{
                                    hideLoader()
                                    $(".message").css("display","block");
                                    $('.message').removeClass("alert-success");
                                    $('.message').removeClass("alert-danger");
                                    $('.message').addClass("alert-danger");
                                    $('.messageBody').text(response.message);
                                }
                            }
                        }
                    );
                }
            }else{
                let message = '';
                let discount_details = '';
                if (application_status === 1)
                    message = "هل انت متاكد من إلغاء الطلب";
                else if(application_status === 2){
                    message = "هل انت متاكد من إلغاء الطلب مقابل خصم";
                    discount_details = prompt("ادخل تفاصيل الخصم مقابل الالغاء");
                }
                else if(application_status === 3)
                    message = "هل انت متاكد من قبول طلب إلغاء التعاقد";
                let conformInput = confirm(message)
                if(conformInput){
                    showLoader(10000)
                    $.ajax(
                        {
                            type: "GET",
                            url: "cancel-contracts/" + app_id + "/edit?",
                            data: {
                                "fees": null,
                                "discount_details": discount_details,
                                "application_status":application_status
                            },
                            success: function(response)
                            {
                                hideLoader()
                                if(response.code == 200){
                                    $(".message").css("display","block");
                                    $('.message').removeClass("alert-danger");
                                    $('.message').removeClass("alert-success");
                                    $('.message').addClass("alert-success");
                                    $('.messageBody').text(response.message);
                                    window.setTimeout(function(){
                                        location.reload()
                                    }, 2000);
                                }else{
                                    hideLoader()
                                    $(".message").css("display","block");
                                    $('.message').removeClass("alert-success");
                                    $('.message').removeClass("alert-danger");
                                    $('.message').addClass("alert-danger");
                                    $('.messageBody').text(response.message);
                                }
                            }
                        }
                    );
                }
            }
        }

        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('page-script')
<script type="text/javascript">

</script>
@endsection