@extends('layouts.contentLayoutMaster')

@php
$breadcrumbs = [[['link' => route('withdrawals.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="withdrawals.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.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\WithdrawalApplication::getWithdrawalStatus()  " />
                </div>
                <div class="col-md-3">
                    <x-inputs.select.generic :required="false" label="سبب الانسحاب" name="reason" data-placeholder="ابحث عن سبب الانسحاب" data-msg="رجاءاختيار سبب الانسحاب" :options=" ['' => 'جميع الاسباب'] + App\Models\WithdrawalApplication::getWithdrawalReasons() " />
                </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>
        </tr>
    </x-slot>

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

            <td>{{ $application->student_name }}</td>
            <td>{{ $application->national_id }}</td>
            <td>{{ $application->date }}</td>
            <td>
                <span class="badge bg-{{\App\Models\WithdrawalApplication::$colors[$application->application_status]}}">
                    {{\App\Models\WithdrawalApplication::getWithdrawalStatus()[$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->amount_fees}}</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('withdrawals.logs',$application->id) }}" />
                    <x-inputs.btn.view route="{{ route('withdrawals.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)" 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)" 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)" 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('withdrawals.transactions.index', ['withdrawal'=>$application->id])" title="الدفعات"/>
                        @endcan
                    @endif

                        @if($application->application_status == 5)
                            @can('accounts-list')
                                <x-inputs.btn.generic colorClass="secondary btn-icon round" icon="file" :route="route('withdrawals.exportFinancialClearance', ['withdrawal'=>$application->id])" title="استخراج المخالصة"/>
                            @endcan
                        @endif
                @endcan
                <p id="demo"></p>

            </td>


            </tr>
        @endforeach
        </tbody>
    </x-slot>
    <x-slot name="pagination">
        {{ $withdrawalApplications->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) {
                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){
                    $.ajax(
                        {
                            type: "GET",
                            url: "withdrawals/" + app_id + "/edit?",
                            data: {
                                "discount_details": discount_details,
                                "application_status":application_status
                            },
                            success: function(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{
                                    $(".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