@php use App\Enums\PermissionEnum; @endphp
@extends('layouts.master')
@section('title', trans('admin.notifications_list'))

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/select2/select2.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.css') }}"/>
    <link rel="stylesheet" href="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.css') }}"/>
    <style>
        .select2-results__option, .select2-selection__rendered {
            color: #6f6b7d;
        }
    </style>
@endsection

@section('content')
    @include('layouts._breadcrumb', [
        'list' => [
            ['data' => trans('admin.dashboard'), 'url' => route('admin.landing')],
            ['data' => trans('admin.notifications_list'), 'url' => null],
        ],
    ])

    <div class="card mb-4">
        <div class="card-body">
            <form id="filter_form" class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">{{ trans('admin.target') }}</label>
                    <select name="target" class="form-select select2">
                        <option value="">{{ trans('admin.all') }}</option>
                        <option value="all">{{ trans('admin.all_users') }}</option>
                        <option value="clients">{{ trans('admin.all_clients') }}</option>
                        <option value="providers">{{ trans('admin.all_providers') }}</option>
                        <option value="specific_user">{{ trans('admin.specific_user') }}</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">{{ trans('admin.user') }}</label>
                    <select name="user_id" class="form-select select2-ajax">
                        <option value="">{{ trans('admin.select_user') }}</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">{{ trans('admin.duration') }}</label>
                    <div class="input-group">
                        <input type="text" name="date_from" class="form-control flatpickr" placeholder="{{ trans('admin.from_date') }}"/>
                        <input type="text" name="date_to" class="form-control flatpickr" placeholder="{{ trans('admin.to_date') }}"/>
                    </div>
                </div>
                <div class="col-12 text-end">
                    <button type="button" class="btn btn-primary btn-filter">{{ trans('admin.filter') }}</button>
                    <button type="reset" class="btn btn-label-secondary btn-reset">{{ trans('admin.reset') }}</button>
                    @can(PermissionEnum::NOTIFICATION_EXPORT)
                        <button type="button" class="btn btn-label-success btn-export">{{ trans('admin.export') }}</button>
                    @endcan
                    @can(PermissionEnum::NOTIFICATION_SEND)
                        <a href="{{ route('admin.notification.create') }}" class="btn btn-success">{{ trans('admin.send_notification') }}</a>
                    @endcan
                </div>
            </form>
        </div>
    </div>

    <div class="card">
        <div class="card-datatable table-responsive pt-0">
            <table class="datatable table table-bordered table-striped">
                <thead>
                <tr>
                    <th>{{ trans('admin.id') }}</th>
                    <th>{{ trans('admin.title') }}</th>
                    <th>{{ trans('admin.message') }}</th>
                    <th>{{ trans('admin.target') }}</th>
                    <th>{{ trans('admin.user') }}</th>
                    <th>{{ trans('admin.created_at') }}</th>
                    <th>{{ trans('admin.action') }}</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset('admin_assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/flatpickr/flatpickr.js') }}"></script>
    <script src="{{ asset('admin_assets/vendor/libs/sweetalert2/sweetalert2.js') }}"></script>
@endsection

@section('page-script')
    @include('layouts._datatable', [
        'url' => route('admin.notification.index'),
        'header' => trans('admin.notifications_list'),
        'columns' => [
            ['data' => 'id', 'name' => 'id'],
            ['data' => 'title', 'name' => 'title'],
            ['data' => 'message', 'name' => 'message'],
            ['data' => 'target', 'name' => 'target'],
            ['data' => 'user_name', 'name' => 'user.name'],
            ['data' => 'created_at', 'name' => 'created_at'],
            ['data' => 'actions', 'name' => 'actions', 'orderable' => false, 'searchable' => false],
        ]
    ])

    <script>
        $(document).ready(function () {
            flatPickerInitialization($('.flatpickr'), false, 'Y-m-d');
            $(".select2").select2();

            $(".select2-ajax").each(function () {
                $(this).select2({
                    ajax: {
                        url: "{{ route('admin.app_user.select2') }}",
                        dataType: 'json',
                        delay: 250,
                        data: function (params) {
                            return {
                                q: params.term,
                            };
                        },
                        processResults: function (data) {
                            return {
                                results: data.data,
                                pagination: {
                                    more: data.next_page_url !== null
                                }
                            };
                        },
                        cache: true
                    },
                    placeholder: "{{ trans('admin.select_user') }}",
                    allowClear: true
                });
            });

            $('.btn-filter').on('click', function () {
                datatable.ajax.reload();
            });

            $('.btn-reset').on('click', function () {
                $('#filter_form')[0].reset();
                $('.select2, .select2-ajax').val(null).trigger('change');
                datatable.ajax.reload();
            });

            $('.btn-export').on('click', function () {
                var query = $('#filter_form').serialize();
                window.location.href = "{{ route('admin.notification.export') }}?" + query;
            });
        });
    </script>
    @include('layouts._delete')
@endsection