<x-app-layout>
    <div class="app-main flex-column flex-row-fluid">
        <div class="d-flex flex-column flex-column-fluid">
            <div class="app-toolbar py-3 py-lg-6">
                <div class="app-container container-xxl d-flex flex-stack">
                    <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                        <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">User's Detail</h1>
                        {{ Breadcrumbs::render('user-management.show', $user) }}
                    </div>
                    <div class="d-flex align-items-center ml-auto gap-2 gap-lg-3">
                        @if ($url = Session::get('backUrl'))
                            <x-add-back-button
                            onclick="window.location='{{ $url }}'"
                            >
                                <i class="ki-duotone ki-left fs-3"></i>
                                {{ __('Back') }}
                            </x-add-back-button>
                        @endif
                    </div>
                </div>
            </div>
           <div class="app-content flex-column-fluid">
                <div class="app-container  container-xxl ">
                    <div class="app-content flex-column-fluid p-12 sm:p-8 bg-white shadow sm:rounded-lg" >
                        <div class="max-w-9xl">
                            <section>
                                <header class="flex justify-between items-center mb-5">
                                    <h2 class="text-2xl font-medium text-gray-900">
                                        {{ __('User Details - ') }}{{$user->name}}
                                    </h2>
                                </header>
                                <div class="card-body">
                                    <!--begin::Row-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 fw-semibold text-muted">Full Name</label>
                                        <!--end::Label-->
                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <span class="fw-semibold fs-6 text-gray-800">{{$user->name}}</span>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Row-->
                                    <!--begin::Input group-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 fw-semibold text-muted">Roles</label>
                                        <!--end::Label-->
                                        <!--begin::Col-->
                                        <div class="col-lg-8 fv-row">
                                        @forelse ($user->roles as $role)
                                            <div class="col-lg-8 fv-row">
                                                <span class="fw-semibold text-gray-800 fs-6">{{$role->name}}</span>
                                            </div>
                                        @empty
                                            <div class="col-lg-8 fv-row">
                                                <span class="text-danger">Not Assigned</span>
                                            </div>
                                        @endforelse

                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 fw-semibold text-muted">Contact Phone</label>
                                        <!--end::Label-->
                                        <!--begin::Col-->
                                        <div class="col-lg-8 d-flex align-items-center">
                                            @if (!empty($user->phone))
                                            <span class="fw-semibold fs-6 text-gray-800 me-2">{{$user->phone}}</span>
                                            @else
                                            <span class="text-danger">Not Provide</span>
                                            @endif
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 fw-semibold text-muted">Emails</label>
                                        <!--end::Label-->
                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            <a href="#" class="fw-semibold fs-6 text-gray-800 text-hover-primary">{{$user->email}}</a>
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    <!--end::Input group-->
                                    <!--begin::Input group-->
                                    <div class="row mb-7">
                                        <!--begin::Label-->
                                        <label class="col-lg-4 fw-semibold text-muted">Department</label>
                                        <!--end::Label-->
                                        <!--begin::Col-->
                                        <div class="col-lg-8">
                                            @if (!empty($user->department))
                                            <span class="fw-semibold fs-6 text-gray-800">{{$user->department}}</span>
                                            @else
                                            <span class="text-danger">Not Provide</span>
                                            @endif
                                        </div>
                                        <!--end::Col-->
                                    </div>
                                    @can('user-edit')
                                    <div class="card-footer d-flex justify-content-end py-6 px-9">
                                        <x-primary-button class="btn btn-primary" onclick="window.location='{{route('admin.users.edit', $user->id)}}'">

                                            {{ __('Edit') }}
                                        </x-primary-button>
                                    </div>
                                    @endcan
                                </div>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
