@extends('layout.app')
@section('title')
    {{ __('البرامج و الانشطة') }}
@stop
@section('css')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="{{ asset('app-assets/vendors/css/vendors-rtl.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/buttons.bootstrap4.min.css') }}">
    <link rel="stylesheet" type="text/css"
        href="{{ asset('app-assets/vendors/css/tables/datatable/rowGroup.bootstrap4.min.css') }}">
    <!-- END: Vendor CSS-->

    <link href="{{ asset('app-assets/hijri-date/css/bootstrap-datetimepicker.min.css') }}" rel="stylesheet" />
@stop

@section('content')

    <div class="content-wrapper">
        <div class="content-body">
            <!-- job-title list start -->
            <section class="app-job-title-list">
                <!-- list section start -->
                <!-- users filter start -->
                <div class="card">
                    <div class="card-header mb-2">
                        <h4 class="card-title">{{ __('البرامج و الانشطة') }}</h4>
                    </div>
                    <h5 class="card-header">تصفية البيانات</h5>

                    <div class="d-flex justify-content-between align-items-center mx-50 row pt-0 pb-2">

                        <div class="col-md-3">
                            <label class="form-label">{{ __('من تاريخ') }}</label>
                            <input type="text" name="from_date" id="from_date" class="form-control hijri-picker" />
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">{{ __('الى تاريخ') }}</label>
                            <input type="text" name="to_date" id="to_date" class="form-control hijri-picker" />
                        </div>
                        <div class="col-md-2 pt-2">
                            <button type="button" name="filter" id="filter" class="btn btn-primary">بحث</button>
                        </div>

                    </div>
                </div>
                <!-- users filter end -->
                <div class="card">
                    <div class="card-datatable table-responsive pt-0">

                        <table class="assist-activities-list-table table">
                            <thead class="thead-light">
                                <tr>
                                    <th>{{ __('اسم البرنامج') }}</th>
                                    <th>{{ __('تاريخ بدء البرنامج') }}</th>
                                    <th>{{ __('تاريخ انتهاء البرنامج') }}</th>
                                    <th>{{ __('حالة البرنامج') }}</th>
                                    <th>{{ __('المجال') }}</th>
                                    <th>{{ __('المستوى') }}</th>
                                    <th>{{ __('اسم المسؤول') }}</th>
                                    <th>{{ __('Action') }}</th>
                                </tr>
                            </thead>
                        </table>
                    </div>

                </div>
                <!-- list section end -->
            </section>

        </div>
    </div>
@endsection

