@extends('layouts.contentLayoutMaster')

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


@section('content')

    <x-forms.search route="postpone-payment-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>
        <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>

<!-- 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>
        </tr>
    </x-slot>

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

            <td>{{ $row->type_name }}</td>
            <td>{{ $row->postpone_date_to }}</td>
            <td>{{ $row->guardian_name }}</td>
{{--            <td>{{$row->statusent_name?? '-'}}</td>--}}
{{--            <td >{{ $row->level }}</td>--}}
            <td>{{ $row->sponsor_name}}</td>
            <td>{{ \App\Models\Sponsor::SPONSOR_TYPE[$row->sponsor_type] }}</td>
            <td>{{ $row->postpone_amount }}</td>
            <td>{{ \App\Models\PostponePaymentApplication::postponeAmountTypes()[$row->postpone_amount_type]}}</td>
            <td><span class="badge bg-{{$row->color}}">{{ $row->status_name }}</span></td>

            <td>{{ $row->created_by_name}}</td>
            <td>{{ $row->created_at ?$row->created_at->format('Y-m-d H:m:s'):'-'}}</td>
            <td>

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

                @if($row->postpone_application_status_id == 1)
                    @can('postpone-payment-applications-accept')
                        <a class="btn btn-icon round btn-sm btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="right" onclick="openConfirmModel({{$row->id}},2)" title="قبول الطلب">
                            <em data-feather="check"></em>
                        </a>
                    @endcan
                    @can('postpone-payment-applications-reject')
                            <a class="btn btn-icon round btn-sm btn-outline-danger" data-bs-toggle="tooltip" data-bs-placement="right" onclick="openConfirmModel({{$row->id}},3)" title="رفض الطلب">
                                <em data-feather="check"></em>
                            </a>
                     @endcan
                @endif
                @can('cancel-contract-applications-edit')
                    @if($row->postpone_application_status_id == 2)
                        <a class="btn btn-icon round btn-sm btn-outline-primary" href="{{route('postpone-payment-applications.uploadDocument',$row->id)}}" data-bs-toggle="tooltip" data-bs-placement="right" title="رفع اوراق الاعتماد">
                            رفع اوراق الاعتماد
                        </a>
                    @endif
                @endcan
                @can('cancel-contract-applications-edit')
                    @if($row->application_status == 4)

                    @endif
                @endcan
                <p id="demo"></p>
            </td>
            </tr>
        @endforeach
        </tbody>
    </x-slot>
    <x-slot name="pagination">
        {{ $postponePaymentApplications->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 url = '';
                if (application_status === 2){
                    message = "هل انت متاكد من إلغاء طلب التأجيل";
                    url = "postpone-payment-applications/accept"
                }

                else if(application_status === 3){
                    message = "هل انت متاكد من قبول طلب التأجيل";
                    url = "postpone-payment-applications/reject"
                }
                let conformInput = confirm(message)
                if(conformInput){
                    $.ajax(
                        {
                            type: "POST",
                            url: url,
                            data: {
                                "application_id":app_id,
                                "application_status":application_status,
                                _token: document.getElementsByName('_token')[0].value
                            },
                            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