<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Messages') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="grid place-items-center">
            <form action="{{ route('get.messages') }}" method="POST" class="w-[600px] bg-white rounded-md shadow-md p-5">
                @csrf
                <span class="text-lg">Select Number to get Message</span>
                <div class="pt-4">
                    <select class="w-full rounded-md" name="tzid">
                        @foreach ($numbers as $number)
                        <option value="{{ $number->tzid }}">{{ $number->number }} </option>
                        @endforeach
                    </select>
                    <div class="pt-4"></div>
                    @if (session()->has('message'))
                    Your message: {{ session()->get('message') }}
                    @endif
                    @if (session()->has('error'))
                    {{ session()->get('error') }}
                    @endif

                    <div class="pt-4"></div>
                    <button class="rounded-md bg-blue-500 px-4 py-2 text-white"> Get Message </button>
                </div>

            </form>
        </div>
</x-app-layout>
