@extends('layouts.admin')
@section('css')
    <!-- begin::datepicker -->
    <link rel="stylesheet" href="/assets/vendors/datepicker-jalali/bootstrap-datepicker.min.css">
    <!-- end::datepicker -->


    <link rel="stylesheet" href="/assets/vendors/clockpicker/bootstrap-clockpicker.min.css" type="text/css">

@endsection('css')
@section('script')
    <script src="/assets/vendors/datepicker-jalali/bootstrap-datepicker.min.js"></script>
    <script src="/assets/vendors/datepicker-jalali/bootstrap-datepicker.fa.min.js"></script>
    <script src="/assets/js/examples/datepicker.js"></script>
    <!-- end::datepicker -->

    <!-- end::select2 -->
    <script src="/assets/vendors/clockpicker/bootstrap-clockpicker.min.js"></script>
    <script src="/assets/js/examples/clockpicker.js"></script>
    <!-- end::datepicker -->
    <script src="/js/num2persian-min.js"></script>
    <script src="/js/number-divider.min.js"></script>
    <!-- end::datepicker -->
    <script>

        $(document).on('focus', '.price-box-product input', function () {
            var boxPrice = $(this).siblings('.price-box-product-content');
            boxPrice.fadeIn(100);
            boxPrice.find('.price-box-numbers').html($(this).val())
            boxPrice.find('.price-box-numbers').divide({
                delimiter: ',',
                divideThousand: false
            });
            var e = this;
            this.nextSibling.nextElementSibling.children[3].childNodes[1].nextElementSibling.innerHTML = e.value
                .toPersianLetter()
            e.oninput = myHandler;
            e.onpropertychange = e.oninput; // for IE8
            function myHandler() {
                this.nextSibling.nextElementSibling.children[3].childNodes[1].nextElementSibling.innerHTML = e.value
                    .toPersianLetter();
            }
        });

        $(document).on('click', '.price-box-product-content button.close', function () {
            $(this).parents('.price-box-product-content').fadeOut(100);
        })

        $(document).on('blur', '.price-box-product input', function () {
            $(this).siblings('.price-box-product-content').fadeOut(100);
        });

        $(document).on('keyup', '.price-box-product input', function () {
            var boxPrice = $(this).siblings('.price-box-product-content');
            boxPrice.find('.price-box-numbers').html($(this).val());
            boxPrice.find('.price-box-numbers').divide({
                delimiter: ',',
                divideThousand: false
            });
        });
    </script>
@endsection('script')
@section('content')

    <!-- end::page header -->
    <div class="card">
        <div class="card-body">
            <div class="card-title">
                <h5>لیست اقساط معوقه

                    <a href="/admin/farhang_tuition/exportoverdue_report">
                        <button class="btn btn-danger">خروجی اکسل اقساط معوقه
                            &nbsp;
                            <span class="fa fa-download"></span>
                        </button>
                    </a>
                </h5>

                <div class="heading-elements">
                    <div class="d-flex flex-row">
                        <div class="p-2">

                            <div id='search'>
                                <form method="get" action="/admin/farhang_tuition/overdue_report">
                                    <div class="d-flex flex-row">
                                        <div class="p-2">
                                            <span>نام دانش آموز</span>
                                            <select class="js-example-basic-single" dir="rtl"
                                                    name="name">
                                                <option></option>
                                                @foreach($allUser as $user)
                                                    <option value="{{$user->id}}"
                                                            @if($user->id==request()->name) selected @endif>{{$user->f_name}} {{$user->l_name}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="p-2">
                                            <span>کلاس</span>
                                            <select class="js-example-basic-single" dir="rtl"
                                                    name="class">
                                                <option value="">انتخاب کنید</option>
                                                @foreach($classs as $class)
                                                    <option value="{{$class->classnamber}}"
                                                            @if($class->classnamber==request()->class) selected @endif>{{$class->classnamber}}</option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="p-2">
                                            <br>
                                            <button type="submit" class="btn btn-info">جستجوکن</button>
                                        </div>
                                    </div>
                                </form>
                                <div class="p-2">

                                    <a href="/admin/farhang_tuition/overdue_report">
                                        <button type="submit" class="btn btn-warning btn-sm">پاک کردن فیلترها</button>

                                    </a>
                                </div>
                            </div>

                        </div>
                        {{--                                <div class="p-2">--}}
                        {{--                                    <form method="get" action="/admin/farhang_tuition/pay_report/export">--}}
                        {{--                                        <input hidden name="class" value="{{request()->class}}">--}}
                        {{--                                        <input hidden name="name" value="{{request()->name}}">--}}
                        {{--                                        <button type='submit' class="btn btn-warning">--}}
                        {{--                                            دریافت فایل--}}
                        {{--                                        </button>--}}
                        {{--                                    </form>--}}
                        {{--                                </div>--}}

                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                    <tr style="text-align: center">
                        <th>#</th>
                        <th>دانش آموز</th>
                        <th>کلاس</th>
                        <th>مبلغ</th>
                        <th>نوع</th>
                        <th>موعد پرداخت</th>

                    </tr>
                    </thead>
                    <tbody>
                    @foreach($rows as $key=>$row)

                        <tr style="text-align: center">
                            <td>{{$key+1}}</td>
                            <td>
                                {{$row->user->f_name ?? ''}}
                                {{$row->user->l_name ?? ''}}
                            </td>
                            <td>
                                {{$row->user->class ?? ''}}
                            </td>
                            <td>{{number_format($row->remaining)}}</td>

                            <td>{{$row->type->name}}</td>
                            <td>{{$row->type->dead_line}}</td>


                        </tr>
                    @endforeach
                    </tbody>

                </table>
            </div>
        </div>
    </div>


    {{ $rows->appends(request()->except('page'))->links() }}

@endsection
@section('js')
    <script>
        function hideshow() {
            var x = document.getElementById("search");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }

    </script>
    <script src="/js/sweet.js"></script>

    <script src="/panel/assets/vendors/select2/js/select2.min.js"></script>
    <script src="/panel/assets/js/examples/select2.js"></script>
    <script src="/panel/assets/vendors/ckeditor/ckeditor.js"></script>
    <script src="/panel/assets/js/examples/ckeditor.js"></script>
    <!-- begin::datepicker -->

@endsection