@extends('front.layout.app')
@section('content')

<style>
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}

.about {
    padding: 200px 0;
}

.about::after {
    width: 70%;
    height: 88%;
    top: 8%;
}

.pro-bg {
    margin-top: 142px;
}

/* /// pri // */
.pro-bg h3,
.pro-bg h5 {
    margin-top: 60px;
}

h4 {
    color: #000;
    font-size: 23px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif !important;
}

p {
    font-size: 16px;
    color: #000;
    margin-top: 10px;
    font-family: 'Poppins', sans-serif !important;
}

li {
    color: #000 !important;
}

section.tr {
    margin-top: 35px;
    margin-bottom: 70px;
}

a {
    text-decoration: none;
}

.ull {
    list-style: disc;
    padding-left: 17px;
    margin-top: 15px;
}

.a {
    color: #0d6efd !important;
}
.indi-banner {
 
    background-image: url('{{URL::asset("assets/front/images/artboard5.png") }}');
}
.helllso {
    font-size: 16px;
    font-weight: 600;
}
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}


div#v-pills-tabContent {
    width: 100%;
}

.main-top-profo{
  display: flex;
}

.main-top-profo .back-pro{
    height: 125px;
    border-radius: 50%;
    position: relative;
    width: 125px;
    display: none;
}

.main-top-profo .back-pro .top-profic{
  border: 1px solid #00000063;
  position: absolute;
  background: #fff;
  padding: 8px 13px;
  border-radius: 50%;
  right: 0;
  top: 80px;
}

.main-top-profo .back-pro .top-profic a{
  color: #000;
}
.main-top-profo .back-pro .top-profic i{
  font-size: 16px;
}
.profile-content {
  padding-left: 30px;
}
.profile-content h2 {
  padding-bottom: 10px;
  font-size: 32px;
}
.profile-content p {
  font-size: 17px;
  color: #00000078;
  font-weight: 500;
}
main{
    /*height: 100vh;*/
}
.top-profile {
    margin-top: 90px;
    margin-bottom: 100px;
}
.reser .nav-link {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    width: 225px;
    margin: 12px 50px 15px 0;
    background: #1a1a1a;
    text-transform: capitalize;
    padding: 9px 19px !important;
    font-family: 'Poppins', sans-serif;
    border-radius: 31px;
}
 .nav-pills .nav-link.active,  .nav-pills .show>.nav-link {

    background-color: #3badb8 !important;
}
.main-top-profo {
    display: flex;
    margin-bottom: 55px;
}
.reser input {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    width: 100%;
    padding: 11px 20px;
    border: 1px solid #b7afaf;
    border-radius: 9px;
    margin-bottom: 25px;
}
button.save-btn.mx-0.my-5 {
    color: #ffffff !important;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 75px 0 !important;
    text-transform: capitalize;
    padding: 11px 19px !important;
    font-family: 'Poppins', sans-serif;
    border-radius: 10px;
    background: #3badb8;
        border: 0;
}
label {
    display: inline-block;
    font-weight: 400;
    color: #000;
    text-transform: none;
}
.okabso {
    position: absolute;
    left: -17px;
    bottom: -4px;
    opacity: 0;
    cursor: pointer;
    width: 40px;
}
.green {
    color: #08be08;
}
.anchor a{
    background: red;
    padding: 10px 15px;
    border-radius: 10px;
    color: #fff;
    text-decoration: underline;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px;
}

.anchor {
    margin-top: 20px;
}
/*.toast{*/
/* height: 400px !important;*/
/* width: 600px !important;*/
/* display: grid;*/
/* place-items: center;*/
/*}*/
</style>
<main>

<section class="indi-banner">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="indi-ban-head">User Dashboard</h1>
                </div>
                <div class="col-12">
                    <!--<p class="indi-ban-para">Lorem ipsum dolor sit amet consectetur adipisicing.</p>-->
                </div>
            </div>
        </div>
    </section>

