@extends('layouts.app')
@section('title', isset($user) ? 'Edit Pengguna' : 'Tambah Pengguna')
@section('page-title', isset($user) ? 'Edit Pengguna' : 'Tambah Pengguna')

@section('content')
<div class="card">
    <div class="card-header"><i class="bi bi-person me-1"></i> Form Pengguna</div>
    <div class="card-body">
        <form method="POST" action="{{ isset($user) ? route('users.update', $user) : route('users.store') }}">
            @csrf
            @if(isset($user)) @method('PUT') @endif
            
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" value="{{ old('name', $user->name ?? '') }}" required>
                </div>
                
                <div class="col-md-6">
                    <label class="form-label">Email / Username <span class="text-danger">*</span></label>
                    <input type="email" name="email" class="form-control" value="{{ old('email', $user->email ?? '') }}" required>
                </div>
                
                <div class="col-md-6">
                    <label class="form-label">Password @if(!isset($user))<span class="text-danger">*</span>@endif</label>
                    <input type="password" name="password" class="form-control" @if(!isset($user)) required @endif>
                    @if(isset($user)) <small class="text-muted">Kosongkan jika tidak ingin mengubah password.</small> @endif
                </div>

                <div class="col-md-6">
                    <label class="form-label">Konfirmasi Password @if(!isset($user))<span class="text-danger">*</span>@endif</label>
                    <input type="password" name="password_confirmation" class="form-control" @if(!isset($user)) required @endif>
                </div>

                <div class="col-md-6">
                    <label class="form-label">Peran (Role) <span class="text-danger">*</span></label>
                    <select name="role" class="form-select" id="role-select" required>
                        <option value="">-- Pilih Role --</option>
                        @if(auth()->user()->isSuperadmin())
                            <option value="superadmin" @selected(old('role', $user->role ?? '') === 'superadmin')>Superadmin (Akses Penuh)</option>
                        @endif
                        <option value="head_admin" @selected(old('role', $user->role ?? '') === 'head_admin')>Head Admin (Bisa lihat semua divisi)</option>
                        <option value="admin" @selected(old('role', $user->role ?? '') === 'admin')>Admin (Satu divisi, bisa input)</option>
                        <option value="staff" @selected(old('role', $user->role ?? '') === 'staff')>Staff (Satu divisi, view only)</option>
                    </select>
                </div>

                <div class="col-md-6" id="division-wrapper">
                    <label class="form-label">Divisi</label>
                    <select name="division_id" class="form-select">
                        <option value="">-- Pilih Divisi --</option>
                        @foreach($divisions as $div)
                            <option value="{{ $div->id }}" @selected(old('division_id', $user->division_id ?? '') == $div->id)>{{ $div->name }}</option>
                        @endforeach
                    </select>
                    <small class="text-muted">Wajib diisi untuk Admin & Staff.</small>
                </div>

                @if(isset($user))
                <div class="col-12">
                    <div class="form-check form-switch mt-2">
                        <input type="checkbox" name="is_active" value="1" class="form-check-input" id="is_active" @checked(old('is_active', $user->is_active))>
                        <label class="form-check-label" for="is_active">Akun aktif (bisa login)</label>
                    </div>
                </div>
                @endif
            </div>

            <div class="mt-4">
                <button class="btn btn-primary"><i class="bi bi-save me-1"></i> Simpan</button>
                <a href="{{ route('users.index') }}" class="btn btn-light">Batal</a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const roleSelect = document.getElementById('role-select');
    const divWrapper = document.getElementById('division-wrapper');
    const divSelect = divWrapper.querySelector('select');

    function toggleDivision() {
        const role = roleSelect.value;
        if (role === 'admin' || role === 'staff') {
            divWrapper.style.display = 'block';
            divSelect.required = true;
        } else {
            divWrapper.style.display = 'none';
            divSelect.required = false;
        }
    }

    roleSelect.addEventListener('change', toggleDivision);
    toggleDivision();
});
</script>
@endsection