@extends('layouts.app')

@push('styles')
    <link rel="stylesheet" href="{{asset('assets/css/custom_uploader.css')}}">
@endpush

@section('title')
    Notification
@endsection

@section('page_header')
    <!-- Basic button -->
    <div class="page-header page-header-light border rounded mb-3">
        <div class="page-header-content d-flex">
            <div class="page-title">
                <h5 class="mb-0">Section Notification</h5>
                <div class="text-muted mt-1"></div>
            </div>
            <div class="my-auto ms-auto">

            </div>
        </div>
        <div class="page-header-content border-top">
            <div class="breadcrumb">
                <a href="/" class="breadcrumb-item py-2">@lang('translate.home')</a>
                <span class="breadcrumb-item active py-2">Notification</span>
            </div>
        </div>
    </div>
    <!-- /basic button -->
@endsection

@section('content')

    <div class="card">
        <div class="card-body">
            <form method="post" action="{{route('notifications.send')}}" class="form-validate-jquery main_form"
                  id="main_form">
                @csrf
                <div class="form-group {{ $errors->has('title') ? ' has-error' : '' }}">
                    <label for="title">Title</label>
                    <div class="input-group mb-3">
                        <input type="text" name="title" required class="form-control" id="title"
                               placeholder="Hello Everyone !!" value="{{old('title')}}" data-maxlength="120">
                        <div class="input-group-append">
                            <span class="input-group-text">120</span>
                        </div>
                    </div>

                </div>

                <div class="form-group">
                    <label for="short_description">Short Description</label>
                    <div class="input-group">
                        <textarea name="short_description" required id="short_description" class="form-control"
                                  placeholder="You Can Buy Course And Have Fun .. " data-maxlength="220"></textarea>
                        <div class="input-group-append">
                            <span class="input-group-text">220</span>
                        </div>
                    </div>
                </div>


                <!-- Switchery single -->
               <div class="row">
                   <div class="col-lg-6">
                       <div class="form-group row">
                           <label class="col-lg-3 col-form-label">Send Type</label>

                           <select name="send_type" id="send_type" class="form-control">
                               <option value="all">All Users</option>
                               <option value="specific">Specific User</option>
                           </select>

                       </div>
                   </div>

                   <div class="col-lg-6 user_select d-none">
                       <div class="form-group row">
                           <label class="col-lg-3 col-form-label">Users</label>

                           <select name="user_id[]" id="user_id" class="form-control" multiple>

                           </select>

                       </div>
                   </div>
               </div>
                <!-- /switchery single -->

                <div class="form-group">
        <label for="image">Optional Image</label>
        <input type="file" name="image" class="form-control" id="image" accept="image/*">
        <small class="form-text text-muted">You can upload an optional image for the notification (JPEG, PNG).</small>
    </div>

    <div class="text-end">
        <button type="submit" class="btn btn-dark submit_form">@lang('translate.submit')<i
                class="icon-paperplane ms-2 send_icon"></i></button>
    </div>
</form>
            </form>

        </div>
    </div>

@endsection


@push('scripts')
    <script src="{{asset("global_assets/js/plugins/forms/selects/select2.min.js")}}"></script>
    <script>


        $("#user_id").select2({
            placeholder: "Search For Users",
            ajax: {
                url: "{{route('users.get_users')}}",
                type: "post",
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        _token: "{{csrf_token()}}",
                        search: params.term // search term
                    };
                },
                processResults: function (response) {

                    var results = [];
                    for (var i = 0; i < response.length; i++) {
                        results.push({
                            id: response[i].id,
                            text: response[i].text,
                            disabled: response[i].locked === 1
                        });
                    }
                    return {
                        results: results
                    };
                },
                cache: true
            }

        });


        $(document).ready(function () {

            $("#send_type").select2();
            $("#send_type").change(function () {
                var type = $(this).val();
                if (type == 'all') {
                    $(".user_select").addClass('d-none')
                } else {
                    $(".user_select").removeClass('d-none')
                }
            });




        })
    </script>

@endpush