@extends('app')
@section('content')
    <div class=" flex flex-col items-center justify-center p-4 " dir="rtl"
         style="padding-top: 50px">

        <div class="ui-card ui-card-body w-[350px] max-w-sm" style="border-top: 4px solid var(--primary-color);">
            <div class="text-center mb-6">
                <h1 class="ui-title border-b border-gray-300 pb-2">کاربر جدید</h1>
            </div>

            <form id="attendanceForm" action="{{route('admin.new')}}" method="post" class="space-y-4">
                @csrf

                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700">اسم:</label>
                    <input type="text" name="name" id="name" required
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm transition duration-150">
                </div>

                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">ایمیل:</label>
                    <input type="email" name="email" id="email" placeholder="example@domain.com"
                           pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm transition duration-150">
                </div>

                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700">نام کاربری:</label>
                    <input type="text" name="username" id="username" placeholder="user_name" required
                           class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm transition duration-150">
                </div>

                <div class="flex flex-col sm:flex-row sm:space-x-4 sm:space-x-reverse space-y-4 sm:space-y-0">

                    <div class="w-full sm:w-1/2">
                        <label for="chatid" class="block text-sm font-medium text-gray-700">چت آیدی تلگرام:</label>
                        <input type="text" name="chatid" id="chatid" placeholder="Telegram chat ID"
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm transition duration-150">
                    </div>

                    <div class="w-full sm:w-1/2">
                        <label for="number" class="block text-sm font-medium text-gray-700">شماره تماس:</label>
                        <input type="tel" name="number" id="number" placeholder=" ۰۹۱2xxxxxxx" pattern="[0-9]{11}"
                               required
                               class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 sm:text-sm transition duration-150">
                    </div>

                </div>
                <div class="flex justify-center">
                    <button type="submit"
                            class="col-span-2 bg-cyan-500 hover:bg-cyan-700 cursor-pointer rounded-xl border border-400 justify-self-center text-white px-2 py-1.5">
                        ثبت اطلاعات
                    </button>
                </div>
            </form>
        </div>

    </div>
@endsection