@extends('layouts-v2.app')

@section('title', 'Chi tiết người dùng')

@section('content')
<div class="bg-gray-50 text-gray-700">
    {{-- Breadcrumb --}}
    <div class="flex items-center gap-2 text-slate-500 text-sm mb-2">
        <a href="{{ route('v2.dashboard') }}" class="hover:text-blue-600 cursor-pointer">Trang chủ</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <a href="{{ route('oa-users.index') }}" class="hover:text-blue-600 cursor-pointer">Danh sách người dùng</a>
        <i data-lucide="chevron-right" class="w-4 h-4"></i>
        <span>Thông tin người dùng</span>
    </div>
    <h1 class="text-3xl font-bold text-slate-900 mb-6 uppercase">Thông tin người dùng</h1>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        <div id="user-detail" class="lg:col-span-4 space-y-6">
            <div class="col-span-full flex items-center justify-center">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><style>@keyframes loader2{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><path fill="#265BFF" d="M17.179 13.605a.431.431 0 00.279.514l.775.245a.393.393 0 00.499-.268 7.318 7.318 0 00-4.5-8.658.39.39 0 00-.507.255l-.245.775a.43.43 0 00.261.523 5.69 5.69 0 013.438 6.614z" style="animation:loader2 1s cubic-bezier(.63,-.71,.32,1.28) infinite both;transform-origin:center center"/></svg>
            </div>
        </div>

        <div id="user-form" class="lg:col-span-8">
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-8">
                <form action="#" method="POST" id="edit-user-form">
                    @csrf
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-8">

                        <x-floating-input type="text" name="name" id="user_name" label="Tên người dùng" />

                        {{-- Chọn role --}}
                        <div class="relative">
                            <span class="custom-placeholder absolute left-3 -top-1/5 -translate-y-1/2 text-gray-500 pointer-events-none z-10 text-xs bg-white p-1.25">
                                Vai trò
                            </span>
                            <select id="role_search" multiple style="width: 100%;"></select>
                        </div>

                        <!-- <fieldset class="border border-gray-300 rounded px-4 pb-2 relative flex items-center">
                            <legend class="text-xs text-gray-400 px-1 ml-2">Quản lý</legend>
                            <select class="w-full py-1 focus:outline-none text-gray-700 font-medium bg-transparent appearance-none">
                                <option>[21] Bac Nguyen</option>
                            </select>
                            <svg class="w-5 h-5 text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                        </fieldset> -->

                        <div class="col-span-1 md:col-span-1">
                            <x-floating-select 
                                name="user_status"
                                id="user_status"
                                label="Trạng thái"
                                :options="[
                                    '0' => 'Không hoạt động',
                                    '1' => 'Hoạt động'
                                ]"
                            />
                        </div>

                    </div>

                    <div class="mt-8 flex justify-start">
                        <button id="btn-submit-update-user" class="disabled:opacity-50 disabled:cursor-not-allowed bg-blue-500 hover:bg-blue-600 text-white px-5 py-2 text-sm rounded font-semibold transition flex items-center uppercase tracking-wider">
                            LƯU
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script>
    window.routes = {
        getOAUser: "{{ route('oa-users.getUser', ['id' => ':id']) }}",
        updateOAUser: "{{ route('oa-users.updateUser', ['id' => ':id']) }}",
        searchOARoles: "{{ route('oa-roles.searchOARoles') }}",
    }
</script>
<script src="{{ asset('js/OA/utils.js') }}"></script>
<script src="{{ asset('js/OA/oa-user.detail.js') }}"></script>
@endsection