@extends('layouts.admin.app')
@section('title','My Profile')
@section('content')
<div class="nk-content ">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">{{__('labels.my_profile')}}</h3>
                            <div class="nk-block-des text-soft">
                                <!-- breadcrumb @s -->
                                <nav>
                                    <ul class="breadcrumb breadcrumb-arrow">
                                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{__('labels.dashboard')}}</a></li>
                                        <li class="breadcrumb-item active">{{__('labels.my_profile')}}</li>
                                    </ul>
                                </nav>
                                <!-- breadcrumb @e -->
                            </div>
                        </div><!-- .nk-block-head-content -->
                    </div><!-- .nk-block-between -->
                </div><!-- .nk-block-head -->
                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-aside-wrap">
                            <div class="card-inner card-inner-lg">
                                <div class="nk-block-head nk-block-head-lg">
                                    <div class="nk-block-between">
                                        <div class="nk-block-head-content">
                                            <h4 class="nk-block-title">{{__('labels.personal_info')}}</h4>
                                            <!-- <div class="nk-block-des">
                                                <p>{{__('labels.basic_info_text')}}</p>
                                            </div> -->
                                        </div>
                                        <div class="nk-block-head-content align-self-start d-lg-none">
                                            <a href="javascript:void(0);" class="toggle btn btn-icon btn-trigger mt-n1" data-target="userAside"><em class="icon ni ni-menu-alt-r"></em></a>
                                        </div>
                                    </div>
                                </div><!-- .nk-block-head -->
                                <div class="nk-block">
                                    <div class="nk-data data-list">
                                        <div class="data-head">
                                            <h6 class="overline-title">{{__('labels.baics')}}</h6>
                                        </div>
                                        <div class="data-item">
                                            <div class="data-col">
                                                <span class="data-label">{{__('labels.first_name')}}</span>
                                                <span class="data-value first_name">{{$userData->first_name ?? __('labels.not_add_yet')}}</span>
                                            </div>
                                            <div class="data-col data-col-end"><span class="data-more disable"><em class="icon ni ni-user-alt"></em></span></div>
                                        </div><!-- data-item -->

                                        <div class="data-item">
                                            <div class="data-col">
                                                <span class="data-label">{{__('labels.last_name')}}</span>
                                                <span class="data-value last_name">{{$userData->last_name ?? __('labels.not_add_yet')}}</span>
                                            </div>
                                            <div class="data-col data-col-end"><span class="data-more disable"><em class="icon ni ni-user-alt"></em></span></div>
                                        </div><!-- data-item -->

                                        <div class="data-item">
                                            <div class="data-col">
                                                <span class="data-label">{{__('labels.email')}}</span>
                                                <span class="data-value">{{$userData->email ?? __('labels.not_add_yet')}}</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><!-- data-list -->
                                </div><!-- .nk-block -->
                            </div>
                            
                            <div class="card-aside card-aside-left user-aside toggle-slide toggle-slide-left toggle-break-lg" data-content="userAside" data-toggle-screen="lg" data-toggle-overlay="true">
                                <div class="card-inner-group">
                                    
                                    <div class="card-inner">
                                        <div class="user-card">
                                            <div class="user-avatar bg-primary imgBox">
                                                @php 
                                                    $userImageData = getLoggedInUserDetail()->profile_image;
                                                    $profileImage = getProfileImageUrl($userImageData); 
                                                @endphp
                                                <img src="{{ $profileImage }}" class="img-fluid profile_image" alt="Not Found" onerror="this.src='{{asset('assets/images/default-user.jpg')}}';">
                                            </div>
                                            <div class="user-info">
                                                <span class="lead-text user-name">{{$userData->first_name ?? ''}} {{$userData->last_name ?? ''}}</span>
                                                <span class="sub-text">{{$userData->email ?? ''}}</span>
                                            </div>
                                            <div class="user-action">
                                                <div class="dropdown">
                                                    <a class="btn btn-icon btn-trigger mr-n2" data-toggle="dropdown" href="javascript:void(0);"><em class="icon ni ni-more-v"></em></a>
                                                    <div class="dropdown-menu dropdown-menu-right">
                                                        <ul class="link-list-opt no-bdr">
                                                            <li>
                                                                <a href="javascript:void(0);" id="profileEditModal"><em class="icon ni ni-edit-fill"></em><span>{{__('labels.update_profile')}}</span></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- .user-card -->
                                    </div><!-- .card-inner -->
                                    <div class="card-inner p-0">
                                        <ul class="link-list-menu">
                                            <li><a class="active" href="javascript:void(0);"><em class="icon ni ni-user-fill-c"></em><span>{{__('labels.personal_info')}}</span></a></li>
                                            <li>
                                                <a href="javascript:void(0);" id="changePasswordModal"><em class="icon ni ni-lock-alt-fill"></em><span>{{__('labels.change_password')}}</span></a>
                                            </li>
                                        </ul>
                                    </div><!-- .card-inner -->
                                </div><!-- .card-inner-group -->
                            </div><!-- card-aside -->
                        </div><!-- .card-aside-wrap -->
                    </div><!-- .card -->
                </div><!-- .nk-block -->
            </div>
        </div>
    </div>
