@extends('admin.layouts.app')

@section('title', 'Yeni Kullanıcı')
@section('page_title', 'Yeni Kullanıcı Oluştur')

@section('content')
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-0 text-gray-800">Yeni Kullanıcı</h1>
                <p class="mb-0 text-muted">Sisteme yeni kullanıcı ekleyin</p>
            </div>
            <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>
                Geri Dön
            </a>
        </div>

        <form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
                <!-- Left Column -->
                <div class="col-lg-8">
                    <!-- Basic Information -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-user me-2"></i>
                                Temel Bilgiler
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="first_name" class="form-label">Ad <span
                                            class="text-danger">*</span></label>
                                    <input type="text"
                                           class="form-control @error('first_name') is-invalid @enderror"
                                           id="first_name"
                                           name="first_name"
                                           value="{{ old('first_name') }}"
                                           required>
                                    @error('first_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="last_name" class="form-label">Soyad <span
                                            class="text-danger">*</span></label>
                                    <input type="text"
                                           class="form-control @error('last_name') is-invalid @enderror"
                                           id="last_name"
                                           name="last_name"
                                           value="{{ old('last_name') }}"
                                           required>
                                    @error('last_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">E-posta <span
                                            class="text-danger">*</span></label>
                                    <input type="email"
                                           class="form-control @error('email') is-invalid @enderror"
                                           id="email"
                                           name="email"
                                           value="{{ old('email') }}"
                                           required>
                                    @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="phone" class="form-label">Telefon</label>
                                    <input type="tel"
                                           class="form-control @error('phone') is-invalid @enderror"
                                           id="phone"
                                           name="phone"
                                           value="{{ old('phone') }}"
                                           placeholder="+90 555 123 45 67">
                                    @error('phone')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="national_id" class="form-label">TC Kimlik No</label>
                                    <input type="text"
                                           class="form-control @error('national_id') is-invalid @enderror"
                                           id="national_id"
                                           name="national_id"
                                           value="{{ old('national_id') }}"
                                           maxlength="11">
                                    @error('national_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="birth_date" class="form-label">Doğum Tarihi</label>
                                    <input type="date"
                                           class="form-control @error('birth_date') is-invalid @enderror"
                                           id="birth_date"
                                           name="birth_date"
                                           value="{{ old('birth_date') }}">
                                    @error('birth_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="gender" class="form-label">Cinsiyet</label>
                                    <select class="form-select @error('gender') is-invalid @enderror" id="gender"
                                            name="gender">
                                        <option value="">Seçiniz</option>
                                        <option value="male" {{ old('gender') === 'male' ? 'selected' : '' }}>Erkek
                                        </option>
                                        <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>
                                            Kadın
                                        </option>
                                        <option value="other" {{ old('gender') === 'other' ? 'selected' : '' }}>Diğer
                                        </option>
                                    </select>
                                    @error('gender')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Security -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-lock me-2"></i>
                                Güvenlik
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="password" class="form-label">Şifre <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="password"
                                               class="form-control @error('password') is-invalid @enderror"
                                               id="password"
                                               name="password"
                                               required>
                                        <button class="btn btn-outline-secondary" type="button"
                                                onclick="togglePassword('password')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                    @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <div class="form-text">En az 8 karakter olmalıdır</div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="password_confirmation" class="form-label">Şifre Tekrar <span
                                            class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="password"
                                               class="form-control"
                                               id="password_confirmation"
                                               name="password_confirmation"
                                               required>
                                        <button class="btn btn-outline-secondary" type="button"
                                                onclick="togglePassword('password_confirmation')">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Address Information -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-map-marker-alt me-2"></i>
                                Adres Bilgileri
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label for="address" class="form-label">Adres</label>
                                    <textarea class="form-control @error('address') is-invalid @enderror"
                                              id="address"
                                              name="address"
                                              rows="3">{{ old('address') }}</textarea>
                                    @error('address')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="city" class="form-label">Şehir</label>
                                    <input type="text"
                                           class="form-control @error('city') is-invalid @enderror"
                                           id="city"
                                           name="city"
                                           value="{{ old('city') }}">
                                    @error('city')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="country" class="form-label">Ülke</label>
                                    <select class="form-select @error('country') is-invalid @enderror" id="country"
                                            name="country">
                                        <option value="TR" {{ old('country', 'TR') === 'TR' ? 'selected' : '' }}>
                                            Türkiye
                                        </option>
                                        <option value="US" {{ old('country') === 'US' ? 'selected' : '' }}>Amerika
                                        </option>
                                        <option value="DE" {{ old('country') === 'DE' ? 'selected' : '' }}>Almanya
                                        </option>
                                    </select>
                                    @error('country')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="postal_code" class="form-label">Posta Kodu</label>
                                    <input type="text"
                                           class="form-control @error('postal_code') is-invalid @enderror"
                                           id="postal_code"
                                           name="postal_code"
                                           value="{{ old('postal_code') }}">
                                    @error('postal_code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="col-lg-4">
                    <!-- Avatar -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-image me-2"></i>
                                Profil Fotoğrafı
                            </h5>
                        </div>
                        <div class="card-body text-center">
                            <div class="avatar-upload-wrapper mb-3">
                                <div class="avatar-preview" id="avatarPreview">
                                    <div
                                        class="avatar-placeholder rounded-circle mx-auto d-flex align-items-center justify-content-center"
                                        style="width: 120px; height: 120px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; font-weight: 600; font-size: 36px;">
                                        <i class="fas fa-user"></i>
                                    </div>
                                </div>
                            </div>
                            <input type="file"
                                   class="form-control @error('avatar') is-invalid @enderror"
                                   id="avatar"
                                   name="avatar"
                                   accept="image/*"
                                   onchange="previewAvatar(this)">
                            @error('avatar')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">JPG, PNG veya GIF formatında, maksimum 2MB</div>
                        </div>
                    </div>

                    <!-- Roles -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-user-tag me-2"></i>
                                Roller
                            </h5>
                        </div>
                        <div class="card-body">
                            @foreach($roles as $role)
                                <div class="form-check mb-2">
                                    <input class="form-check-input"
                                           type="checkbox"
                                           value="{{ $role->name }}"
                                           id="role_{{ $role->id }}"
                                           name="roles[]"
                                        {{ in_array($role->name, old('roles', [])) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="role_{{ $role->id }}">
                                        <strong>{{ ucfirst($role->name) }}</strong>
                                        @if($role->description)
                                            <div class="form-text small">{{ $role->description }}</div>
                                        @endif
                                    </label>
                                </div>
                            @endforeach
                            @error('roles')
                            <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-toggle-on me-2"></i>
                                Durum Ayarları
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input"
                                       type="checkbox"
                                       id="is_active"
                                       name="is_active"
                                       value="1"
                                    {{ old('is_active', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_active">
                                    <strong>Aktif Kullanıcı</strong>
                                    <div class="form-text">Kullanıcının sisteme giriş yapabilmesi</div>
                                </label>
                            </div>
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input"
                                       type="checkbox"
                                       id="is_verified"
                                       name="is_verified"
                                       value="1"
                                    {{ old('is_verified') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_verified">
                                    <strong>E-posta Doğrulanmış</strong>
                                    <div class="form-text">E-posta adresinin doğrulandığını işaretle</div>
                                </label>
                            </div>
                            <div class="form-check form-switch mb-3">
                                <input class="form-check-input"
                                       type="checkbox"
                                       id="email_notifications"
                                       name="email_notifications"
                                       value="1"
                                    {{ old('email_notifications', true) ? 'checked' : '' }}>
                                <label class="form-check-label" for="email_notifications">
                                    <strong>E-posta Bildirimleri</strong>
                                    <div class="form-text">Sistem bildirimlerini e-posta ile gönder</div>
                                </label>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input"
                                       type="checkbox"
                                       id="sms_notifications"
                                       name="sms_notifications"
                                       value="1"
                                    {{ old('sms_notifications') ? 'checked' : '' }}>
                                <label class="form-check-label" for="sms_notifications">
                                    <strong>SMS Bildirimleri</strong>
                                    <div class="form-text">Önemli bildirimleri SMS ile gönder</div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Agency -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-building me-2"></i>
                                Acente Bilgileri
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="agency_id" class="form-label">Acente</label>
                                <select class="form-select @error('agency_id') is-invalid @enderror" id="agency_id"
                                        name="agency_id">
                                    <option value="">Acente Seçiniz</option>
                                    @foreach($agencies as $agency)
                                        <option
                                            value="{{ $agency->id }}" {{ old('agency_id', $user->agency_id ?? '') == $agency->id ? 'selected' : '' }}>
                                            {{ $agency->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('agency_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="position" class="form-label">Pozisyon</label>
                                <input type="text"
                                       class="form-control @error('position') is-invalid @enderror"
                                       id="position"
                                       name="position"
                                       value="{{ old('position') }}"
                                       placeholder="Satış Temsilcisi, Muhasebeci vb.">
                                @error('position')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label for="hired_at" class="form-label">İşe Başlama Tarihi</label>
                                <input type="date"
                                       class="form-control @error('hired_at') is-invalid @enderror"
                                       id="hired_at"
                                       name="hired_at"
                                       value="{{ old('hired_at') }}">
                                @error('hired_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input"
                                       type="checkbox"
                                       id="is_agency_owner"
                                       name="is_agency_owner"
                                       value="1"
                                    {{ old('is_agency_owner') ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_agency_owner">
                                    <strong>Acente Sahibi</strong>
                                    <div class="form-text">Bu kullanıcı acente sahibi mi?</div>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="card">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-1"></i>
                            İptal
                        </a>
                        <div class="d-flex gap-2">
                            <button type="submit" name="action" value="save_and_continue"
                                    class="btn btn-outline-primary">
                                <i class="fas fa-save me-1"></i>
                                Kaydet ve Devam Et
                            </button>
                            <button type="submit" name="action" value="save" class="btn btn-primary">
                                <i class="fas fa-check me-1"></i>
                                Kullanıcıyı Oluştur
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script>
        function togglePassword(fieldId) {
            const field = document.getElementById(fieldId);
            const button = field.nextElementSibling;
            const icon = button.querySelector('i');

            if (field.type === 'password') {
                field.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
            } else {
                field.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
            }
        }

        function previewAvatar(input) {
            const preview = document.getElementById('avatarPreview');

            if (input.files && input.files[0]) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    preview.innerHTML = `<img src="${e.target.result}" alt="Preview" class="rounded-circle" style="width: 120px; height: 120px; object-fit: cover;">`;
                }

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endpush