@extends('layouts.app')

@php
    $mainClass = 'lg:w-[80%] w-full flex flex-col bg-[#f7f7f7]'
@endphp

@section('title', 'اضافه کردن کاربر | نیکس فایل')

@section('aside-content')
    <aside class=" w-full lg:w-[20%] flex flex-col mb-4">
        <div class="bg-primary-color text-white text-left py-8">
            @include('components.header')
        </div>
        @include('components.admin-panel-sidebar')
    </aside>
@endsection

@section('content')
    <div class="container mx-auto w-[80%] flex justify-center items-center mb-12 grow">

        <div class="shadow-lg bg-white rounded-2xl mt-12 p-8 w-full max-w-md flex flex-col items-center gap-6">
            <h2 class="text-2xl font-semibold text-primary-color mb-4">فرم اضافه کردن کاربر</h2>
            <form action="{{ route('user.store') }}" method="POST" class="flex w-full flex-col gap-4">
                @csrf

                <!-- Name Input -->
                <div class="flex flex-col gap-2">
                    <label for="name" class="text-gray-700 font-medium">نام کاربر</label>
                    <input
                        type="text"
                        name="name"
                        id="name"
                        value="{{ old('name') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-color"
                        placeholder="نام (اختیاری)"
                    >
                    @error('name')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Email Input -->
                <div class="flex flex-col gap-2">
                    <label for="email" class="text-gray-700 font-medium">ایمیل کاربر</label>
                    <input
                        type="email"
                        name="email"
                        id="email"
                        value="{{ old('email') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-color"
                        placeholder="ایمیل (اختیاری)"
                    >
                    @error('email')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Password Input -->
                <div class="flex flex-col gap-2">
                    <label for="password" class="text-gray-700 font-medium">پسوورد کاربر</label>
                    <input
                        type="password"
                        name="password"
                        id="password"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-color"
                        placeholder="رمز عبور (اختیاری)"
                    >
                    @error('password')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Phone Input -->
                <div class="flex flex-col gap-2">
                    <label for="phone" class="text-gray-700 font-medium">شماره موبایل <span class="text-primary-color">*</span></label>
                    <input
                        type="text"
                        name="phone"
                        id="phone"
                        value="{{ old('phone') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-color"
                        placeholder="شماره موبایل"
                    >
                    @error('phone')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Gender Selection -->
                <div class="flex flex-col gap-2">
                    <label for="gender" class="text-gray-700 font-medium">جنسیت</label>
                    <select
                        id="gender"
                        name="gender"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-color"
                    >
                        <option value="" disabled selected>انتخاب جنسیت</option>
                        <option value="male" {{ old('gender') === 'male' ? 'selected' : '' }}>مرد</option>
                        <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>زن</option>
                    </select>
                    @error('gender')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Role Selection -->
                <div class="flex flex-col gap-2">
                    <label for="role" class="text-gray-700 font-medium">نقش <span class="text-primary-color">*</span></label>
                    <select
                        id="role"
                        name="role"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-color"
                    >
                        <option value="legend">مدیر کل</option>
                        <option value="admin">مدیر</option>
                        <option value="plusing">پلاسینگ</option>
                        <option value="premium_diamond">الماس</option>
                        <option value="premium_gold">طلایی</option>
                        <option value="premium">ویژه</option>
                        <option value="subscriber" selected>کاربر</option>
                    </select>
                    @error('role')
                    <p class="text-red-500 text-sm">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Submit Button -->
                <div class="flex justify-center mt-4 gap-2">
                    <button
                        type="submit"
                        class="bg-primary-color text-white py-2 rounded-lg w-full hover:bg-primary-dark transition duration-200 text-center"
                    >
                        ساخت کاربر
                    </button>
                    <a
                        href="{{ route('user.index') }}"
                        class="ml-2 bg-secondary-color text-white py-2 rounded-lg w-full hover:bg-red-600 transition duration-200 text-center"
                    >
                        بازگشت
                    </a>
                </div>
            </form>
        </div>

    </div>

@endsection