@extends('dashboard.layouts.master')
@section('content')
    <div class="card">
        <div class="card-header">
            <h3>{{@$page_title}}</h3>
            <div class="btns-header">
                <a href="javascript:;" class="search-filter">
                  <span class="show-search">
                    <i class="fa fa-long-arrow-down"></i>
                    اظهار البحث</span>
                    <span class="hide-search">
                    <i class="fa fa-long-arrow-up"></i>
                    اخفاء البحث</span>
                </a>

                <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 pb-0 filter">
            <form class="form search_form" method="post" action="">
                <div class="row">
                    <div class="col-md-3 form-group">
                        <label class="form-label">النوع</label>
                        <select id="" name="type" class="select2-custom">
                            <option value="">الكل</option>
                            <option value="admin">مشرف</option>
                            <option value="user">مستخدم</option>
                        </select>
                    </div>

                    <div class="col-md-3 form-group">
                        <label class="form-label">رقم الهاتف</label>
                        <input class="form-control" name="phone" type="number" placeholder="">
                    </div>
                    <div class="col-md-3 form-group">
                        <label class="form-label">البريد الإلكتروني</label>
                        <input class="form-control" name="email" type="email" placeholder="">
                    </div>
                </div>
                <div class="card-footer mt-2">
                    <button class="btn btn-primary btn-air-primary btn-icon" type="submit">
                        <i class="fa fa-search"></i>
                        بحث
                    </button>
                </div>
            </form>
            <div class="line-body"></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>
                    </tr>
                    </thead>
                    <tbody>

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


        $('.datatable').DataTable({
            lengthChange: true,
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            language: {
                "url": "http://cdn.datatables.net/plug-ins/1.12.1/i18n/ar.json"
            },

            "ajax": {
                url: "{{route(@$route.'.data')}}",
                data: function (d) {
                    d.type = $('select[name="type"]').val();
                    d.email = $('input[name="email"]').val();
                    d.phone = $('input[name="phone"]').val();
                },
            },
            columns: [
                {
                    data: "DT_RowIndex", sortable: false, searchable: false
                },
                {data: "check", name: "check", sortable: false, searchable: false},
                {data: "name", name: "name"},
                {data: "email", name: "email"},
                {data: "phone", name: "phone"},
                {data: "status", name: "status", sortable: false, searchable: false},
                {data: "photo", name: "photo", sortable: false, searchable: false},
                {data: "actions", name: "actions", sortable: false, searchable: false},
            ]

        });

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