@extends('panel._layout.app')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mt-0 header-title">المشرفون</h4>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#create_modal">
                        <i class="mdi mdi-plus"></i> إضافة
                    </button>
                </div>
                <div class="card-body">
                    <table id="oTable" class="table table-bordered dt-responsive table-responsive nowrap">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>الصورة</th>
                                <th>الاسم</th>
                                <th>الإيميل</th>
                                <th>رقم الجوال</th>
                                <th>الصلاحية</th>
                                <th>تاريخ الإضافة</th>
                                <th>الأدوات</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Create Supervisor Modal -->
        <div class="modal fade" id="create_modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-top">
                <div class="modal-content">
                    <div class="modal-header bg-light">
                        <h4 class="modal-title" id="myCenterModalLabel">المشرفون</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                    </div>
                    <div class="modal-body">
                        <form class="ajax_form" method="POST">
                            <div class="mb-3">
                                <label for="name" class="form-label">الاسم</label>
                                <input type="text" class="form-control" name="name" id="name"
                                    placeholder="اسم المشرف">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">البريد الإلكتروني</label>
                                <input type="email" class="form-control" name="email" id="email"
                                    placeholder="البريد الإلكتروني">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="mobile" class="form-label">رقم الجوال</label>
                                <input type="text" class="form-control" name="mobile" id="mobile"
                                    placeholder="رقم الجوال">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="photo" class="form-label">صورة المشرف</label>
                                <input type="file" class="form-control" name="photo" id="photo">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">كلمة المرور</label>
                                <input type="password" class="form-control" name="password" id="password"
                                    placeholder="**********">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="passwordConfirmation" class="form-label">تأكيد كلمة المرور</label>
                                <input type="password" class="form-control" name="password_confirmation"
                                    id="passwordConfirmation" placeholder="**********">
                                <div class="invalid-feedback"></div>
                            </div>
                            <button type="submit" class="btn btn-primary waves-effect waves-light submit_btn">
                                إضافة
                            </button>
                            <button type="button" class="btn btn-danger waves-effect waves-light" data-bs-dismiss="modal">
                                إلغاء
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Modal -->
        <!-- Edit Supervisor Modal -->
        <div class="modal fade" id="edit_modal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-top">
                <div class="modal-content">
                    <div class="modal-header bg-light">
                        <h4 class="modal-title" id="myCenterModalLabel">المشرفون</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                    </div>
                    <div class="modal-body">
                        <form class="ajax_form" id="edit_form" method="POST">
                            @method('PUT')
                            <div class="mb-3">
                                <label for="name" class="form-label">الاسم</label>
                                <input type="text" class="form-control" name="name" id="edit_name"
                                    placeholder="اسم المشرف">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">البريد الإلكتروني</label>
                                <input type="email" class="form-control" name="email" id="edit_email"
                                    placeholder="البريد الإلكتروني">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="mobile" class="form-label">رقم الجوال</label>
                                <input type="text" class="form-control" name="mobile" id="edit_mobile"
                                    placeholder="رقم الجوال">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="photo" class="form-label">صورة المشرف</label>
                                <input type="file" class="form-control" name="photo" id="photo">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="password" class="form-label">كلمة المرور</label>
                                <input type="password" class="form-control" name="password" id="password"
                                    placeholder="**********">
                                <div class="invalid-feedback"></div>
                            </div>
                            <div class="mb-3">
                                <label for="passwordConfirmation" class="form-label">تأكيد كلمة المرور</label>
                                <input type="password" class="form-control" name="password_confirmation"
                                    id="passwordConfirmation" placeholder="**********">
                                <div class="invalid-feedback"></div>
                            </div>
                            <button type="submit" class="btn btn-primary waves-effect waves-light submit_btn">
                                تعديل
                            </button>
                            <button type="button" class="btn btn-danger waves-effect waves-light"
                                data-bs-dismiss="modal">
                                إلغاء
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Modal -->
    </div>
@endsection

@push('scripts')
    <script>
        var url = '{{ route('admin.admins.index') }}';

        $(document).ready(function() {
            // datatable columns
            let columns = [{
                    data: 'DT_RowIndex',
                },
                {
                    data: 'photo_path',
                    render(data, type, row, meta) {
                        return '<img src=' + row.photo_path + ' alt="admin">';
                    },
                },
                {
                    data: 'name',
                },
                {
                    data: 'email',
                },
                {
                    data: 'mobile',
                },
                {
                    data: 'role_label',
                },
                {
                    data: 'created_at_label',
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false,
                }
            ];

            let settings = {
                language: {
                    url: '{{ asset('panel/assets/libs/datatables.net/' . config('app.locale') . '.json') }}'
                },
                responsive: true,
                paging: true,
                searching: true,
                ordering: true,
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.admins.dataTable') }}',
                },
                columns: columns,
            };
            var oTable = $('#oTable').DataTable(settings);
        });
    </script>

    <script>
        // Open Model And Pass Data To The Form
        $(document).on('click', '#create_btn', function(event) {
            $('#create_form').attr('action', url);
        });
        $(document).ready(function() {
            $(document).on('click', '.edit_btn', function(event) {
                var button = $(this)
                var id = button.data('id')
                var name = button.data('name')
                var email = button.data('email')
                var mobile = button.data('mobile')
                var urls = url + '/' + id;
                $('#edit_form').attr('action', urls)
                $('#edit_form #edit_name').val(button.data('name'))
                $('#edit_form #edit_email').val(button.data('email'))
                $('#edit_form #edit_mobile').val(button.data('mobile'))
            });
        });
    </script>
@endpush