@extends('layouts.admin.app')
@section('title', __('trans.notification.title'))



@section('content')

    <div class="card">
        <h5 class="card-header">{{ __('trans.notification.send_notification') }}</h5>
        <div class="card-body">
            <form action="{{ route('notification.send') }}" method="post">
                @csrf

                <div class="col-md-12 mb-3">
                    <label class="form-label">{{ __('trans.notification.type') }}</label>
                    <select name="type" class="form-select" id="type">
                        <option value="token" @selected(old('type') == 'token')>Token</option>
                        <option value="topic" @selected(old('type') == 'topic')>Topic</option>
                    </select>
                </div>

                <div class="col-md-12 mb-3">
                    <label class="form-label">{{ __('trans.notification.notification_title') }} <b
                            class="text-danger">*</b></label>
                    <input type="text" class="form-control" required name="title" value="{{ old('title') }}"
                        placeholder="{{ __('trans.notification.notification_title') }}" required />
                </div>

                <div class="col-md-12 mb-3">
                    <label class="form-label">{{ __('trans.notification.body') }} <b class="text-danger">*</b></label>
                    <input type="text" class="form-control" required name="body" value="{{ old('body') }}"
                        placeholder="{{ __('trans.notification.body') }}" required />
                </div>

                <div class="col-md-12 mb-3">
                    <div class="input-group">
                        <label>{{ __('trans.notification.image_url') }}</label>

                        <div class="input-group">
                            <span class="input-group-btn">
                                <a id="lfm" data-input="thumbnail" data-preview="holder"
                                    class="UploadFile btn btn-primary">
                                    <i class="fa fa-picture-o"></i> {{ __('trans.choose') }}
                                </a>
                            </span>
                            <input id="thumbnail" class="form-control" type="text" name="img"
                                value="{{ old('img') }}" readonly />
                        </div>
                    </div>

                    <div id="holder" style="margin-top:15px;max-height:100px;">
                        @if (!empty(old('img', '/admin/img/doctorito-logo.png')))
                            <img src="{{ old('img', '/admin/img/doctorito-logo.png') }}" style="height: 5rem;">
                        @endif
                    </div>
                </div>
                <div class="col-md-12 mb-3" id="topic" style="display: none;">
                    <label class="form-label">{{ __('trans.notification.topic') }}</label>
                    <input type="text" class="form-control" name="topic" value="{{ old('topic') }}"
                        placeholder="{{ __('trans.notification.topic') }}" id="topic_input" />
                </div>

                <div class="col-md-12 mb-3" id="users">
                    <label class="form-label">{{ __('trans.users') }} <b class="text-danger">*</b></label>
                    <select name="users_ids[]" class="select2 form-select" id="users_input" multiple required>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}">
                                {{ $user->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-12 mt-5">
                    <button type="submit" class="btn btn-sm btn-info">SEND</button>
                </div>
            </form>
        </div>
    </div>


@endsection

@section('js')

    <script>
        $(document).ready(function() {
            $("#type").change(function() {

                $('#topic, #users').toggle('slow');

                if ($('#topic').is(':visible')) {
                    $("#topic_input").attr('required', true);
                    $("#users_input").removeAttr('required');
                } else {
                    $("#topic_input").removeAttr('required');
                    $("#users_input").attr('required', true);
                }
            });
        });
    </script>

@endsection