@extends('layouts.app')

@section('title', 'Create Message')

@section('content')
    <div class="container-fluid page-header py-5">
        <div class="container py-5">
            <h1 class="display-3 text-white mb-3 animated slideInDown">Create Message</h1>
            <nav aria-label="breadcrumb animated slideInDown">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a class="text-white" href="{{ route('home.index') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a class="text-white" href="{{ route('messages.index') }}">Messages</a>
                    </li>
                    <li class="breadcrumb-item text-white active" aria-current="page">Create</li>
                </ol>
            </nav>
        </div>
    </div>

    <section class="py-0">
        <div class="container px-0">
            <div class="bg-light rounded-3 py-5 px-4 px-md-5 mb-5">
                <div class="text-center mb-5">
                    <p class="lead fw-normal text-muted mb-0">Complete the form below to send a new message.</p>
                </div>
                <div class="row gx-5 justify-content-center">
                    <div class="col-lg-8 col-xl-6">
                        @include('partials.validation-errors', ['displayErrors' => true])

                        <form action="{{ route('messages.store') }}" method="POST">
                            @csrf
{{--                            <div class="row mb-3">--}}
{{--                                <div class="col">--}}
{{--                                    <label for="recipients[]">Recipient(s)</label>--}}
{{--                                    <select name="recipients[]" id="recipients" class="form-select @error('recipients.*') is-invalid @enderror">--}}
{{--                                        <option value=""></option>--}}
{{--                                        @foreach($users as $user)--}}
{{--                                            <option value="{{ $user->id }}"--}}
{{--                                                {{ in_array($user->id, old('recipients', [])) ? 'selected="selected"' : '' }}>--}}
{{--                                                {{ $user->name }}--}}
{{--                                            </option>--}}
{{--                                        @endforeach--}}
{{--                                    </select>--}}
{{--                                    @error('recipients.*') <div class="invalid-feedback" style="display: inline;">{{ $message }}</div> @enderror--}}
{{--                                </div>--}}
{{--                            </div>--}}
                            <div class="row mb-3">
                                <div class="col">
                                    <label for="recipients">Recipient(s)</label>
                                    <select id="recipients" name="recipients[]" class="form-select @error('recipients.*') is-invalid @enderror"></select>
                                    @error('recipients.*') <div class="invalid-feedback" style="display: inline;">{{ $message }}</div> @enderror
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col">
                                    <div class="form-group">
                                        <label for="subject">Subject</label>
                                        <input type="text" class="form-control @error('subject') is-invalid @enderror" name="subject" value="{{ old('subject') }}" />
                                        @error('subject') <div class="invalid-feedback" style="display: inline;">{{ $message }}</div> @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col">
                                    <div class="form-group">
                                        <label for="message">Message</label>
                                        <textarea name="message" class="form-control @error('message') is-invalid @enderror" rows="5">{{ old('message') }}</textarea>
                                        @error('message') <div class="invalid-feedback" style="display: inline;">{{ $message }}</div> @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <div class="form-group">
                                        <button type="submit" class="btn btn-primary">Send Message</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@stop

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#recipients').select2({
                ajax: {
                    url: '{{ route('messages.users') }}',
                    dataType: 'json'
                },
                multiple: true,
                allowClear: true
            });
        });
    </script>
@endpush