@extends('agency.layouts.app')

@section('title', 'Yeni Personel Ekle')

@section('page_title', 'Yeni Personel Ekle')

@php
    $breadcrumbs = [
        ['title' => 'Dashboard', 'url' => route('agency.dashboard')],
        ['title' => 'Personel ve Yetki', 'url' => '#'],
        ['title' => 'Personeller', 'url' => route('agency.staff-management.staff.index')],
        ['title' => 'Yeni Personel Ekle', 'url' => '']
    ];
@endphp

@section('content')
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger alert-permanent mb-4">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <ul class="nav nav-pills mb-4 gap-2" id="staffTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active px-4 fw-medium" id="new-staff-tab" data-bs-toggle="pill"
                    data-bs-target="#new-staff" type="button" role="tab">
                    <i class="fas fa-user-plus me-2"></i>Yeni Personel Kaydı Doğrudan
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link px-4 fw-medium" id="invite-user-tab" data-bs-toggle="pill"
                    data-bs-target="#invite-user" type="button" role="tab">
                    <i class="fas fa-envelope-open-text me-2"></i>Sistem Kullanıcısını Davet Et
                </button>
            </li>
        </ul>

        <div class="tab-content" id="staffTabContent">
            <!-- TAB 1: DOĞRUDAN EKLEME -->
            <div class="tab-pane fade show active" id="new-staff" role="tabpanel">
                <form action="{{ route('agency.staff-management.staff.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="action_type" value="create_staff">

                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card shadow-sm border-0 mb-4">
                                <div class="card-header bg-white py-3">
                                    <h5 class="mb-0 fw-bold"><i class="fas fa-user-circle text-primary me-2"></i>Kişisel
                                        Bilgiler</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold">Ad</label>
                                            <input type="text" name="first_name" class="form-control"
                                                value="{{ old('first_name') }}" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold">Soyad</label>
                                            <input type="text" name="last_name" class="form-control"
                                                value="{{ old('last_name') }}" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold">E-Posta Adresi (İsteğe Bağlı)</label>
                                            <input type="email" name="email" class="form-control"
                                                value="{{ old('email') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold">Telefon (İsteğe Bağlı)</label>
                                            <input type="text" name="phone" class="form-control" value="{{ old('phone') }}">
                                        </div>
                                    </div>

                                    <hr class="my-4">

                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="create_login_user" value="1"
                                            id="createLoginUser" {{ old('create_login_user') ? 'checked' : '' }}
                                            onchange="toggleLoginFields()">
                                        <label class="form-check-label fw-bold" for="createLoginUser">Bu personel için
                                            sisteme giriş hesabı oluştur</label>
                                    </div>

                                    <div class="row g-3" id="loginFields"
                                        style="{{ old('create_login_user') ? '' : 'display: none;' }}">
                                        <div class="col-12">
                                            <div class="alert alert-info py-2 mb-0 small">
                                                <i class="fas fa-info-circle me-1"></i> Sisteme giriş hesabı oluşturmak
                                                e-posta adresini zorunlu kılar.
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold">Giriş Şifresi</label>
                                            <input type="password" name="password" id="passwordInput" class="form-control">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold">Şifre Tekrar</label>
                                            <input type="password" name="password_confirmation" id="passwordConfirmInput"
                                                class="form-control">
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label fw-bold">Rol Tanımı <span
                                                    class="text-danger">*</span></label>
                                            <select name="role_id" id="roleInput" class="form-select">
                                                <option value="">Rol Seçiniz...</option>
                                                @foreach($roles as $role)
                                                    <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>{{ $role->ui_name }}</option>
                                                @endforeach
                                            </select>
                                            <small class="text-muted d-block mt-1">Personelin sistemdeki etkileşimlerini
                                                kısıtlayan yetki.</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card shadow-sm border-0 mb-4">
                                <div class="card-header bg-white py-3">
                                    <h5 class="mb-0 fw-bold"><i class="fas fa-briefcase text-info me-2"></i>Kurumsal
                                        Bilgiler</h5>
                                </div>
                                <div class="card-body">
                                    <div class="row g-3">
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold">Pozisyon / Ünvan</label>
                                            <input type="text" name="position" class="form-control"
                                                placeholder="Örn: Operasyon Sorumlusu" value="{{ old('position') }}">
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label fw-bold">İşe Giriş Tarihi</label>
                                            <input type="date" name="hired_at" class="form-control"
                                                value="{{ old('hired_at') }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="card shadow-sm border-0 mb-4">
                                <div class="card-header bg-white py-3">
                                    <h5 class="mb-0 fw-bold"><i class="fas fa-shield-check text-warning me-2"></i>Durum</h5>
                                </div>
                                <div class="card-body">
                                    <div class="form-check form-switch mb-3">
                                        <input class="form-check-input" type="checkbox" name="is_active" value="1"
                                            id="isActive" {{ old('is_active', '1') == '1' ? 'checked' : '' }}>
                                        <label class="form-check-label fw-bold" for="isActive">Aktif Personel</label>
                                    </div>
                                </div>
                            </div>

                            <div class="card shadow-sm border-0">
                                <div class="card-body">
                                    <button type="submit" class="btn btn-primary w-100 mb-2 shadow-sm"><i
                                            class="fas fa-plus-circle me-1"></i> Personeli Kaydet</button>
                                    <a href="{{ route('agency.staff-management.staff.index') }}"
                                        class="btn btn-light w-100 border text-muted">İptal</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>

            <!-- TAB 2: DAVET ET -->
            <div class="tab-pane fade" id="invite-user" role="tabpanel">
                <form action="{{ route('agency.staff-management.staff.store') }}" method="POST">
                    @csrf
                    <input type="hidden" name="action_type" value="invite">

                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="card shadow-sm border-0 mb-4">
                                <div class="card-header bg-white py-3">
                                    <h5 class="mb-0 fw-bold"><i
                                            class="fas fa-envelope-open-text text-primary me-2"></i>Kullanıcı Davet Formu
                                    </h5>
                                </div>
                                <div class="card-body">
                                    <div
                                        class="alert alert-soft-primary alert-permanent mb-4 p-3 bg-light border-start border-4 border-primary">
                                        <i class="fas fa-info-circle me-2 text-primary"></i>
                                        Sistemimize daha önce kayıt olmuş bir kullanıcıyı e-posta adresi aracılığıyla
                                        acentenize dahil edebilirsiniz. Kullanıcı tarafına bir istek gönderilir ve
                                        olayladığında rolü otomatik olarak atanır.
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Davet Edilecek Kullanıcı (E-Posta Adresi) <span
                                                class="text-danger">*</span></label>
                                        <input type="email" name="invite_email" class="form-control"
                                            value="{{ old('invite_email') }}" placeholder="kullanici@sistem.com" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label fw-bold">Atanacak Rol &Yetki Grubuu <span
                                                class="text-danger">*</span></label>
                                        <select name="invite_role_id" class="form-select" required>
                                            <option value="">Rol Seçiniz...</option>
                                            @foreach($roles as $role)
                                                <option value="{{ $role->id }}">{{ $role->ui_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-4">
                                        <label class="form-label fw-bold">Pozisyon / Ünvan (İsteğe bağlı)</label>
                                        <input type="text" name="invite_position" class="form-control"
                                            value="{{ old('invite_position') }}" placeholder="Örn: Muhasebe Sorumlusu">
                                    </div>

                                    <button type="submit" class="btn btn-primary px-4"><i
                                            class="fas fa-paper-plane me-2"></i> Davet Gönder</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function toggleLoginFields() {
            const createLogin = document.getElementById('createLoginUser').checked;
            const loginFields = document.getElementById('loginFields');
            const pwdInput = document.getElementById('passwordInput');
            const roleInput = document.getElementById('roleInput');

            if (createLogin) {
                loginFields.style.display = 'flex';
                pwdInput.setAttribute('required', 'required');
                roleInput.setAttribute('required', 'required');
            } else {
                loginFields.style.display = 'none';
                pwdInput.removeAttribute('required');
                roleInput.removeAttribute('required');
                pwdInput.value = '';
                document.getElementById('passwordConfirmInput').value = '';
            }
        }

        // Call on load to set correct required attributes
        document.addEventListener('DOMContentLoaded', toggleLoginFields);
    </script>
@endpush