@extends('layouts.front.master')
@section('contant')
    <!-- Start Home Header -->
<style>
   ul.nav.nav-pills.nav-pills-primary.nav-justified.side-nav-part {
    display: block;
    background: #f8f9fa;
}
.nav-pills {
    --bs-nav-pills-link-active-color: #fff!important;
    --bs-nav-pills-link-active-bg: #3b3092;
}
.nav-pills .nav-link.active span {
   color: white !important;
}
</style>
<section class="banner-inner-area sub-bg bg-image" data-background="{{ asset('assets/images/bg/banner-inner-bg.png') }}" style="background-image: url(&quot;assets/images/bg/banner-inner-bg.png&quot;);">
           <div class="banner-inner__shape1">
               <img class="animation__sunMove" src="{{ asset('assets/images/shape/banner-inner-shape1.png') }}" alt="image">
           </div>
           <div class="banner-inner__shape2">
               <img src="{{ asset('assets/images/shape/banner-inner-shape2.png') }}" alt="image">
           </div>
           <div class="banner-inner__shape3">
               <img class="animation__arryLeftRight" src="{{ asset('assets/images/shape/banner-inner-shape3.png') }}" alt="image">
           </div>
           <div class="banner-inner__shape4">
               <img class="animation__arryUpDown" src="{{ asset('assets/images/shape/banner-inner-shape4.png') }}" alt="image">
           </div>
           <div class="banner-inner__shape5">
               <img src="{{ asset('assets/images/shape/banner-inner-shape5.png') }}" alt="image">
           </div>
           <div class="banner-inner__circle">
               <img class="slide-effect1" src="{{ asset('assets/images/shape/banner-inner-circle.png') }}" alt="image">
           </div>
           <div class="banner-inner__circle2">
               <img class="slide-effect2" src="{{ asset('assets/images/shape/banner-inner-circle2.png') }}" alt="image">
           </div>
           <div class="banner-inner__dots">
               <img class="pxl-image-zoom" src="{{ asset('assets/images/shape/banner-inner-dots.png') }}" alt="image">
           </div>
           <div class="container">
               <div class="banner-inner__content">
                   <h1>User Dashboard</h1>
                   <ul>
                       <li><a href="{{ route('/') }}">Home</a></li>
                       <li><i class="fa-regular fa-angle-right"></i></li>
                       <li>User Dashboard</li>
                   </ul>
               </div>
           </div>
