@extends('layouts.admin')

@section('content')
    <h3 class="title">Send a new spam message</h3>

    @if($matches->count())
        <form action="{{ route('admin.spam.send') }}" method="post" id="message-form">
            @csrf

            <input type="hidden" name="to" v-model="to">
            <input type="hidden" name="fake_id" value="{{ old('fake_id', $fake->id) }}">

            <div class="notification is-success">
                <p>A total of <strong>@{{ toIDs.length }}</strong> user(s) will receive this message. </p>
                <p>The message will be sent on behalf of <strong>{{ $fake->name }}</strong>.</p>
                <p>Please fill in the message you would like to send in the text box below.</p>
            </div>

            <div class="field is-horizontal">
                <label for="message" class="field-label is-normal">Message</label>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <textarea name="message" id="message" class="textarea is-fullwidth" required
                                      rows="6" v-model="message" required></textarea>
                        </div>
                    </div>
                </div>
            </div>

            <div class="field is-horizontal">
                <label class="field-label is-normal">Preview</label>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <div class="is-fullwidth has-background-light"
                                 style="min-height: 150px; white-space: pre; padding: 1rem">@{{ message }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="field is-horizontal">
                <label class="field-label is-normal">Count</label>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            Characters: @{{ message.length }} (suggested max 5000 characters)
                        </div>
                    </div>
                </div>
            </div>

            @include('admin.spam._matches-table', ['users' => $matches])

            <div class="field is-horizontal">
                <label class="field-label"></label>
                <div class="field-body">
                    <div class="field">
                        <div class="control">
                            <button type="submit" class="button is-primary">Send Message</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>

    @else
        <div class="notification is-warning">
            <p>No user profiles match the search criteria. Please return to the previous page and adjust the search
                terms.</p>
            <p>
                <a href="{{ route('admin.spam.index') }}" class="button is-primary">Back</a>
            </p>
        </div>
    @endif
@endsection

@if($matches->count())
@section('javascript')
    <script>
      new Vue({
        el: '#message-form',
        data: {
          message: '',
          usersIDs: @json($matches->pluck('id')->toArray()),
          excluded: [],
        },
        computed: {
          excludedIDs () {
            return this.excluded.map(id => parseInt(id, 10))
          },
          toIDs () {
            return this.usersIDs.filter(u => {
              return this.excludedIDs.indexOf(u) === -1
            })
          },
          to () {
            return this.toIDs.join(',')
          }
        }
      })
    </script>
@endsection
@endif