@extends('layouts.app')

@section('content')

    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Send Whatsapp Messages</h3>
        </div>
        <div class="panel-body">

            @if(session()->has('success'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <strong>Success!</strong> {{ session('success') }}.
                </div>
            @endif


            <form action="{{ route('whatsapp.send.notification') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="form-group col-md-4 @error('type') has-error @enderror ">
                        <label for="user_ids">Select User(s)</label>
                        <select name="user_phones[]" id="user_phones" class="form-control select2" multiple>
                            <option value="" style="display: none;">Select User(s)</option>
                            {{-- <option value="All">All Users</option>--}}
                            @foreach($usersWithPhoneNumbers as $userId => $userName)
                                <option value="{{ $userId }}"
                                        @if(in_array($userId, old('user_ids',[]) )) selected @endif >{{ $userName }}</option>
                            @endforeach
                        </select>
                        @error('user_ids')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="form-group col-md-4 @error('title') has-error @enderror ">
                        <label for="name">Notification Title</label>
                        <input type="text" name="title" id="title" class="form-control "
                               value="{{old('title')}}" autocomplete="off" placeholder="Notification Title">
                        @error('title')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>

                    <div class="form-group col-md-4 @error('body') has-error @enderror ">
                        <label for="body">Notification Body</label>
                        <input type="text" name="body" id="body" class="form-control"
                               value="{{old('body')}}" autocomplete="off" placeholder="Notification body">
                        @error('body')
                        <small class="form-text text-danger">{{ $message }}</small>
                        @enderror
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-md-3">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>

                </div>
            </form>

        </div>


        @endsection

        @push('script')

            <script>

                $(function () {
                    $('.select2').select2({
                        placeholder: 'Select from user(s)'
                    });
                });
            </script>
    @endpush