<div class="top-profile">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-12">
                    <form action="{{ route('updateProfile', $user->id) }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="main-top-profo">
                            <div class="back-pro">
                                <img src="{{ asset($user->image) }}" clas="img-fluid imgTag uploaded" style="position: absolute; height:100%; width:100%; object-fit: cover; border-radius: 50%;">
                                <div class="top-profic">
                                    <a href="#" class="h-100 w-100 position-relative">
                                        <input type="file" name="image" class="okabso fileInput">
                                        <i class="fa-regular fa-camera"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="profile-content">
                                <h2>Hi, {{ $user->name }}</h2>
                                <p>Member since {{ $user->created_at->format('d M Y') }}</p>
                            </div>
                        </div>
    
                        <div class="reser">
                            <div class="d-flex align-items-start">
                                <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                                    aria-orientation="vertical">
                                    
                                     <button class="nav-link active" id="v-pills-profile-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-profile" type="button" role="tab"
                                        aria-controls="v-pills-profile" aria-selected="false">Profile</button>
                                        
                                    <button class="nav-link " id="v-pills-home-tab" data-bs-toggle="pill"
                                        data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home"
                                        aria-selected="true">Your Subscriptions</button>
                                </div>
                                <div class="tab-content" id="v-pills-tabContent">
                                    <div class="tab-pane fade " id="v-pills-home" role="tabpanel"
                                        aria-labelledby="v-pills-home-tab">
                                        
                                        @if($user->membership_id == '1' )
                                        <h3 class="green">You have subscribed standard Plan.</h3>
                                        <p>You can cancle your subscription any time...</p>
                                        <div class="anchor"><a href="javascript:;">Cencle Subscription</a></div>
                             
                                        @elseif($user->membership_id == '2')
                                        <h3 class="green">You have subscribed premium Plan.</h3>
                                        <p>You can cancle your subscription any time...</p>
                                        <div class="anchor"><a href="javascript:;">Cencle Subscription</a></div>
                                        
                                        @else
                                            <h3>You haven't subscribed any Plan yet</h3>
                                        @endif
                                        
                                    </div>
                                    <div class="tab-pane fade show active" id="v-pills-profile" role="tabpanel"
                                        aria-labelledby="v-pills-profile-tab">
                                        
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div class="row input-align">
                                                    <div class="col-lg-12">
                                                        <label class="input-label" for="">Name</label><br>
                                                        <input class="elizbath-input" type="text" name="name" value="{{ $user->name }}">
                                                        <input type="hidden" name="user_id" value="1">
                                                    </div>
                                                </div>
                                            </div>
            
                                            
            
                                            <div class="col-lg-12">
                                                <div class="row input-line">
                                                    <div class="col-lg-12">
                                                       <label class="input-label" for="">Email</label><br>
                                                       <input class="bio-input" type="email" name="email" maxlength="50" value="{{ $user->email }}">
                                                    </div>
                                                </div>
                                            </div>
                                          
                                            <!--<div class="col-lg-12">-->
                                            <!--     <div class="row input-line">-->
                                            <!--        <div class="col-lg-12">-->
                                            <!--           <label class="input-label" for="">Current Password</label><br>-->
                                            <!--           <input class="bio-input" type="text" name="phone" maxlength="50" value="{{ $user->password }}">-->
                                            <!--        </div>-->
                                            <!--    </div>-->
                                            <!--</div>-->
                                            <!--<div class="col-lg-12">-->
                                            <!--     <div class="row input-line">-->
                                            <!--        <div class="col-lg-12">-->
                                            <!--           <label class="input-label" for="">New Password</label><br>-->
                                            <!--           <input class="bio-input" type="text" name="phone" maxlength="50" value="{{ $user->password }}">-->
                                            <!--        </div>-->
                                            <!--    </div>-->
                                            <!--</div>-->
                                            
                                        <div class="mb-3">
                                            <label for="exampleInputEmail1" class="form-label">Current Password</label>
                                            <input type="password" name="current_password" class="form-control"  id="exampleInputEmail1" aria-describedby="emailHelp">
                                        </div>
                                        <div class="mb-3">
                                            <label for="exampleInputPassword1" class="form-label">New Password</label>
                                            <input type="password" name="password" class="form-control" id="exampleInputPassword1">
                                        </div>
                                      
                                        <!--<div class="mb-3">-->
                                        <!--    <label for="exampleInputPassword1" class="form-label">Confirm Password</label>-->
                                        <!--    <input type="password" name="confirm_password" class="form-control" id="exampleInputPassword1">-->
                                        <!--</div>-->
                                          
                                            <div class="col-lg-12">
                                                <div class="row input-line">
                                                    <div class="col-lg-12">
                                                        <button type="submit" class="save-btn mx-0 my-5" style="width: 100% !important;">SAVE CHANGES</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


    
</main>

@endsection

@section('script')

<script>
    $(document).ready(function () {

      $('.fileInput').change(function () {
        var $input = $(this);
        var $imgTag = $input.parent().parent().parent().find('img');
        console.log($imgTag)
    
        var file = this.files[0];
    
        if (file) {
          var reader = new FileReader();
            
          reader.onload = function (e) {
            $imgTag.attr('src', e.target.result);
          };
    
          reader.readAsDataURL(file);
        } else {
          $imgTag.attr('src', '');
        }
      });
    });
</script>

@endsection