  <!--start main wrapper-->

  <!-- jscalender -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-jscalendar@1.4.5/source/jsCalendar.min.css" />
  <main class="main-wrapper">
      <div class="main-content">
          <!--breadcrumb-->
          <div class="row my-2">
              <div class="col-md-8 my-2">
                  <div>
                      <h3 class="fmon fh2">Overview</h3>
                      <div class="row my-2">
                          <div class="col-md-6">
                              <div class="profileCard p-2  ">
                                  <div class="d-flex gap-2 align-items-center">
                                      <img src="<?php echo base_url(); ?>assets/images/megaIcons/Ellipse 10.png" alt="">
                                      <div>
                                          <p class="fs1 mb-0">Rate</p>
                                          <p class="fs2 mb-0">$8.00 Per hour</p>
                                      </div>
                                  </div>
                                  <div class="row justify-content-end">
                                      <div class="col-md-8">
                                          <img class="w-100" src="<?php echo base_url(); ?>assets/images/megaIcons/chart.png" alt="">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="col-md-2">
                              <div class="profileCard p-2 ">

                                  <img class="d-block mx-auto" src="<?php echo base_url(); ?>assets/images/megaIcons/videos.png" alt="">
                                  <p class="text-center mt-1 fs2 mb-0">
                                      120
                                  </p>
                                  <p class="text-center mt-1 fs1 mb-0">
                                      Total Videos
                                  </p>

                              </div>
                          </div>
                          <div class="col-md-2">
                              <div class="profileCard p-2 ">

                                  <img class="d-block mx-auto" src="<?php echo base_url(); ?>assets/images/megaIcons/tainee.png" alt="">
                                  <p class="text-center mt-1 fs2 mb-0">
                                      120
                                  </p>
                                  <p class="text-center mt-1 fs1 mb-0">
                                      Total Trainee
                                  </p>

                              </div>
                          </div>

                          <div class="col-md-2">
                              <div class="profileCard p-2 ">

                                  <img class="d-block mx-auto" src="<?php echo base_url(); ?>assets/images/megaIcons/workout.png" alt="">
                                  <p class="text-center mt-1 fs2 mb-0">
                                      120
                                  </p>
                                  <p class="text-center mt-1 fs1 mb-0">
                                      Workout Plains
                                  </p>

                              </div>
                          </div>
                      </div>
                      <div class="row">
                          <div class="col-md-6 my-2">
                              <h3 class="fmon fh2">Schedules</h3>
                              <div class="d-flex justify-content-center">
                                  <div id="my-calendar"></div>
                              </div>
                          </div>
                          <div class="col-md-6 mt-2">
                              <h3 class="fmon fh2">
                                  Upcoming training
                              </h3>
                              <div class="row">
                                  <div class="col-md-12 mb-2">
                                      <div class="d-flex justify-content-between align-items-center profileCard p-2 ">
                                          <div class="d-flex align-items-center gap-2">
                                              <img src="<?php echo base_url(); ?>assets/images/megaIcons/Rectangle 4271.png" alt="">
                                              <div>
                                                  <p class="fs2 mb-0">Sarah John</p>
                                                  <p class="fs1">Starting Date/time: 27 June - 05:00 PM</p>
                                              </div>
                                          </div>
                                          <input class="form-check-input" type="radio" name="exampleRadios"
                                              id="exampleRadios1" value="option1" checked>

                                      </div>
                                  </div>
                                  <div class="col-md-12 my-2">
                                      <div class="d-flex justify-content-between align-items-center profileCard p-2 ">
                                          <div class="d-flex align-items-center gap-2">
                                              <img src="<?php echo base_url(); ?>assets/images/megaIcons/Rectangle 4271.png" alt="">
                                              <div>
                                                  <p class="fs2 mb-0">Sarah John</p>
                                                  <p class="fs1">Starting Date/time: 27 June - 05:00 PM</p>
                                              </div>
                                          </div>
                                          <input class="form-check-input" type="radio" name="exampleRadios"
                                              id="exampleRadios1" value="option1">

                                      </div>
                                  </div>
                                  <div class="col-md-12 my-2">
                                      <div class="d-flex justify-content-between align-items-center profileCard p-2 ">
                                          <div class="d-flex align-items-center gap-2">
                                              <img src="<?php echo base_url(); ?>assets/images/megaIcons/Rectangle 4271.png" alt="">
                                              <div>
                                                  <p class="fs2 mb-0">Sarah John</p>
                                                  <p class="fs1">Starting Date/time: 27 June - 05:00 PM</p>
                                              </div>
                                          </div>
                                          <input class="form-check-input" type="radio" name="exampleRadios"
                                              id="exampleRadios1" value="option1">

                                      </div>
                                  </div>
                              </div>

                          </div>
                      </div>

                  </div>
              </div>
              <div class="col-md-4 my-2">
                  <div>
                      <h3 class="fmon fh2">Profile</h3>
                      <div class="profileCard p-2">
                          <div>
                          <!-- <?php echo !empty($user->image) ? $user->image : base_url('assets/images/pIMage.png'); ?>" alt="Profile Image" -->
                          <img class="d-block mx-auto" src="<?php echo !empty($user->image) ? $user->image : base_url('assets/images/pIMage.png'); ?>" alt="Profile Image" height="100">
                              <!-- <img class="d-block mx-auto" src="<?php echo base_url(); ?>assets/images/pIMage.png" alt=""> -->
                              <p class="text-center mb-1 pname"><?php echo !empty($user->name) ? $user->name : 'User Name'; ?></p>
                          </div>
                          <div class="d-flex justify-content-center">
                              <div class="d-flex gap-2">
                                  <span class="social">
                                      <img src="<?php echo base_url(); ?>assets/images/fac.png" alt="">
                                  </span>
                                  <span class="social">
                                      <img src="<?php echo base_url(); ?>assets/images/x.png" alt="">
                                  </span>
                                  <span class="social">
                                      <img src="<?php echo base_url(); ?>assets/images/lin.png" alt="">
                                  </span>
                                  <span class="social">
                                      <img src="<?php echo base_url(); ?>assets/images/you.png" alt="">
                                  </span>
                              </div>
                          </div>
                          <div class="my-2">
                              <div class="d-flex align-items-center my-2 gap-2">
                                  <span><img src="<?php echo base_url(); ?>assets/images/ema.png" alt=""></span>
                                  <p class="m-0 fs4"><?php echo !empty($userdetails['email']) ? $userdetails['email'] : ''; ?></p>
                              </div>
                              <div class="d-flex align-items-center my-2 gap-2">
                                  <span><img src="<?php echo base_url(); ?>assets/images/pho.png" alt=""></span>
                                  <p class="m-0 fs4"><?php echo !empty($userdetails['phone']) ? $userdetails['phone'] : ''; ?></p>
                              </div>
                              <div class="d-flex align-items-center my-2 gap-2">
                                  <span><img src="<?php echo base_url(); ?>assets/images/loc.png" alt=""></span>
                                  <p class="m-0 fs4"><?php echo !empty($userdetails['address']) ? $userdetails['address'] : ''; ?></p>
                              </div>
                          </div>
                          <hr>
                          <div class="d-flex justify-content-center">
                              <a href="<?php echo base_url(); ?>users/profile">View full Profile</a>
                          </div>
                      </div>
                  </div>
              </div>
          </div>

          <div class="row my-2">
              <h3 class="fh2 fmon">Sarah John today Diet</h3>
              <div class="col-md-3 my-2">
                  <div class="profileCard p-2">
                      <div class="d-flex justify-content-between">
                          <div>
                              <p class="fs2">Toast with salad</p>
                              <p class="fs1">Day 13</p>
                              <p class="fs1">For BreakFast</p>
                          </div>
                          <img src="<?php echo base_url(); ?>assets/images/megaIcons/salad.png" alt="">
                      </div>

                  </div>
              </div>
              <div class="col-md-3 my-2">
                  <div class="profileCard p-2">
                      <div class="d-flex justify-content-between">
                          <div>
                              <p class="fs2">Toast with salad</p>
                              <p class="fs1">Day 13</p>
                              <p class="fs1">For BreakFast</p>
                          </div>
                          <img src="<?php echo base_url(); ?>assets/images/megaIcons/salad.png" alt="">
                      </div>

                  </div>
              </div>
              <div class="col-md-3 my-2">
                  <div class="profileCard p-2">
                      <div class="d-flex justify-content-between">
                          <div>
                              <p class="fs2">Toast with salad</p>
                              <p class="fs1">Day 13</p>
                              <p class="fs1">For BreakFast</p>
                          </div>
                          <img src="<?php echo base_url(); ?>assets/images/megaIcons/salad.png" alt="">
                      </div>

                  </div>
              </div>
          </div>
      </div>

  </main>
  <!--end main wrapper-->


  <!--start overlay-->
  <div class="overlay btn-toggle"></div>

  <!-- jsCalendar JS -->
  <script src="https://cdn.jsdelivr.net/npm/simple-jscalendar@1.4.5/source/jsCalendar.min.js"></script>
  <script>
// Initialize jsCalendar
document.addEventListener("DOMContentLoaded", function() {
    const calendar = jsCalendar.new("#my-calendar");

    // Example: Add an event listener for date click
    calendar.onDateClick(function(event, date) {
        alert("You clicked on " + date.toDateString());
    });
});
  </script>