@extends('layouts.admin.master')

@section('admin_main_body')



<!--CDN support JQuery from w3 schools TK-- To show images-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

               <!-- Page Header -->
               <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h1 class="page-title fw-medium fs-18 mb-2">Profile</h1>
                    <div class=""  style="padding: 30px">
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item"><a href="javascript:void(0);">Pages</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Profile</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="btn-list">
                    <a class="btn btn-primary-light btn-wave me-2" href="{{route('admin.dashboard')}}">
                        <i class="bx bx-crown align-middle"></i> Dashboard
                    </a>

                </div>
            </div>
            <!-- Page Header Close -->


                <!-- Start:: row-1 -->
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card custom-card profile-card">

                <div class="card-body p-4 pb-0 position-relative">
                                <span class="avatar avatar-xxl avatar-rounded bg-info online">
                                    {{-- <img src="{{asset('backend/assets/images/faces/team/7.png')}}" alt=""> --}}


                                    {{-- <img src="{{(!empty($user->image))? url('upload/user_images/'.$user->image):url('upload/no_image.jpg')}}" alt="Admin" class="rounded-circle p-1 bg-primary" width="110"> --}}
                                    <img src="{{(!empty($profileData->photo))? url('upload/admin_images/'.$profileData->photo):url('upload/no_image.jpg')}}" alt="Admin" >



                                </span>
                                <div class="mt-4 mb-3 d-flex align-items-center flex-wrap gap-3 justify-content-between">
                                    <div>
                                        <h5 class="fw-semibold mb-1">{{$profileData->last_name. " " .$profileData->first_name}}</h5>
                                        <span class="d-block fw-medium text-muted mb-1">{{$profileData->email}}</span>
                                        <p class="fs-12 mb-0 fw-medium text-muted"> <span class="me-3"><i class="ri-building-line me-1 align-middle"></i>{{$profileData->role}}</span> <span><i class="ri-map-pin-line me-1 align-middle"></i>{{$profileData->last_name}}</span> </p>
                                    </div>
                                    <div class="d-flex mb-0 flex-wrap gap-4">


                                        <div class="p-3 bg-light rounded d-flex align-items-center border gap-2">
                                            <div class="main-card-icon success">
                                                <div class="avatar avatar-lg bg-success-transparent border border-success border-opacity-10">
                                                    <div class="avatar avatar-sm svg-white">
                                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,40H48a8,8,0,0,0-8,8V208a8,8,0,0,0,8,8H208a8,8,0,0,0,8-8V48A8,8,0,0,0,208,40ZM57.78,216A72,72,0,0,1,128,160a40,40,0,1,1,40-40,40,40,0,0,1-40,40,72,72,0,0,1,70.22,56Z" opacity="0.2"/><circle cx="128" cy="120" r="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><rect x="40" y="40" width="176" height="176" rx="8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><path d="M57.78,216a72,72,0,0,1,140.44,0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
                                                    </div>
                                                </div>
                                            </div>
                                            <div>
                                                <a href="admin.change.password"></a>
                                                <a class="fw-semibold fs-20 mb-0"  href="">Change Password</a>

                                                <p class="mb-0 fs-12 text-muted fw-medium">Here</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <ul class="nav nav-tabs mb-0 tab-style-8 scaleX" id="myTab" role="tablist">
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link active" id="profile-about-tab" data-bs-toggle="tab"
                                            data-bs-target="#profile-about-tab-pane" type="button" role="tab"
                                            aria-controls="profile-about-tab-pane" aria-selected="true">About</button>
                                    </li>
                                    <li class="nav-item" role="presentation">
                                        <button class="nav-link" id="edit-profile-tab" data-bs-toggle="tab"
                                            data-bs-target="#edit-profile-tab-pane" type="button" role="tab"
                                            aria-controls="edit-profile-tab-pane" aria-selected="true">Edit Profile</button>
                                    </li>


                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End:: row-1 -->




                <!-- Start:: row-2 -->
                <div class="row">
                    <div class="col-xl-9">
                        <div class="tab-content" id="profile-tabs">
                                <!--Edit About-->
                            <div class="tab-pane show active p-0 border-0" id="profile-about-tab-pane" role="tabpanel" aria-labelledby="profile-about-tab" tabindex="0">
                                <div class="card custom-card overflow-hidden">
                                    <div class="card-body p-0">

                                            <!--Edit About-->
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item p-4">
                                                <span class="fw-medium fs-15 d-block mb-3"><span class="me-1">&#10024;</span>ABOUT ME :</span>
                                                <li class="list-group-item p-4">
                                                    <span class="fw-medium fs-15 d-block mb-3">PERSONAL INFO :</span>
                                                    <div class="row gy-4 align-items-center">
                                                        <div class="col-xl-3">
                                                            <div class="lh-1">
                                                                <span class="fw-medium">User Name :</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-9">
                                                            <input type="text" name="username" class="form-control" placeholder="Placeholder" value={{$profileData->username}} @readonly(true)>
                                                        </div>
                                                        <div class="col-xl-3">
                                                            <div class="lh-1">
                                                                <span class="fw-medium">First Name :</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-9">
                                                            <input type="text"name="first_name" class="form-control" placeholder="Placeholder" value={{$profileData->first_name}} @readonly(true)>
                                                        </div>
                                                        <div class="col-xl-3">
                                                            <div class="lh-1">
                                                                <span class="fw-medium">Last Name :</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-9">
                                                            <input type="text" name="last_name" class="form-control" placeholder="Placeholder" value={{$profileData->last_name}} @readonly(true)>
                                                        </div>
                                                        <div class="col-xl-3">
                                                            <div class="lh-1">
                                                                <span class="fw-medium">Designation :</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-xl-9">
                                                            <input type="text" class="form-control" placeholder="Placeholder" value="Super Admin" @readonly(true)>
                                                        </div>
                                                    </div>
                                                </li>
                                            </li>
                                            <li class="list-group-item p-4">
                                                <span class="fw-medium fs-15 d-block mb-3">DEPARTMENT :</span>
                                                <div class="w-75">
                                                    <a href="javascript:void(0);">
                                                        <span class="badge bg-light text-muted m-1 border">Project Management</span>
                                                    </a>
                                                    <a href="javascript:void(0);">
                                                        <span class="badge bg-light text-muted m-1 border">IT</span>
                                                    </a>
                                                    <a href="javascript:void(0);">
                                                        <span class="badge bg-light text-muted m-1 border">Support</span>
                                                    </a>

                                                </div>
                                            </li>
                                            <li class="list-group-item p-4">
                                                <span class="fw-medium fs-15 d-block mb-3">CONTACT INFORMATION :</span>
                                                <div class="text-muted">
                                                    <p class="mb-2">
                                                        <span class="avatar avatar-sm avatar-rounded text-primary">
                                                            <i class="ri-mail-line align-middle fs-15"></i>
                                                        </span>
                                                        <span class="fw-medium text-default">Email : </span>{{$profileData->email}}
                                                    </p>
                                                    <p class="mb-2">
                                                        <span class="avatar avatar-sm avatar-rounded text-secondary">
                                                            <i class="ri-phone-line align-middle fs-15"></i>
                                                        </span>
                                                        <span class="fw-medium text-default">Phone : </span> 123 453 222
                                                    </p>
                                                    <p class="mb-2">
                                                        <span class="avatar avatar-sm avatar-rounded text-success">
                                                            <i class="ri-map-pin-line align-middle fs-15"></i>
                                                        </span>
                                                        <span class="fw-medium text-default">City : </span> city
                                                    </p>
                                                    <p class="mb-0">
                                                        <span class="avatar avatar-sm avatar-rounded text-orange">
                                                            <i class="ri-building-line align-middle fs-15"></i>
                                                        </span>
                                                        <span class="fw-medium text-default">Country : </span> City, Country
                                                    </p>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <!--Edit Profile-->
                            <div class="tab-pane p-0 border-0" id="edit-profile-tab-pane" role="tabpanel"
                            aria-labelledby="edit-profile-tab" tabindex="0">

                            <form  method="post" action="" enctype="multipart/form-data" >
                                @csrf


                                <div class="card custom-card overflow-hidden">
                                    <div class="card-body p-0">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item p-4">
                                                <span class="fw-medium fs-15 d-block mb-3">PERSONAL INFO :</span>
                                                <div class="row gy-4 align-items-center">
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">User Name :</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="text" name="username" class="form-control" placeholder="Placeholder" value={{$profileData->username}}>
                                                    </div>
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">First Name :</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="text"name="first_name" class="form-control" placeholder="Placeholder" value={{$profileData->first_name}}>
                                                    </div>
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">Last Name :</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="text" name="last_name" class="form-control" placeholder="Placeholder" value={{$profileData->last_name}}>
                                                    </div>
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">Designation :</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="text" class="form-control" placeholder="Placeholder" value="Chief Executive Officer (C.E.O)">
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="list-group-item p-4">
                                                <span class="fw-medium fs-15 d-block mb-3">CONTACT INFO :</span>
                                                <div class="row gy-4 align-items-center">
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">Email :</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="email" name="email" class="form-control" placeholder="Placeholder" value={{$profileData->email}}>
                                                    </div>
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">Phone :</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="text" class="form-control" placeholder="Placeholder" value="+1 (555) 123-4567">
                                                    </div>
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">City:</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="text" class="form-control" placeholder="Placeholder" value="city">
                                                    </div>
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">Country:</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="text" class="form-control" placeholder="Placeholder" value="City, Country">
                                                    </div>
                                                </div>
                                            </li>



                                            <li class="list-group-item p-4">
                                                <span class="fw-medium fs-15 d-block mb-3">Preview :</span>
                                                <div class="row gy-4 align-items-center">
                                                    <div>
                                                        <span class="avatar avatar-xxl">
                                                            <img id="showImage" src="{{(!empty($profileData->photo))? url('upload/admin_images/'. $profileData->photo):url('upload/no_image.jpg')}}" alt="Admin" class="rounded-circle p-1 bg-primary" width="110">
                                                        </span>

                                                    </div>
                                                    <div class="col-xl-3">
                                                        <div class="lh-1">
                                                            <span class="fw-medium">Change Profile Photo :</span>
                                                        </div>
                                                    </div>
                                                    <div class="col-xl-9">
                                                        <input type="file" name="photo" class="form-control" id="image" >
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>


                                    </div>



                                    <li class="list-group-item p-4">
                                        <div class="row">
                                            <label class="col-sm-3 col-form-label"></label>
                                            <div class="col-sm-9">
                                                <div class="d-md-flex d-grid align-items-center gap-3">
                                                    <button type="submit" class="btn btn-primary px-4" name="submit2">Save Changes</button>
                                                    <a  href="" class ="btn btn-primary px-4" type = "button">Back/Cancel</a>
                                                </div>
                                            </div>
                                        </div>

                                    </li>


                                </div>




                            </form>

                            </div>


                        </div>
                    </div>

                        <!--Right Panel-->

                </div>
                <!-- End:: row-2 -->


{{-- <!-- JAVASCRIPT --> --}}
<script type ="text/javascript">
    $(document).ready(function(){
       $('#image').change(function(e){
           var reader = new FileReader();
           reader.onload= function(e){

              $('#showImage').attr('src', e.target.result);
           }
           reader.readAsDataURL(e.target.files['0']);
       });
    });
   </script>




@endsection
