@extends('layouts.app')
<style type="text/css">
	.profile-ud-list{max-width: 100% !important;}
	.profile-ud-item {width: 33.33% !important;padding: 0 3.25rem;}
</style>
@section('content')
<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between g-3">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title"><a href="javascript:history.back()" class="pt-3"><em class="icon ni ni-chevron-left back-icon"></em> </a>  Users / <strong class="text-primary small">{{ $user->FullName }}</strong></h3>
            <div class="nk-block-des text-soft">
                {{-- <ul class="list-inline">
                    <li>User ID: <span class="text-base">UD003054</span></li>
                    <li>Last Login: <span class="text-base">15 Feb, 2019 01:02 PM</span></li>
                </ul> --}}
            </div>
        </div>
        
    </div>
</div><!-- .nk-block-head -->
<div class="nk-block">
    <div class="card">
        <div class="card-aside-wrap">
            <div class="card-content">
                <ul class="nav nav-tabs nav-tabs-mb-icon nav-tabs-card">
                    <li class="nav-item">
                        <a class="nav-link active" href="#"><em class="icon ni ni-user-circle"></em><span>Personal</span></a>
                    </li>
                    <li class="nav-item nav-item-trigger d-xxl-none">
                        <a href="#" class="toggle btn btn-icon btn-trigger" data-target="userAside"><em class="icon ni ni-user-list-fill"></em></a>
                    </li>
                </ul><!-- .nav-tabs -->
                <div class="card-inner">
                    <div class="nk-block">
                        <div class="nk-block-head">
                            <div class="user-info-avtar">
                                <div class="user-avatar lg bg-primary">
                                    @php
                                        if(!is_null($user->file)){
                                            $file = public_path('uploads/users/') . $user->file;
                                        }
                                    @endphp

                                    @if(!is_null($user->file) && file_exists($file))
                                        <img src="{{ url('uploads/users/'.$user->file) }}">
                                    @else
                                        <span>{{ \Helpers::getAcronym($user->name) }}</span>
                                    @endif
                                </div>
                                <div>
                                    @if($user->status)
                                    <h5 class="title">Personal Information <span class="badge badge-pill badge-success">Active</span></h5>
                                    @else
                                    <h5 class="title">Personal Information <span class="badge badge-pill badge-danger">Inactive</span></h5>
                                    @endif
                            		<p>Basic info, like your name, contact number and email, that you use on Volvo.</p>
                                </div>
                            </div>
                            
                        </div><!-- .nk-block-head -->
                        <div class="nk-block">
                            <div class="nk-data data-list">
                                <div class="data-head">
                                    <h6 class="overline-title">Basics</h6>
                                </div>
                                <div class="data-item" data-toggle="modal" data-target="#profile-edit">
                                    <div class="data-col">
                                        <span class="data-label">Full Name</span>
                                        <span class="data-value">{{ $user->name }}</span>
                                    </div>
                                    <!-- <div class="data-col data-col-end"><span class="data-more"><em class="icon ni ni-forward-ios"></em></span></div> -->
                                </div><!-- data-item -->
                                <div class="data-item" data-toggle="modal" data-target="#profile-edit">
                                    <div class="data-col">
                                        <span class="data-label">Mobile Number</span>
                                        <span class="data-value">{{ $user->phone_number }}</span>
                                    </div>
                                    <!-- <div class="data-col data-col-end"><span class="data-more disable"><em class="icon ni ni-lock-alt"></em></span></div> -->
                                </div><!-- data-item -->
                                <div class="data-item">
                                    <div class="data-col">
                                        <span class="data-label">Email Address</span>
                                        <span class="data-value">{{ $user->email }}</span>
                                    </div>
                                    <!-- <div class="data-col data-col-end"><span class="data-more disable"><em class="icon ni ni-lock-alt"></em></span></div> -->
                                </div><!-- data-item -->
                                <div class="data-item" data-toggle="modal" data-target="#profile-edit">
                                    <div class="data-col">
                                        <span class="data-label">Role</span>
                                        <span class="data-value text-soft">{{ ucfirst($user->roleName) }}</span>
                                    </div>
                                    <!-- <div class="data-col data-col-end"><span class="data-more"><em class="icon ni ni-forward-ios"></em></span></div> -->
                                </div><!-- data-item -->
                                @if($user->role == 'asm')
                                <div class="data-item" data-toggle="modal" data-target="#profile-edit">
                                    <div class="data-col">
                                        <span class="data-label">Area</span>
                                        <span class="data-value">
                                            {{ $userAreas->pluck('areaName')->implode(', ') }}
                                        </span>
                                        <button id="assign_area" title="Info"
                                            class="btn btn-dim btn-round btn-icon btn-sm btn-outline-light"
                                            data-toggle="modal" style="height: 30px; width: 30px; margin-left: 15px;" data-target="#modalArea"><em
                                                class="icon ni ni-pen-alt-fill"></em></button>
                                    </div>
                                    <!-- <div class="data-col data-col-end"><span class="data-more"><em class="icon ni ni-forward-ios"></em></span></div> -->
                                </div><!-- data-item -->
                                @elseif($user->role == 'rsm')
                                <div class="data-item" data-toggle="modal" data-target="#profile-edit">
                                    <div class="data-col">
                                        <span class="data-label">Region</span>
                                        <span class="data-value">
                                            {{ $userRegions->pluck('regionName')->implode(', ') }}
                                        </span>
                                        <button id="assign_region" title="Info"
                                            class="btn btn-dim btn-round btn-icon btn-sm btn-outline-light"
                                            data-toggle="modal" style="height: 30px; width: 30px; margin-left: 15px;" data-target="#modalRegions"><em
                                                class="icon ni ni-pen-alt-fill"></em></button>
                                    </div>
                                   
                                    <!-- <div class="data-col data-col-end"><span class="data-more"><em class="icon ni ni-forward-ios"></em></span></div> -->
                                </div><!-- data-item -->
                                @endif
                                <div class="data-item" data-target="#profile-edit">
                                    <div class="data-col">
                                        <span class="data-label">Status</span>
                                        <span class="data-value">
                                           <select class="form-select form-select-sm" name="status" id="status">
                                                <option value="active" @if($user->status == 'active') selected @endif>Active</option>
                                                <option value="inactive" @if($user->status == 'inactive') selected @endif>Inactive</option>
                                            </select>
                                        </span>
                                    </div>
                                    <!-- <div class="data-col data-col-end"><span class="data-more"><em class="icon ni ni-forward-ios"></em></span></div> -->
                                </div><!-- data-item -->
                            </div><!-- data-list -->
                        </div>
                        
                    </div><!-- .nk-block -->
                </div><!-- .card-inner -->
            </div><!-- .card-content -->
            
        </div><!-- .card-aside-wrap -->
    </div><!-- .card -->
