@extends('layouts.admin')

@section('title', 'Thông tin cá nhân')
@section('admin_shell_attributes')
x-data="profileApp()"
@endsection

@section('content')
    @include('partials.admin-topbar', [
        'markImage' => asset('default/Logo.png'),
        'markAlt' => 'Zaron',
        'title' => 'Thông tin cá nhân',
        'subtitle' => 'Tên hiển thị và mật khẩu của chính bạn. Vai trò, đơn vị và số điện thoại do quản trị viên đổi.',
        'actions' => '<a href="'.route('zalo-chat.page').'" class="btn btn-primary admin-btn"><i class="bi bi-chat-dots"></i> Mở Chat</a>',
    ])

    @include('settings.partials.nav-tabs')

    <div class="alert alert-danger admin-alert" x-show="errorMessage" x-cloak x-text="errorMessage"></div>
    <div class="alert alert-success admin-alert" role="status" x-show="successMessage" x-cloak x-text="successMessage"></div>

    <div class="admin-layout">
        <div class="admin-panel">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Tên hiển thị</h2>
                    <div class="admin-panel-note">
                        Tên này hiện ở góc trên mỗi trang và trong báo cáo của quản trị viên.
                    </div>
                </div>
            </div>

            <form class="admin-panel-body" @submit.prevent="saveProfile()">
                <label class="form-label admin-form-label" for="profile-name">Tên</label>
                <input type="text"
                       id="profile-name"
                       class="form-control admin-input mb-3"
                       x-model="form.name"
                       maxlength="255"
                       autocomplete="name"
                       required>

                {{-- Ba trường chỉ đọc: đổi được ở đây là tự phong quyền / tự khoá mình ra
                     ngoài, xem `App\Http\Controllers\ProfileController`. --}}
                <label class="form-label admin-form-label" for="profile-phone">Số điện thoại (tên đăng nhập)</label>
                <input type="text"
                       id="profile-phone"
                       class="form-control admin-input mb-1"
                       value="{{ auth()->user()->phone }}"
                       readonly
                       disabled>
                <div class="admin-panel-note mb-3">
                    Cần đổi số điện thoại thì nhờ quản trị viên đơn vị - đây là tên đăng nhập của bạn.
                </div>

                <label class="form-label admin-form-label" for="profile-role">Vai trò</label>
                <input type="text"
                       id="profile-role"
                       class="form-control admin-input mb-3"
                       value="{{ auth()->user()->role->label() }}"
                       readonly
                       disabled>

                <label class="form-label admin-form-label" for="profile-unit">Đơn vị</label>
                <input type="text"
                       id="profile-unit"
                       class="form-control admin-input mb-3"
                       value="{{ auth()->user()->unitLabel() }}"
                       readonly
                       disabled>

                <button type="submit" class="btn btn-primary admin-btn" :disabled="savingProfile">
                    <span x-show="savingProfile" class="spinner-border spinner-border-sm me-1"></span>
                    Lưu tên
                </button>
            </form>
        </div>

        <div class="admin-panel">
            <div class="admin-panel-header">
                <div>
                    <h2 class="admin-panel-title">Đổi mật khẩu</h2>
                    <div class="admin-panel-note">
                        Tối thiểu 8 ký tự. Hệ thống không có màn "quên mật khẩu" - quên thì phải nhờ
                        quản trị viên đặt lại.
                    </div>
                </div>
            </div>

            <form class="admin-panel-body" @submit.prevent="savePassword()">
                <label class="form-label admin-form-label" for="profile-current-password">Mật khẩu hiện tại</label>
                <input type="password"
                       id="profile-current-password"
                       class="form-control admin-input mb-3"
                       x-model="passwordForm.current_password"
                       autocomplete="current-password"
                       required>

                <label class="form-label admin-form-label" for="profile-new-password">Mật khẩu mới</label>
                <input type="password"
                       id="profile-new-password"
                       class="form-control admin-input mb-3"
                       x-model="passwordForm.password"
                       autocomplete="new-password"
                       minlength="8"
                       required>

                <label class="form-label admin-form-label" for="profile-new-password-confirm">Nhập lại mật khẩu mới</label>
                <input type="password"
                       id="profile-new-password-confirm"
                       class="form-control admin-input mb-3"
                       x-model="passwordForm.password_confirmation"
                       autocomplete="new-password"
                       minlength="8"
                       required>

                <button type="submit" class="btn btn-primary admin-btn" :disabled="savingPassword">
                    <span x-show="savingPassword" class="spinner-border spinner-border-sm me-1"></span>
                    Đổi mật khẩu
                </button>
            </form>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    window.CURRENT_PROFILE = @json(['name' => auth()->user()->name]);
</script>
<script src="{{ asset('js/profile.js') }}?v={{ filemtime(public_path('js/profile.js')) }}"></script>
@endpush