@extends('template.layout')
@section('styles')
    <style>
        .select2-container {
            width: 100% !important;
        }
    </style>
@endsection
@section('content')
    <h1 class="page-title">
        Chat
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title col-12">
            <div class="caption col-md-9">
                <h4>Crear mensaje</h4>
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <form action="{{ route('messages.store') }}" method="post">
                    {{ csrf_field() }}
                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="control-label">Usuario</label>
                            <select id="usuario" class="select2" style="width:100% !important;" required="required" name="recipients[]">
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->nombres }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Sujeto</label>
                            <input type="text" class="form-control" name="subject" placeholder="Titulo"
                                   value="{{ old('subject') }}" required>
                        </div>

                        <div class="form-group">
                            <label class="control-label">Mensajes</label>
                            <textarea name="message" class="form-control" required>{{ old('message') }}</textarea>
                        </div>

                        <div class="form-group">
                            <button type="submit" class="btn btn-primary form-control">Enviar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('scripts')
    <script>
        $('.select2').select2({
            placeholder: "Seleccionar",
            width: "auto",
            allowClear: !0
        });

    </script>
@endsection