@extends('Admin.Layouts.Dashboard')

@section('styles')
{{--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />--}}
{{--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-lite.min.css" />--}}
@endsection

@section('content')
    <div class="modal fade" id="refuse-request" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document"></div>
    </div>

    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">الحسابات</h4>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">/ العقارات</span>
                <span class="text-muted mt-1 tx-13 ms-2 mb-0">/ {{$page_title}}</span>
            </div>
        </div>
    </div>

    <!-- Row -->
    <div class="row row-sm">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title" id="exampleModalLabel">{{$page_title}}</h5>
                </div>

                <div class="card-body">

                    @include('Messages')

                    <form method="post" id="form-store" action="{{dashboard_route('notifications.send')}}" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group required">
                            <label for="title">عنوان الاشعار</label>
                            <input type="text" id="title" name="title" value="{{old('title')}}" class="form-control" required />
                        </div>

                        <div class="form-group required">
                            <label for="message">محتوى الاشعار</label>
                            <textarea name="message" id="message" class="form-control" cols="30" rows="10">{{old('message')}}</textarea>
                        </div>

                        <div class="form-group">
                            <label for="application">التطبيق</label>

                            <select class="select2 form-control w-100" id="application" name="application" required>
                                <option value="mabeet">تطبيق مبيت</option>
                                <option value="partners">تطبيق شركاء مبيت</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="send_to">ارسال الاشعار الى</label>
                            <select class="select2 form-control w-100" id="send_to" name="users[]" multiple></select>
                        </div>

                        <div class="form-group">
                            <label for="image">ارفاق صورة (اختياري)</label>
                            <input type="file" accept="image/*" name="image" id="image" class="form-control" />
                        </div>

                        <button type="submit" id="send-messages" class="btn btn-success button-icon"><i class="fa fa-envelope me-1"></i> ارسال الاشعارات </button>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        getUsers($('#application').val())

        $('#application').on('change', function (){
            const type = $(this).val();
            getUsers(type);
        });

        function getUsers(type) {
            let url = '{{dashboard_route('notifications.users', ':type')}}'

            url = url.replace(':type', type);

            console.log(url);

            $('#send_to').select2({
                placeholder: '',
                allowClear: true,
                ajax: {
                    url: url,
                    dataType: 'json',
                    cache: true,
                    processResults: function (data) {
                        return {
                            results: data.data
                        };
                    }
                }
            });
        }
    </script>
@endsection