@extends('layouts.app')

@section('title', 'Tambah User Akun')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2><i class="bi bi-person-plus"></i> Tambah User Akun</h2>
        <p class="text-muted mb-0 small">Buat akun pengguna untuk pegawai yang sudah terdaftar</p>
    </div>
    <a href="{{ route('pegawai.index') }}" class="btn btn-secondary">
        <i class="bi bi-arrow-left"></i> Kembali ke Data Pegawai
    </a>
</div>

<div class="card">
    <div class="card-body">
        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        @endif

        <form method="POST" action="{{ route('admin.users.store') }}" id="userForm">
            @csrf

            <div class="row mb-4">
                <div class="col-md-12">
                    <h5 class="text-primary mb-3">
                        <i class="bi bi-info-circle me-2"></i>Informasi Akun
                    </h5>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="pegawai_id" class="form-label">
                        Pilih Pegawai <span class="text-danger">*</span>
                        <small class="text-muted d-block">Pilih pegawai yang akan dibuatkan akun</small>
                    </label>
                    <select name="pegawai_id" id="pegawai_id" class="form-select @error('pegawai_id') is-invalid @enderror" required>
                        <option value="">-- Pilih Pegawai --</option>
                        @foreach($pegawaiList as $pegawai)
                        <option value="{{ $pegawai->id }}" 
                            data-nama="{{ $pegawai->nama_lengkap }}"
                            data-email="{{ $pegawai->email }}"
                            data-gelar-depan="{{ $pegawai->gelar_depan ?? '' }}"
                            data-gelar-belakang="{{ $pegawai->gelar_belakang ?? '' }}">
                            {{ ($pegawai->gelar_depan ? $pegawai->gelar_depan . ' ' : '') }}{{ $pegawai->nama_lengkap }}{{ ($pegawai->gelar_belakang ? ', ' . $pegawai->gelar_belakang : '') }} - {{ $pegawai->nip }}
                        </option>
                        @endforeach
                    </select>
                    @error('pegawai_id')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    @if($pegawaiList->isEmpty())
                    <div class="text-warning mt-2">
                        <i class="bi bi-exclamation-triangle me-1"></i>
                        Tidak ada pegawai yang belum memiliki akun. 
                        <a href="{{ route('pegawai.create') }}">Tambah pegawai baru</a> terlebih dahulu.
                    </div>
                    @endif
                </div>
                <div class="col-md-6">
                    <label for="role" class="form-label">
                        Role <span class="text-danger">*</span>
                    </label>
                    <select name="role" id="role" class="form-select @error('role') is-invalid @enderror" required>
                        <option value="pegawai" {{ old('role') == 'pegawai' ? 'selected' : '' }}>Pegawai</option>
                        <option value="kepala_tata_usaha" {{ old('role') == 'kepala_tata_usaha' ? 'selected' : '' }}>Kepala Tata Usaha</option>
                        <option value="pimpinan" {{ old('role') == 'pimpinan' ? 'selected' : '' }}>Pimpinan</option>
                    </select>
                    @error('role')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="username" class="form-label">
                        Username <span class="text-danger">*</span>
                        <small class="text-muted d-block">Akan di-generate otomatis dari nama pegawai</small>
                    </label>
                    <input type="text" 
                           class="form-control @error('username') is-invalid @enderror" 
                           id="username" 
                           name="username" 
                           value="{{ old('username') }}" 
                           required
                           placeholder="Akan di-generate otomatis">
                    @error('username')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <small class="text-muted">Format: huruf kecil, tanpa spasi dan tanda baca</small>
                </div>
                <div class="col-md-6">
                    <label for="email" class="form-label">
                        Email <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>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="password" class="form-label">
                        Password <span class="text-danger">*</span>
                        <small class="text-muted d-block">Minimal 8 karakter</small>
                    </label>
                    <input type="password" 
                           class="form-control @error('password') is-invalid @enderror" 
                           id="password" 
                           name="password" 
                           required
                           minlength="8">
                    @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                    <div class="form-check mt-2">
                        <input class="form-check-input" type="checkbox" id="showPassword">
                        <label class="form-check-label" for="showPassword">
                            Tampilkan Password
                        </label>
                    </div>
                </div>
                <div class="col-md-6">
                    <label for="password_confirmation" class="form-label">
                        Konfirmasi Password <span class="text-danger">*</span>
                    </label>
                    <input type="password" 
                           class="form-control" 
                           id="password_confirmation" 
                           name="password_confirmation" 
                           required
                           minlength="8">
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="status" class="form-label">
                        Status Akun <span class="text-danger">*</span>
                    </label>
                    <select name="status" id="status" class="form-select @error('status') is-invalid @enderror" required>
                        <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Aktif</option>
                        <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Non Aktif</option>
                        <option value="suspended" {{ old('status') == 'suspended' ? 'selected' : '' }}>Ditangguhkan</option>
                    </select>
                    @error('status')
                    <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <div class="alert alert-info">
                <i class="bi bi-shield-check me-2"></i>
                <strong>Security By Design:</strong> Akun ini dibuat oleh Kepala TU dengan audit trail lengkap. 
                Password akan di-hash menggunakan bcrypt dan semua aktivitas akan tercatat dalam audit log.
            </div>

            <div class="d-flex justify-content-between mt-4">
                <a href="{{ route('pegawai.index') }}" class="btn btn-secondary">
                    <i class="bi bi-x-circle me-1"></i> Batal
                </a>
                <button type="submit" class="btn btn-primary">
                    <i class="bi bi-check-circle me-1"></i> Buat Akun
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const pegawaiSelect = document.getElementById('pegawai_id');
    const usernameInput = document.getElementById('username');
    const emailInput = document.getElementById('email');
    const showPasswordCheckbox = document.getElementById('showPassword');
    const passwordInput = document.getElementById('password');
    const passwordConfirmationInput = document.getElementById('password_confirmation');

    // Generate username otomatis dari nama pegawai
    pegawaiSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        if (selectedOption.value) {
            const nama = selectedOption.dataset.nama || '';
            const gelarDepan = selectedOption.dataset.gelarDepan || '';
            const gelarBelakang = selectedOption.dataset.gelarBelakang || '';
            const email = selectedOption.dataset.email || '';

            // Generate username dari nama (hilangkan gelar, spasi, dan tanda baca)
            let username = nama.toLowerCase()
                .replace(/dr\.|dr |sp\.|sp |s\.km|s\.kep|a\.md\.|a\.md /gi, '')
                .replace(/[^a-z0-9]/g, '')
                .substring(0, 20);

            // Jika ada gelar depan, tambahkan di awal
            if (gelarDepan) {
                const gelar = gelarDepan.toLowerCase().replace(/[^a-z]/g, '');
                if (gelar.length <= 5) {
                    username = gelar + username.substring(0, 15);
                }
            }

            usernameInput.value = username;
            
            // Set email jika ada
            if (email) {
                emailInput.value = email;
            } else {
                // Generate email dari username
                emailInput.value = username + '@puskesmas-muarakumpeh.go.id';
            }
        } else {
            usernameInput.value = '';
            emailInput.value = '';
        }
    });

    // Toggle show password
    showPasswordCheckbox.addEventListener('change', function() {
        const type = this.checked ? 'text' : 'password';
        passwordInput.type = type;
        passwordConfirmationInput.type = type;
    });

    // Validasi form
    document.getElementById('userForm').addEventListener('submit', function(e) {
        const password = passwordInput.value;
        const passwordConfirmation = passwordConfirmationInput.value;

        if (password !== passwordConfirmation) {
            e.preventDefault();
            alert('Password dan Konfirmasi Password tidak sama!');
            return false;
        }

        if (password.length < 8) {
            e.preventDefault();
            alert('Password minimal 8 karakter!');
            return false;
        }
    });
});
</script>
@endsection