@extends('admin.layouts.app')

@section('title', 'Yeni Üye Ekle - CBL Admin Panel')
@section('content')
<div class="space-y-6">
    <!-- Page header -->
    <div class="bg-white shadow rounded-lg">
        <div class="px-4 py-5 sm:p-6">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-2xl font-bold text-gray-900">Yeni Üye Ekle</h1>
                    <p class="mt-1 text-sm text-gray-500">Sisteme yeni üye kaydı oluşturun.</p>
                </div>
                <div class="flex space-x-3">
                    <a href="{{ route('admin.members') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Geri Dön
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Form -->
    <div class="bg-white shadow rounded-lg">
        <form action="{{ route('admin.members.store') }}" method="POST">
            @csrf
            <div class="px-4 py-5 sm:p-6 space-y-6">
                <!-- Personal Info Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- First Name -->
                    <div>
                        <label for="adi" class="block text-sm font-medium text-gray-700 mb-1">Ad</label>
                        <input type="text" name="adi" id="adi" value="{{ old('adi') }}" required
                               class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('adi') border-red-300 @enderror"
                               placeholder="Ad girin">
                        @error('adi')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Last Name -->
                    <div>
                        <label for="soyadi" class="block text-sm font-medium text-gray-700 mb-1">Soyad</label>
                        <input type="text" name="soyadi" id="soyadi" value="{{ old('soyadi') }}" required
                               class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('soyadi') border-red-300 @enderror"
                               placeholder="Soyad girin">
                        @error('soyadi')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Contact Info Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Email -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">E-posta</label>
                        <input type="email" name="email" id="email" value="{{ old('email') }}" required
                               class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('email') border-red-300 @enderror"
                               placeholder="E-posta adresi girin">
                        @error('email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Phone -->
                    <div>
                        <label for="tel" class="block text-sm font-medium text-gray-700 mb-1">Telefon</label>
                        <input type="tel" name="tel" id="tel" value="{{ old('tel') }}"
                               class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('tel') border-red-300 @enderror"
                               placeholder="Telefon numarası girin">
                        @error('tel')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Personal Info Section -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- Gender -->
                    <div>
                        <label for="cinsiyet" class="block text-sm font-medium text-gray-700 mb-1">Cinsiyet</label>
                        <select name="cinsiyet" id="cinsiyet"
                                class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('cinsiyet') border-red-300 @enderror">
                            <option value="">Cinsiyet seçin</option>
                            <option value="Erkek" {{ old('cinsiyet') == 'Erkek' ? 'selected' : '' }}>Erkek</option>
                            <option value="Kadın" {{ old('cinsiyet') == 'Kadın' ? 'selected' : '' }}>Kadın</option>
                        </select>
                        @error('cinsiyet')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Profession -->
                    <div>
                        <label for="meslek" class="block text-sm font-medium text-gray-700 mb-1">Meslek</label>
                        <input type="text" name="meslek" id="meslek" value="{{ old('meslek') }}"
                               class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('meslek') border-red-300 @enderror"
                               placeholder="Meslek girin">
                        @error('meslek')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- City -->
                    <div>
                        <label for="sehir" class="block text-sm font-medium text-gray-700 mb-1">Şehir</label>
                        <input type="text" name="sehir" id="sehir" value="{{ old('sehir') }}"
                               class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('sehir') border-red-300 @enderror"
                               placeholder="Şehir girin">
                        @error('sehir')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Status and Permission Section -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <!-- Status -->
                    <div>
                        <label for="onay" class="block text-sm font-medium text-gray-700 mb-1">Durum</label>
                        <select name="onay" id="onay"
                                class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('onay') border-red-300 @enderror">
                            <option value="1" {{ old('onay', 1) == 1 ? 'selected' : '' }}>Aktif</option>
                            <option value="0" {{ old('onay') == 0 ? 'selected' : '' }}>Pasif</option>
                        </select>
                        @error('onay')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Permission -->
                    <div>
                        <label for="yetki" class="block text-sm font-medium text-gray-700 mb-1">Yetki</label>
                        <select name="yetki" id="yetki"
                                class="block w-full border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 sm:text-sm @error('yetki') border-red-300 @enderror">
                            <option value="0" {{ old('yetki', 0) == 0 ? 'selected' : '' }}>Üye</option>
                            <option value="1" {{ old('yetki') == 1 ? 'selected' : '' }}>Yönetici</option>
                            <option value="2" {{ old('yetki') == 2 ? 'selected' : '' }}>Editör</option>
                        </select>
                        @error('yetki')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Form Actions -->
                <div class="flex items-center justify-end space-x-3 pt-6 border-t border-gray-200">
                    <a href="{{ route('admin.members') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-colors duration-200">
                        İptal
                    </a>
                    <button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                        <i class="fas fa-check mr-2"></i>
                        Üye Ekle
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection