@php
    $isEdit = isset($user) && $user;
@endphp

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-body">
                <h5 class="mb-3">Informasi Akun</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Nama Lengkap</label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                            value="{{ old('name', $user->name ?? '') }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror"
                            value="{{ old('email', $user->email ?? '') }}" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Username</label>
                        <input type="text" name="username" class="form-control @error('username') is-invalid @enderror"
                            value="{{ old('username', $user->username ?? '') }}" placeholder="opsional">
                        @error('username')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Role</label>
                        <select name="role" class="form-select @error('role') is-invalid @enderror" required>
                            @php $selectedRole = old('role', $user->role ?? 'operator'); @endphp
                            <option value="admin" @selected($selectedRole === 'admin')>Admin</option>
                            <option value="operator" @selected($selectedRole === 'operator')>Operator</option>
                        </select>
                        @error('role')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-3">
                        <label class="form-label d-block">Status</label>
                        @php $isActive = (bool) old('is_active', $isEdit ? $user->is_active : true); @endphp
                        <div class="form-check form-switch mt-1">
                            <input class="form-check-input" type="checkbox" role="switch" id="is_active" name="is_active"
                                value="1" @checked($isActive)>
                            <label class="form-check-label" for="is_active">Aktif</label>
                        </div>
                        @error('is_active')
                            <div class="small text-danger">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h5 class="mb-3">{{ $isEdit ? 'Ubah Password (Opsional)' : 'Password Awal' }}</h5>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Password {{ $isEdit ? 'Baru' : '' }}</label>
                        <input type="password" name="password"
                            class="form-control @error('password') is-invalid @enderror" {{ $isEdit ? '' : 'required' }}>
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Konfirmasi Password</label>
                        <input type="password" name="password_confirmation" class="form-control">
                    </div>
                </div>
                @if ($isEdit)
                    <small class="text-muted">Kosongkan jika tidak ingin mengubah password.</small>
                @endif
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-body">
                <h5 class="mb-3">Foto Profil</h5>
                <div class="avatar-preview-wrap mb-3">
                    <img id="avatar-preview" src="{{ $isEdit ? $user->avatar_url : asset('assets/images/users/avatar-4.jpg') }}"
                        alt="Avatar preview" class="avatar-preview">
                </div>
                <div class="mb-2">
                    <input type="file" name="avatar" id="avatar-input"
                        class="form-control @error('avatar') is-invalid @enderror" accept=".jpg,.jpeg,.png,.webp">
                    @error('avatar')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                @if ($isEdit && $user->avatar_path)
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="1" id="remove_avatar"
                            name="remove_avatar">
                        <label class="form-check-label" for="remove_avatar">
                            Hapus foto profil saat simpan
                        </label>
                    </div>
                @endif
                <small class="text-muted d-block mt-2">Maksimal 2 MB. Format JPG/PNG/WEBP.</small>
            </div>
        </div>

        <div class="card">
            <div class="card-body d-grid gap-2">
                <button class="btn btn-primary" type="submit">
                    <i class="bx bx-save me-1"></i> Simpan User
                </button>
                <a href="{{ route('user-manager.index') }}" class="btn btn-outline-secondary">
                    Kembali
                </a>
            </div>
        </div>
    </div>
</div>

@section('scripts')
    <script>
        (function() {
            const input = document.getElementById('avatar-input');
            const preview = document.getElementById('avatar-preview');
            if (!input || !preview) return;
            input.addEventListener('change', function(e) {
                const file = e.target.files && e.target.files[0] ? e.target.files[0] : null;
                if (!file) return;
                const reader = new FileReader();
                reader.onload = function(ev) {
                    preview.src = ev.target.result;
                };
                reader.readAsDataURL(file);
            });
        })();
    </script>
@endsection