</div><!-- .nk-block -->
<div class="modal fade zoom" tabindex="-1" id="modalRegions">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assign Region</h5>
                <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                    <em class="icon ni ni-cross"></em>
                </a>
            </div>
            <div class="modal-body modal-body-lg">
                <div class="gy-3">
                    <select class="form-select form-select-sm" data-search="off" data-placeholder="Select Region" multiple name="region[]" id="region">
                        <option disabled></option>
                        @foreach($allRegions as $region)
                        <option value="{{$region->id}}" @if($userRegions->contains('id', $region->id)) selected @endif>{{$region->region_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <div class="row">
                    <div class="col-lg-12 p-0 text-right">
                        <button class="btn btn-primary" id="assign_region_btn">Assign</button>
                        <button class="btn btn-outline-light" data-dismiss="modal" aria-label="Close">Close</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<div class="modal fade zoom" tabindex="-1" id="modalArea">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assign Area</h5>
                <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                    <em class="icon ni ni-cross"></em>
                </a>
            </div>
            <div class="modal-body modal-body-lg">
                <div class="gy-3">
                    <select class="form-select form-select-sm" data-search="off" data-placeholder="Select Area" multiple name="area[]" id="area">
                        <option disabled></option>
                        @foreach($allAreas as $area)
                        <option value="{{$area->id}}" @if($userAreas->contains('id', $area->id)) selected @endif>{{$area->area_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="modal-footer bg-light">
                <div class="row">
                    <div class="col-lg-12 p-0 text-right">
                        <button class="btn btn-primary" id="assign_area_btn">Assign</button>
                        <button class="btn btn-outline-light" data-dismiss="modal" aria-label="Close">Close</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
@endsection
@push('footerScripts')
<script type="text/javascript">
    var root_url = "