@extends('dashboard.layouts.master')
@section('content')
    <div class="card">
        <div class="card-header">
            <h3>{{@$page_title}}</h3>
            <div class="btns-header">


                <a href="{{route($route.'.bulkDelete')}}" class="btn btn-danger btn-air-danger btn-icon delete_all_btn d-none">
                    <i class="fa fa-trash"></i>
                    حذف المحدد
                </a>
                <a href="{{route($route.'.create')}}" class="btn btn-primary btn-air-primary btn-icon">
                    <i class="fa fa-plus"></i>
                    {{@$create}}
                </a>

            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered datatable">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>
                            <div class="checkbox checkbox-primary">
                                <input id="inline" type="checkbox" class="check_all">
                                <label for="inline">تحديد الكل</label>
                            </div>
                        </th>
                        <th>اسم المستوي</th>
                        <th>السعر</th>
                        <th>نوع الدفع</th>
                        <th>لديه عرض</th>
                        <th>إضافه إشتراك</th>
                        <th>المواد</th>
                        <th>الإمتحان</th>
                        <th>التحكم</th>
                    </tr>
                    </thead>
                    <tbody id="sortable">

                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>

        $('.datatable').DataTable({
            lengthChange: true,
            processing: true,
            serverSide: true,
            order: [[0, 'asc']],
            language: {
                "url": "http://cdn.datatables.net/plug-ins/1.12.1/i18n/ar.json"
            },
            "ajax": {
                url: "{{route(@$route.'.data')}}",
            },
            columns: [
                {data: "DT_RowIndex", sortable: false, searchable: false},
                {data: "check", name: "check", sortable: false, searchable: false},
                {data: "name", name: "name", sortable: false},
                {data: "price", name: "price", sortable: false},
                {
                    data: "payment_type", name: "payment_type", sortable: false, searchable: true,
                    render: function (d) {
                        if (d == 'paid') {
                            return 'مدفوع'
                        } else {
                            return 'مجاني'
                        }
                    }
                },
                {
                    data: "have_offer", name: "have_offer", sortable: false, searchable: true,
                    render: function (d) {
                        return d == 'yes' ? ' نعم' : 'لا';
                    }
                },

                {data: "subscription", name: "subscription", sortable: false, searchable: false},
                {data: "subjects", name: "subjects", sortable: false, searchable: false},
                {data: "exam", name: "exam", sortable: false, searchable: false},
                {data: "actions", name: "actions", sortable: false, searchable: false},
            ],
            // "columnDefs": [
            //     {className: "sortable", "targets": [0]}
            // ]

        });

        $('.search_form').on('submit', function (e) {
            e.preventDefault();
            $('.datatable').DataTable().draw();
        });
    </script>


    <script>

        $(document).on('click', '.delete_all_btn', function (e) {
            var url = $(this).attr('href');
            var items = [];
            $('input[class="check_item"]').each(function () {
                if ($(this).is(':checked')) {
                    items.unshift($(this).val());
                }
            });

            e.preventDefault();
            Swal.fire({
                title: 'قد يؤدي الحذف الي حذف المواد والدروس والاشتراكات و كل ما يتعلق بالمستويات',
                text: "هل تريد الإستمرار ؟",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'نعم , حذف!',
                cancelButtonText: 'رجوع'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "delete",
                        url: url,
                        data: {
                            '_token': '{{csrf_token()}}',
                            'items': items
                        },
                        success: function () {
                            Swal.fire(
                                'تم الحذف !',
                                'تم الحذف بنجاح',
                                'success'
                            );
                            $('.delete_all_btn').addClass('d-none');
                            $('.datatable').DataTable().draw();
                        },
                        error: function (response) {
                            Swal.fire(
                                response.responseJSON.message,
                            );
                        }
                    })
                }
            })
        });
        $(document).on('click', '.delete_raw', function (e) {
            e.preventDefault();
            var url = $(this).attr('href');

            Swal.fire({
                title: 'قد يؤدي الحذف الي حذف المواد والدروس والاشتراكات و كل ما يتعلق بالمستوي',
                text: "هل تريد الإستمرار ؟",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'نعم , حذف!',
                cancelButtonText: 'رجوع'
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        type: "delete",
                        url: url,
                        data: {
                            '_token': '{{csrf_token()}}'
                        },
                        success: function (response) {
                            console.log(response)
                            Swal.fire(
                                'تم الحذف !',
                                'تم الحذف بنجاح',
                                'success'
                            );

                            $('.datatable').DataTable().draw();
                        },
                        error: function (response) {
                            Swal.fire(
                                response.responseJSON.message,
                            );
                        }
                    })
                }
            })

        });
    </script>
    <script>
        // sortable

        let data = [];
        $("#sortable").sortable({
            items: 'tr',
            cursor: "move",
            stop: function (event, ui) {
                data = [];
                $('.sortable').each(function (index, value) {
                    data.push({
                        id: $(this).val(),
                        position: index + 1
                    });
                });
                updatePosition(data);

            },
        });


        function updatePosition(data) {
            $.ajax({
                type: 'post',
                url: '{{route('levels.updatePosition')}}',
                data: {
                    '_token': '{{csrf_token()}}',
                    positions: data
                },
                success: function () {
                    $('.datatable').DataTable().draw();
                    /* Toast.fire({
                         icon: 'success',
                         title: 'تم التحديث بنجاح'
                     })*/
                }

            })
        }

    </script>
@endpush