@php
    /** @var \App\Models\Admin|null $user */
    $user = $user ?? null;
    $isSuperAdmin = $user?->hasRole(\App\Models\Core\Role::SUPER_ADMIN) ?? false;
    $currentRoleId = old('roles', $user?->roles->first()?->id);
@endphp

<div class="d-flex flex-column flex-lg-row gap-7 gap-lg-10">
    {{-- Aside: photo, status, role, branch --}}
    <div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-325px">
        <div class="card card-flush py-4">
            <div class="card-header">
                <div class="card-title"><h2>{{ trans('user.image') }}</h2></div>
            </div>
            <div class="card-body text-center pt-0">
                <style>
                    .image-input-placeholder { background-image: url('{{ asset('assets/media/svg/files/blank-image.svg') }}'); }
                    [data-bs-theme="dark"] .image-input-placeholder { background-image: url('{{ asset('assets/media/svg/files/blank-image-dark.svg') }}'); }
                </style>
                <div class="image-input image-input-outline image-input-placeholder mb-3" data-kt-image-input="true">
                    <div class="image-input-wrapper w-150px h-150px" style="background-image: url('{{ $user?->image ?? asset('assets/media/avatars/blank.png') }}')"></div>
                    <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="{{ trans('user.change_avatar') }}">
                        <i class="ki-duotone ki-pencil fs-7"><span class="path1"></span><span class="path2"></span></i>
                        <input type="file" name="user_image" accept=".png,.jpg,.jpeg,.webp"/>
                        <input type="hidden" name="avatar_remove"/>
                    </label>
                    <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="{{ trans('user.cancel_avatar') }}">
                        <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i>
                    </span>
                </div>
                <div class="text-muted fs-7">{{ trans('user.image_hint') }}</div>
                @error('user_image')<div class="text-danger fs-7 mt-2">{{ $message }}</div>@enderror
            </div>
        </div>

        <div class="card card-flush py-4">
            <div class="card-header">
                <div class="card-title"><h2>{{ trans('user.access') }}</h2></div>
            </div>
            <div class="card-body pt-0">
                <div class="mb-7">
                    <label class="required form-label">{{ trans('user.status') }}</label>
                    <select name="status" id="status" class="form-select @error('status') is-invalid @enderror" data-control="select2" data-hide-search="true">
                        <option value="1" @selected((string) old('status', $user?->status ?? 1) === '1')>{{ trans('user.active') }}</option>
                        <option value="0" @selected((string) old('status', $user?->status ?? 1) === '0')>{{ trans('user.inactive') }}</option>
                    </select>
                    @error('status')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="mb-7">
                    <label class="form-label">{{ trans('user.role') }}</label>
                    @if ($isSuperAdmin)
                        <div class="notice d-flex bg-light-danger rounded border-danger border border-dashed p-4">
                            <i class="ki-duotone ki-shield-tick fs-2tx text-danger me-3"><span class="path1"></span><span class="path2"></span></i>
                            <div>
                                <div class="fw-bold text-gray-900">{{ $user->roles->first()->label() }}</div>
                                <div class="fs-7 text-gray-700">{{ trans('user.super_admin_locked') }}</div>
                            </div>
                        </div>
                    @else
                        <select name="roles" id="roles" class="form-select @error('roles') is-invalid @enderror" data-control="select2" data-placeholder="{{ trans('user.choose_role') }}" data-allow-clear="true">
                            <option></option>
                            @foreach ($roles as $role)
                                <option value="{{ $role->id }}" data-branch-scoped="{{ $role->isBranchScoped() ? 1 : 0 }}" @selected((string) $currentRoleId === (string) $role->id)>{{ $role->label() }}</option>
                            @endforeach
                        </select>
                        <div class="form-text">{{ trans('user.role_hint') }}</div>
                        @error('roles')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                    @endif
                </div>

                <div>
                    <label class="form-label" id="branchLabel">{{ trans('user.branch') }}</label>
                    <select name="branch_id" id="branch_id" class="form-select @error('branch_id') is-invalid @enderror" data-control="select2" data-placeholder="{{ trans('user.all_branches') }}" data-allow-clear="true">
                        <option></option>
                        @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}" @selected((string) old('branch_id', $user?->branch_id) === (string) $branch->id)>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                    <div class="form-text" id="branchHint">{{ trans('user.branch_hint') }}</div>
                    @error('branch_id')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
                </div>
            </div>
        </div>
    </div>

    {{-- Main: account data --}}
    <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
        <div class="card card-flush py-4">
            <div class="card-header">
                <div class="card-title"><h2>{{ trans('user.user_data') }}</h2></div>
            </div>
            <div class="card-body pt-0">
                <div class="row g-7 mb-7">
                    <div class="col-md-6">
                        <label class="required form-label">{{ trans('user.user_name') }}</label>
                        <input type="text" name="user_name" id="user_name" class="form-control @error('user_name') is-invalid @enderror" value="{{ old('user_name', $user?->name) }}" autocomplete="off">
                        @error('user_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6">
                        <label class="required form-label">{{ trans('user.email') }}</label>
                        <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $user?->email) }}" dir="ltr" autocomplete="off">
                        @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="row g-7 mb-7">
                    <div class="col-md-6">
                        <label class="form-label">{{ trans('user.phone') }}</label>
                        <input type="text" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone', $user?->phone) }}" dir="ltr">
                        @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ trans('user.address') }}</label>
                        <input type="text" name="address" id="address" class="form-control @error('address') is-invalid @enderror" value="{{ old('address', $user?->address) }}">
                        @error('address')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>
        </div>

        <div class="card card-flush py-4">
            <div class="card-header">
                <div class="card-title"><h2>{{ trans('user.password') }}</h2></div>
            </div>
            <div class="card-body pt-0">
                <div class="row g-7">
                    <div class="col-md-6">
                        <label class="form-label {{ $user ? '' : 'required' }}">{{ trans('user.password') }}</label>
                        <input type="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" autocomplete="new-password">
                        <div class="form-text">{{ $user ? trans('user.password_hint') : trans('user.password_rule') }}</div>
                        @error('password')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <div class="col-md-6">
                        <label class="form-label {{ $user ? '' : 'required' }}">{{ trans('user.password_confirmation') }}</label>
                        <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" autocomplete="new-password">
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end gap-3">
            <a href="{{ route('admin.UserManagement.users.index') }}" class="btn btn-light">{{ trans('dash_site.Cancel') }}</a>
            <button type="submit" class="btn btn-primary"><i class="bi bi-check2 fs-4"></i>{{ trans('user.save') }}</button>
        </div>
    </div>
</div>

@push('user-form-scripts')
    <script>
        // A branch is required for branch-scoped roles (Clinic Admin, Receptionist).
        $(function () {
            var $role = $('#roles');
            function syncBranchRequirement() {
                var scoped = $role.find('option:selected').data('branch-scoped') === 1;
                $('#branchLabel').toggleClass('required', scoped);
                $('#branchHint').text(scoped ? @json(trans('user.branch_required_hint')) : @json(trans('user.branch_hint')));
            }
            $role.on('change', syncBranchRequirement);
            syncBranchRequirement();
        });
    </script>
@endpush