@extends('admin.layouts.master')
@section('css')
    @include('admin.helper.tablecss')
@endsection
@section('page-header')
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto"> الإشعارات </h4>
            </div>
        </div>
    </div>
@endsection
@section('content')
    <div id="notificationsWrapper">
        {{-- FILTERS --}}
        <div class="row">
            <div class="col-md-12 col-xl-12 col-xs-12 col-sm-12">
                <form id="notifFilters">
                    <div class="card">
                        <div class="card-body">
                            <div class="row row-sm">
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> نوع الإشعار </label>
                                    <select id="f_type" class="form-control select2">
                                        <option value=""> الكل </option>
                                        <option value="info"> معلومة </option>
                                        <option value="warning"> تحذير </option>
                                        <option value="error"> خطأ </option>
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> إلزامي؟ </label>
                                    <select id="f_required" class="form-control select2">
                                        <option value=""> الكل </option>
                                        <option value="1"> نعم </option>
                                        <option value="0"> لا </option>
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> مقروء؟ </label>
                                    <select id="f_read" class="form-control select2">
                                        <option value=""> الكل </option>
                                        <option value="1"> نعم </option>
                                        <option value="0"> لا </option>
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> نوع المستقبل </label>
                                    <select id="f_recipient_type" class="form-control select2">
                                        <option value=""> الكل </option>
                                        <option value="user"> مستخدم </option>
                                        <option value="vendor"> فاندور </option>
                                    </select>
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> رقم المستقبل </label>
                                    <input type="text" id="f_recipient_id" class="form-control" placeholder="ID">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> بحث العنوان </label>
                                    <input type="text" id="f_title" class="form-control" placeholder="نص...">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> من تاريخ </label>
                                    <input type="date" id="f_date_from" class="form-control">
                                </div>
                                <div class="col-lg-3 mt-2">
                                    <label class="mt-0"> إلى تاريخ </label>
                                    <input type="date" id="f_date_to" class="form-control">
                                </div>
                                <div class="col-lg-4 mt-3">
                                    <button type="button" id="applyFilters" class="btn btn-primary"> تحديث </button>
                                    <button type="button" id="resetFilters" class="btn btn-secondary"> مسح </button>
                                    @if(can_admin('notifications_send') || is_super_admin())
                                        <a href="{{ route('admin.notifications.create') }}" class="btn btn-success"> إنشاء </a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        {{-- FILTERS --}}

        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        <div class="row">
            <div class="col-xl-12">
                <div class="card">
                    <div class="card-header pb-0">
                        <div class="d-flex justify-content-between">
                            <h4 class="card-title mg-b-0"> الإشعارات </h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table text-md-nowrap small" id="notifications_table">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>العنوان</th>
                                        <th>النوع</th>
                                        <th>المستقبل</th>
                                        <th>إلزامي؟</th>
                                        <th>مقروء؟</th>
                                        <th>تاريخ</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    @include('admin.helper.tablescripts')
    <script>
        $(function(){
            $('.select2').select2();

            if ($.fn.DataTable.isDataTable('#notifications_table')) {
                $('#notifications_table').DataTable().destroy();
            }

            const table = $('#notifications_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.notifications.index') }}',
                    data: function(d){
                        d.f_type = $('#f_type').val();
                        d.f_required = $('#f_required').val();
                        d.f_read = $('#f_read').val();
                        d.f_recipient_type = $('#f_recipient_type').val();
                        d.f_recipient_id = $('#f_recipient_id').val();
                        d.f_date_from = $('#f_date_from').val();
                        d.f_date_to = $('#f_date_to').val();
                        if($('#f_title').val()) { d.search = { value: $('#f_title').val() }; }
                    }
                },
                order: [[0,'desc']],
                pageLength: 50,
                lengthMenu: [[10,25,50,100,500,-1],[10,25,50,100,500,'الكل']],
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'title', name: 'title'},
                    {data: 'type', name: 'type', orderable:false, searchable:false},
                    {data: 'recipient_display', name: 'recipient_type'},
                    {data: 'is_required', name: 'is_required', orderable:false, searchable:false},
                    {data: 'is_read', name: 'is_read', orderable:false, searchable:false},
                    {data: 'created_at', name: 'created_at'}
                ],
                language: { url: '{{ asset('datatable/ar.json') }}' }
            });

            let titleTimer = null;
            $('#f_title').on('keyup', function(){
                clearTimeout(titleTimer);
                titleTimer = setTimeout(()=> table.draw(), 400);
            });

            $('#applyFilters').on('click', function(){ table.draw(); });
            $('#resetFilters').on('click', function(){
                $('#notifFilters')[0].reset();
                $('.select2').val('').trigger('change');
                table.search('').draw();
            });
        });
    </script>
@endsection