@extends('ioc::layout.main')

@php $isProfile = auth()->user()->id == request('user')->id; @endphp

@section('head')
    <title>iOC > Modifica @if($isProfile) Profilo @else Amministratore @endif</title>
@endsection

@section('breadcrumb')
    <i data-feather="chevron-right" class="breadcrumb__icon"></i>
    @if(auth()->user()->can('view-admin'))
        <a href="{{ route('admin.index') }}" class="breadcrumb">Amministratori</a>
    @else
        Amministratori
    @endif
    <i data-feather="chevron-right" class="breadcrumb__icon"></i>
    <a href="{{ url()->current() }}" class="breadcrumb--active">Modifica @if($isProfile) Profilo @else Amministratore @endif</a>
@endsection

@section('content')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Modifica @if($isProfile) Profilo @else Amministratore @endif</h2>
    </div>
    <div class="grid grid-cols-12 gap-6">
        <!-- BEGIN: Profile Menu -->
        <div class="col-span-12 lg:col-span-4 xxl:col-span-3 flex lg:block flex-col-reverse">
            <div class="intro-y box mt-5">
                <div class="relative flex items-center p-5">
                    <div class="w-12 h-12 image-fit">
                        <img alt="iOC Admin Panel" class="rounded-full" src="{{ asset('static/images/' . 'avatar-icon.jpg') }}">
                    </div>
                    @livewire('user-title', ['user' => $user])
                    <!--<div class="dropdown ml-4">
                        <a class="dropdown-toggle w-5 h-5 block" href="javascript:;">
                            <i data-feather="more-horizontal" class="w-5 h-5 text-gray-700 dark:text-gray-300"></i>
                        </a>
                        <div class="dropdown-box w-56">
                            <div class="dropdown-box__content box dark:bg-dark-1">
                                <div class="p-4 border-b border-gray-200 dark:border-dark-5 font-medium">Export Options</div>
                                <div class="p-2">
                                    <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md">
                                        <i data-feather="activity" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"></i> English
                                    </a>
                                    <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md">
                                        <i data-feather="box" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"></i>
                                        Indonesia
                                        <div class="text-xs text-white px-1 rounded-full bg-theme-6 ml-auto">10</div>
                                    </a>
                                    <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md">
                                        <i data-feather="layout" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"></i> English
                                    </a>
                                    <a href="" class="flex items-center block p-2 transition duration-300 ease-in-out bg-white dark:bg-dark-1 hover:bg-gray-200 dark:hover:bg-dark-2 rounded-md">
                                        <i data-feather="sidebar" class="w-4 h-4 text-gray-700 dark:text-gray-300 mr-2"></i> Indonesia
                                    </a>
                                </div>
                                <div class="px-3 py-3 border-t border-gray-200 dark:border-dark-5 font-medium flex">
                                    <button type="button" class="button button--sm bg-theme-1 text-white">Settings</button>
                                    <button type="button" class="button button--sm bg-gray-200 text-gray-600 dark:bg-dark-5 dark:text-gray-300 ml-auto">View Profile</button>
                                </div>
                            </div>
                        </div>
                    </div>-->
                </div>
                <div class="nav-tabs p-5 border-t border-gray-200 dark:border-dark-5">
                    <a data-toggle="tab" data-target="#details" href="javascript:;" class="flex items-center active">
                        <i data-feather="activity" class="w-4 h-4 mr-2"></i> Informazioni utente
                    </a>
                    <a data-toggle="tab" data-target="#password" href="javascript:;" class="flex items-center mt-5">
                        <i data-feather="lock" class="w-4 h-4 mr-2"></i> Cambio password
                    </a>
{{--                    @if($user->isRelation('devices'))--}}
{{--                        <a data-toggle="tab" data-target="#devices" href="javascript:;" class="flex items-center mt-5">--}}
{{--                            <i data-feather="box" class="w-4 h-4 mr-2"></i> Dispositivi--}}
{{--                        </a>--}}
{{--                    @endif--}}
                    @can('give-admin-permissions')
                        <a data-toggle="tab" data-target="#permissions" href="javascript:;" class="flex items-center mt-5">
                            <i data-feather="settings" class="w-4 h-4 mr-2"></i> Permessi utente
                        </a>
                    @endcan
                </div>
                <!--<div class="p-5 border-t border-gray-200 dark:border-dark-5">
                    <a class="flex items-center" href="">
                        <i data-feather="activity" class="w-4 h-4 mr-2"></i> Email Settings
                    </a>
                    <a class="flex items-center mt-5" href="">
                        <i data-feather="box" class="w-4 h-4 mr-2"></i> Saved Credit Cards
                    </a>
                    <a class="flex items-center mt-5" href="">
                        <i data-feather="lock" class="w-4 h-4 mr-2"></i> Social Networks
                    </a>
                    <a class="flex items-center mt-5" href="">
                        <i data-feather="settings" class="w-4 h-4 mr-2"></i> Tax Information
                    </a>
                </div>
                <div class="p-5 border-t flex dark:border-dark-5">
                    <button type="button" class="button button--sm block bg-theme-1 text-white">New Group</button>
                    <button type="button" class="button button--sm border text-gray-700 dark:border-dark-5 dark:bg-dark-5 dark:text-gray-300 ml-auto">New Quick Link</button>
                </div>-->
            </div>
        </div>

        <!-- END: Profile Menu -->
        <div class="tab-content col-span-12 lg:col-span-8 xxl:col-span-9">
            <!-- BEGIN: Personal Information -->
            <div class="intro-y box lg:mt-5 tab-content__pane active" id="details">
                <div class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5">
                    <h2 class="font-medium text-base mr-auto">Informazioni utente</h2>
                </div>
                <div class="p-5">

                    @livewire('user-edit', ['user' => $user, 'roles' => $roles] )

                </div>
            </div>
            <!-- END: Personal Information -->

            <!-- BEGIN: Password -->
            <div class="intro-y box lg:mt-5 tab-content__pane" id="password">
                <div class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5">
                    <h2 class="font-medium text-base mr-auto">Cambio password</h2>
                </div>
                <div class="p-5">

                    @livewire('change-password', ['user' => $user])

                </div>
            </div>
            <!-- END: Password -->

{{--            @if($user->isRelation('devices'))--}}
{{--                <!-- BEGIN: Dispositivi -->--}}
{{--                <div class="intro-y box lg:mt-5 tab-content__pane" id="devices">--}}
{{--                    <div class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5">--}}
{{--                        <h2 class="font-medium text-base mr-auto">Dispositivi</h2>--}}
{{--                    </div>--}}
{{--                    <div class="p-5">--}}
{{--                        @livewire('user-devices', ['user' => $user])--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <!-- END: Dispositivi -->--}}
{{--            @endif--}}

            <!-- BEGIN: Permissions -->
            @can('give-admin-permissions')
                <div class="intro-y box lg:mt-5 tab-content__pane" id="permissions">
                    <div class="flex items-center p-5 border-b border-gray-200 dark:border-dark-5">
                        <h2 class="font-medium text-base mr-auto">Permessi utente</h2>
                    </div>
                    <div>

                        @livewire('permission-setting', ['user' => $user])

                    </div>
                </div>
            @endcan
            <!-- END: Permissions -->
        </div>
    </div>
@endsection