@section('js')
    <!-- BEGIN: Page Vendor JS-->
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/responsive.bootstrap4.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.buttons.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/jszip.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/pdfmake.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/vfs_fonts.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.html5.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/buttons.print.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js') }}"></script>

    <!-- END: Page Vendor JS-->
    <!-- END: Page Vendor JS-->
    <script>
        const indexUrl = '{{ route('activities.assist') }}';
    </script>
    <!-- BEGIN: Page JS-->

    <script>
        var activityStatus = {
            4: {
                title: 'انتهى',
                class: 'badge-light-primary'
            },
            3: {
                title: 'غير منفذ',
                class: 'badge-light-danger'
            },
            2: {
                title: 'تنفيذ موثق',
                class: 'badge-light-success'
            },
            6: {
                title: 'تنفيذ غير موثق',
                class: 'badge-light-warning'
            },
            5: {
                title: 'منفذ مؤخراً',
                class: 'badge-light-primary'
            },
            1: {
                title: 'قائم',
                class: 'badge-light-warning'
            },
            0: {
                title: 'قادم',
                class: 'badge-light-info'
            },
        };
        $(document).ready(function() {
            $('.assist-activities-list-table').DataTable({
                "processing": true,
                "serverSide": true,
                ajax: {
                    url: indexUrl,
                }, // JSON file to add data
                columns: [
                    // columns according to JSON
                    {
                        data: 'name',
                        orderable: false
                    },
                    {
                        data: 'start_date',
                        orderable: false
                    },
                    {
                        data: 'end_date',
                        orderable: false
                    },
                    {
                        data: 'status',
                        orderable: false
                    },
                    {
                        data: 'domin',
                        orderable: false
                    },
                    {
                        data: 'level',
                        orderable: false
                    },
                    {
                        data: 'user',
                        orderable: false
                    },
                    {
                        data: 'actions',
                        orderable: false
                    }
                ],
                order: [1],

                dom: '<"d-flex justify-content-between align-items-center header-actions mx-1 row mt-75"' +
                    '<"col-lg-12 col-xl-6" l>' +
                    '<"col-lg-12 col-xl-6 pl-xl-75 pl-0"<"dt-action-buttons text-xl-right text-lg-left text-md-right text-left d-flex align-items-center justify-content-lg-end align-items-center flex-sm-nowrap flex-wrap mr-1"<"mr-1"f>B>>' +
                    '>t' +
                    '<"d-flex justify-content-between mx-2 row mb-1"' +
                    '<"col-sm-12 col-md-6"i>' +
                    '<"col-sm-12 col-md-6"p>' +
                    '>',


                language: {
                    sLengthMenu: 'Show _MENU_',
                    search: 'بحث',
                    searchPlaceholder: 'بحث..',
                    paginate: {
                        // remove previous & next text from pagination
                        previous: '&nbsp;',
                        next: '&nbsp;'
                    }
                },
                // Buttons with Dropdown
                buttons: [{
                        extend: 'collection',
                        className: 'btn btn-outline-secondary dropdown-toggle mr-2 mt-50',
                        text: feather.icons['share'].toSvg({
                            class: 'font-small-4 mr-50'
                        }) + 'تصدير',
                        buttons: [{
                                extend: 'print',
                                text: feather.icons['printer'].toSvg({
                                    class: 'font-small-4 mr-50'
                                }) + 'طباعة',
                                className: 'dropdown-item',
                                exportOptions: {
                                    columns: [1, 2, 3, 4, 5, 6, 7]
                                }
                            },
                            {
                                extend: 'excel',
                                text: feather.icons['file'].toSvg({
                                    class: 'font-small-4 mr-50'
                                }) + 'اكسل',
                                className: 'dropdown-item',
                                exportOptions: {
                                    columns: [1, 2, 3, 4, 5, 6, 7]
                                }
                            },
                            {
                                extend: 'pdf',
                                text: feather.icons['clipboard'].toSvg({
                                    class: 'font-small-4 mr-50'
                                }) + 'Pdf',
                                className: 'dropdown-item',
                                exportOptions: {
                                    columns: [1, 2, 3, 4, 5, 6, 7]
                                }
                            }
                        ],
                        init: function(api, node, config) {
                            $(node).removeClass('btn-secondary');
                            $(node).parent().removeClass('btn-group');
                            setTimeout(function() {
                                $(node).closest('.dt-buttons').removeClass('btn-group')
                                    .addClass('d-inline-flex');
                            }, 50);
                        }
                    }

                ],
                columnDefs: [{
                        // Slider Status
                        targets: 3,
                        render: function(data, type, full, meta) {
                            var $status = full['status'];

                            return (
                                '<span class="badge badge-pill ' +
                                activityStatus[$status].class +
                                '" text-capitalized>' +
                                activityStatus[$status].title +
                                '</span>'
                            );
                        }
                    }

                ]

            });
            $('#filter').click(function() {
                var from_date = $('#from_date').val();
                var to_date = $('#to_date').val();

                if ((from_date != '' && to_date != '')) {
                    $('.assist-activities-list-table').DataTable().destroy();
                    $('.assist-activities-list-table').DataTable({
                        "processing": true,
                        "serverSide": true,
                        ajax: {
                            url: indexUrl,
                            data: {
                                from_date: from_date,
                                to_date: to_date,
                                filter: filter
                            }
                        }, // JSON file to add data
                        columns: [
                            // columns according to JSON
                            {
                                data: 'name',
                                orderable: false
                            },
                            {
                                data: 'start_date',
                                orderable: false
                            },
                            {
                                data: 'end_date',
                                orderable: false
                            },
                            {
                                data: 'status',
                                orderable: false
                            },
                            {
                                data: 'domin',
                                orderable: false
                            },
                            {
                                data: 'level',
                                orderable: false
                            },
                            {
                                data: 'user',
                                orderable: false
                            },
                            {
                                data: 'actions',
                                orderable: false
                            }
                        ],
                        order: [1],

                        dom: '<"d-flex justify-content-between align-items-center header-actions mx-1 row mt-75"' +
                            '<"col-lg-12 col-xl-6" l>' +
                            '<"col-lg-12 col-xl-6 pl-xl-75 pl-0"<"dt-action-buttons text-xl-right text-lg-left text-md-right text-left d-flex align-items-center justify-content-lg-end align-items-center flex-sm-nowrap flex-wrap mr-1"<"mr-1"f>B>>' +
                            '>t' +
                            '<"d-flex justify-content-between mx-2 row mb-1"' +
                            '<"col-sm-12 col-md-6"i>' +
                            '<"col-sm-12 col-md-6"p>' +
                            '>',


                        language: {
                            sLengthMenu: 'Show _MENU_',
                            search: 'بحث',
                            searchPlaceholder: 'بحث..',
                            paginate: {
                                // remove previous & next text from pagination
                                previous: '&nbsp;',
                                next: '&nbsp;'
                            }
                        },
                        // Buttons with Dropdown
                        buttons: [{
                                extend: 'collection',
                                className: 'btn btn-outline-secondary dropdown-toggle mr-2 mt-50',
                                text: feather.icons['share'].toSvg({
                                    class: 'font-small-4 mr-50'
                                }) + 'تصدير',
                                buttons: [{
                                        extend: 'print',
                                        text: feather.icons['printer'].toSvg({
                                            class: 'font-small-4 mr-50'
                                        }) + 'طباعة',
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: [1, 2, 3, 4, 5, 6, 7]
                                        }
                                    },
                                    {
                                        extend: 'excel',
                                        text: feather.icons['file'].toSvg({
                                            class: 'font-small-4 mr-50'
                                        }) + 'اكسل',
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: [1, 2, 3, 4, 5, 6, 7]
                                        }
                                    },
                                    {
                                        extend: 'pdf',
                                        text: feather.icons['clipboard'].toSvg({
                                            class: 'font-small-4 mr-50'
                                        }) + 'Pdf',
                                        className: 'dropdown-item',
                                        exportOptions: {
                                            columns: [1, 2, 3, 4, 5, 6, 7]
                                        }
                                    }
                                ],
                                init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                    $(node).parent().removeClass('btn-group');
                                    setTimeout(function() {
                                        $(node).closest('.dt-buttons').removeClass(
                                            'btn-group').addClass(
                                            'd-inline-flex');
                                    }, 50);
                                }
                            }

                        ],
                        columnDefs: [{
                                // Slider Status
                                targets: 3,
                                render: function(data, type, full, meta) {
                                    var $status = full['status'];

                                    return (
                                        '<span class="badge badge-pill ' +
                                        activityStatus[$status].class +
                                        '" text-capitalized>' +
                                        activityStatus[$status].title +
                                        '</span>'
                                    );
                                }
                            }

                        ]

                    });
                } else {
                    alert('يجب ادخال التاريخ او اختيار الحالة على الاقل');
                }
            });

        });
    </script>
    <!-- END: Page JS-->

@stop