</div>
               

<!-- Update Profile -->
<div class="modal fade zoom" tabindex="-1" id="profile-edit" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-scrollable" role="document">
        <div class="modal-content">
            <a href="javascript:void(0);" class="close close_modal" data-dismiss="modal" aria-label="Close">
                <em class="icon ni ni-cross"></em>
            </a>
            <div class="modal-header">
                <h5 class="modal-title">{{__('labels.update_profile')}}</h5>
            </div>
            <div class="modal-body">
                <form id="updateProfileForm" method="POST" action="{{route('profile.update', $userData->id)}}" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <input type="hidden" name="id" value="{{ $userData->id }}">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <div class="form-group">
                                <div class="uploadPhoto upload_photo position-relative mx-auto">
                                    <div class="img-box rounded-circle overflow-hidden w-100 h-100 imgBox">
                                        @php 
                                            $userImageData = getLoggedInUserDetail()->profile_image;
                                            $profileImage = getProfileImageUrl($userImageData); 
                                        @endphp
                                                
                                        <img src="{{ $profileImage }}" class="img-fluid" alt="user-img"
                                            class="img-fluid rounded-circle border profile_image" id="imagePreview" onerror="this.src='{{asset('assets/images/default-user.jpg')}}';">
                                    </div>
                                    <label
                                        class="mb-0 d-flex align-items-center justify-content-center position-absolute rounded-circle overflow-hidden imgBox"
                                        for="uploadImage">
                                        <input type="file" id="uploadImage" class="imgBox" onchange="setImage(this,$(this),'profile_image');" data-accept-file="{{ config('constants.profile_image.acceptType') }}" data-preview-id="imagePreview" data-base64-id="uploadImageBase64" accept="{{ config('constants.profile_image.acceptType') }}">
                                        <input type="hidden" name="profile_image" id="uploadImageBase64" value="">
                                        <!-- <input type="file" id="uploadImage" class="imgBox"> -->
                                        <em class="icon ni ni-camera-fill"></em> 
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="first-name">{{__('labels.first_name')}}</label>
                                <div class="form-control-wrap">
                                    <input type="text" class="form-control" name="first_name" id="updateFirstName" placeholder="{{__('labels.first_name')}}" value="{{$userData->first_name}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-label" for="last-name">{{__('labels.last_name')}}</label>
                                <div class="form-control-wrap">
                                    <input type="text" class="form-control" name="last_name" id="updateLastName" placeholder="{{__('labels.last_name')}}" value="{{$userData->last_name}}">
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group text-right">
                                <button type="button" id="updateProfileBtn" class="btn btn-primary mr-1">{{__('labels.update')}}</button>
                                <button type="button" data-dismiss="modal" class="btn btn-light close_modal">{{__('labels.cancel')}}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@include('admin.image-cropper-modal')
@endsection
@push('scripts')
{!! JsValidator::formRequest('App\Http\Requests\Admin\UpdateProfileRequest','#updateProfileForm') !!}

<script type="text/javascript" src="{{asset('assets/js/admin/cropper/profile_image-cropper.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/js/admin/profile/index.js')}}"></script>


@endpush