</section>
      <section class="py-5 py-md-11 bg-light border-top border-bottom" style="background-image: url('{{ url('img/bg4.jpg') }}');background-size: cover;
    background-repeat: no-repeat;">
         <div class="container">
            <div class="row">
               <div class="col-lg-4">
                  <div class="profile-card-4 z-depth-3">
                     <div class="card">

                        <div class="card-body">
                           <ul class="nav nav-pills nav-pills-primary nav-justified side-nav-part bg-transparent">
                              <li class="nav-item">
                                 <a href="javascript:void();" data-bs-target="#profile" data-bs-toggle="tab" class="nav-link active show"><i class="icon-user"></i> <span class="hidden-xs">Profile</span></a>
                              </li>
                              <li class="nav-item">
                                 <a href="javascript:void();" data-bs-target="#messages" data-bs-toggle="tab" class="nav-link"><i class="icon-envelope-open"></i> <span class="hidden-xs">My Courses</span></a>
                              </li>
                              {{-- <li class="nav-item">
                                 <a href="javascript:void();" data-bs-target="#edit" data-bs-toggle="tab" class="nav-link"><i class="icon-note"></i> <span class="hidden-xs">My Wishlist</span></a>
                              </li> --}}

                              <li class="nav-item">
                                 <a href="javascript:void(0)" class="logout-session nav-link" data-url=" {{ route('logout') }}" data-redirect="{{ route('/') }}" data-bs-toggle="tab"><span class="hidden-xs"><i class="icon-note"></i>LOGOUT</span></a>
                              </li>
                           </ul>
                        </div>

                     </div>
                  </div>
               </div>
               <div class="col-lg-8">
                  <div class="card z-depth-3">
                     <div class="card-body main-card mobilemain-card">
                        <div class="tab-content p-3">
                           <div class="tab-pane active show" id="profile">
                              <h5 class="mb-3">USER PROFILE</h5>
                              <section class="py-3 bg-light">
                                 <div class="container userpro">
                                    <ul class="nav nav-pills nav-pills-success nav-justified">
                                       <li class="nav-item">
                                          <a href="javascript:void();" data-bs-target="#profile1" data-bs-toggle="tab" data-id="1" class="nav-link active show profile_class"><i class="icon-user"></i> <span class="hidden-xs">Profile</span></a>
                                       </li>
                                       <li class="nav-item">
                                          <a href="javascript:void();" data-bs-target="#profile2" data-bs-toggle="tab"  data-id="2"  class="nav-link profile_class"><i class="icon-envelope-open "></i> <span class="hidden-xs" >Change Password</span></a>
                                       </li>
                                    </ul>
                                    <div class="tab-pane profile_show" id="profile1">
                                       <div class="row">
                                          <div class="col-md-12">
                                             <div class="sign__form profile-field">
                                                <form class="mb-5" id="updateProfileForm">
                                                   <!-- Email -->
                                                   <div class="form-group mb-3 mt-3">
                                                      <label for="name">
                                                      Name
                                                      </label>
                                                      <input type="text" class="form-control" id="name" name="name" placeholder="Full Name" value="{{$userDetail->name}}">
                                                   </div>
                                                   <p style="margin-bottom: 2px;" class="text-danger error-container" id="error-name"></p>
                                                   <div class="form-group mb-3">
                                                      <label for="email">
                                                      Email
                                                      </label>
                                                      <input type="email" class="form-control" id="email" name="email" placeholder="Email" value="{{$userDetail->email}}" readonly>
                                                   </div>
                                                   <div class="form-group mb-3">
                                                      <label for="mobile">
                                                      Mobile
                                                      </label>
                                                      <input type="email" class="form-control" id="mobile" name="mobile" placeholder="Mobile" value="{{$userDetail->mobile_no}}">
                                                   </div>
                                                   <p style="margin-bottom: 2px;" class="text-danger error-container" id="error-mobile"></p>
                                                   <!-- Submit -->
                                                   <button class="btn btn-block btn-primary certzip-bttn update-profile" type="button">
                                                   UPDATE
                                                   </button>
                                                </form>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <div class="tab-pane profile_show" id="profile2" style="display: none;">
                                       <div class="row " >
                                          <div class="col-md-12">
                                             <div class="sign__form profile-field">
                                                <form class="mb-5" id="changePasswordForm">
                                                   <!-- Email -->
                                                   <div class="form-group mb-3 mt-3">
                                                      <label for="name">
                                                      Old Password
                                                      </label>
                                                      <input type="password" class="form-control" id="oldpwd" name="oldpwd" placeholder="">
                                                   </div>
                                                   <p style="margin-bottom: 2px;" class="text-danger error-container" id="error-oldpwd"></p>
                                                   <div class="form-group mb-3">
                                                      <label for="email">
                                                      New Password
                                                      </label>
                                                      <input type="password" class="form-control" id="newpassword" name="newpassword" placeholder="">
                                                   </div>
                                                   <p style="margin-bottom: 2px;" class="text-danger error-container" id="error-newpassword"></p>
                                                   <div class="form-group mb-3">
                                                      <label for="mobile">
                                                      Confirm Password
                                                      </label>
                                                      <input type="password" class="form-control" id="confirmpassword" name="confirmpassword" placeholder="">
                                                   </div>
                                                   <p style="margin-bottom: 2px;" class="text-danger error-container" id="error-confirmpassword"></p>
                                                   <!-- Submit -->
                                                   <button class="btn btn-block btn-primary changepwd certzip-bttn" type="button">
                                                   CHANGE PASSWORD
                                                   </button>
                                                </form>
                                             </div>
                                          </div>
                                       </div>
                                    </div>
                                    <!--/row-->
                                 </div>
                              </section>
                           </div>
                           <div class="tab-pane" id="messages">
                              <h5 class="mb-3">MY ORDERS</h5>
                              <section class="py-3 bg-light">
                                 <div class="container moborders">
                                    <div class="row">
                                       <div class="col-lg-12 mb-6 mb-lg-0 position-relative">
                                          <div id="primary" class="content-area">
                                             <main id="main" class="site-main ">
                                                <div class="page type-page status-publish hentry">
                                                   <!-- .entry-header -->
                                                   <div class="entry-content">
                                                      <div class="woocommerce">
                                                         <form class="woocommerce-cart-form table-responsive" action="#" method="post">
                                                            <table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents">
                                                               <tbody>


                                                                    @if(Auth::check())
                                                                    @php
                                                                        $user_id = Auth::user()->id;
                                                                    @endphp
                                                                       @foreach (myOrders($user_id) as $data)
                                                                       @php
                                                                        $user_id = Auth::user()->id;
                                                                        $courseId = base64_encode($data->item_id);
                                                                        $orderdate = $data->order_date;
                                                                        $date =  date("d-m-Y", strtotime($orderdate) );
                                                                       @endphp

                                                                        <tr class="woocommerce-cart-form__cart-item cart_item">
                                                                            <td class="product-name" data-title="Product">
                                                                                <div class="d-flex align-items-center">
                                                                                <a href="javascript:void(0)">
                                                                                <img src="{{url('/uploads/course').'/'.$data->image}}" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="">
                                                                                </a>
                                                                                <div class="ms-6 mobcontent12">
                                                                                    <a href="javascript:void(0)"></a>
                                                                                </div>
                                                                                </div>
                                                                            </td>
                                                                            <td class="product-subtotal" data-title="Total">
                                                                                <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span></span>
                                                                            </td>

                                                                            <td class="product-subtotal" data-title="Date">
                                                                                <span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol"></span></span>
                                                                            </td>
                                                                        </tr>
                                                                        @endforeach
                                                                        @endif
                                                               </tbody>
                                                            </table>
                                                         </form>
                                                      </div>
                                                   </div>
                                                   <!-- .entry-content -->
                                                </div>
                                             </main>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </section>
                           </div>
                            <div class="tab-pane" id="edit">
                              <h5 class="mb-3">MY WISHLIST</h5>
                              <section class="py-3 bg-light">
                                 <div class="container">
                                    <div class="row">
                                       <div class="col-lg-12 mb-6 mb-lg-0 position-relative">
                                          <div id="primary" class="content-area">
                                             <main id="main" class="site-main ">
                                                <div class="page type-page status-publish hentry">
                                                   <!-- .entry-header -->
                                                   <div class="entry-content">
                                                      <div class="woocommerce">
                                                         <form class="woocommerce-cart-form table-responsive" action="#" method="post">
                                                            <table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents">
                                                               <tbody>