@extends("layouts.admin")
@section('content')

<div class="overflow-hidden shadow-sm sm:rounded-lg bg-white rounded-lg p-6" x-show="activeTab === 'messages'" x-transition x-cloak>
    <form action="{{ route('admin.messages.create') }}" method="POST">
        @csrf
        @method('POST')
    
        <div class="max-w-md mx-auto">
        @include('partials._user-select')
            <div class="mb-6">
                <label for="subject" class="block mb-2 text-sm font-medium text-gray-900">Subject</label>
                <input type="text" id="subject" name="subject"
                    class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-200 focus:border-blue-300 block w-full p-2.5 font-san-serif"
                @error('subject')
                    <span class="text-red-500">{{ $message }}</span>
                @enderror
            </div>

            <div>
                <label for="content" class="block mb-2 text-sm font-medium text-gray-900">Your message</label>
                <textarea id="content" name="content" rows="4"
                    class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-200 focus:border-blue-300 font-san-serif"></textarea>
                @error('content')
                    <span class="text-red-500">{{ $message }}</span>
                @enderror
            </div>

            <div class="mt-5">
                <div class="bg-white rounded-lg p-6 shadow">
                    <div class="grid w-full gap-6 md:grid-cols-2">
                        <input type="submit"
                            class="p-2 bg-green-600 text-green-100 mt-4 text-normal hover:bg-green-400 rounded w-full md:w-auto"
                            value="Create Message"/>
                        <button
                            class="mt-2 md:mt-0 font-bold text-xl hover:text-gray-500 w-full md:w-auto"
                            <i class="fa-solid fa-arrow-left"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection