<?php
include('dbconnect.php');
if (empty($_SESSION['user_id']) || empty($_SESSION['role'])) {
    header("Location: auth-signin.php");
    exit();
}
include('function.php');
include('header.php');    
if (isset($_GET['id'])) {
    $leadId = base64_decode($_GET['id']);
    
    $sql = mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM tbl_lead_user where tbl_lead_user_id='".$leadId."'"));
    $sqlprofile = mysqli_fetch_array(mysqli_query($conn,"SELECT * FROM  tbl_lead_user_profile where tbl_lead_user_profile_id='".$sql['tbl_lead_user_profile_id']."'"));
    $project_name= get_project_name($leadId);
}
?>
<!-- ==================================================== -->
          <!-- Start right Content here -->
          <!-- ==================================================== -->
          <div class="page-content">

               <!-- Start Container Fluid -->
               <div class="container-fluid">

                    <!-- ========== Page Title Start ========== -->
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <h4 class="mb-0 fw-semibold">Customer Overview</h4>
                                <ol class="breadcrumb mb-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Customers</a></li>
                                    <li class="breadcrumb-item active">Customer Overview</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <!-- ========== Page Title End ========== -->

                    <div class="row">
                         <div class="col-xl-8 col-lg-12">
                              <div class="card">
                                   <div class="card-body">
                                        <!--div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                                             <div class="carousel-inner">
                                                  <div class="carousel-item active">
                                                       <img src="assets/images/properties/p-14.jpg" class="d-block w-100 rounded" alt="img-6">
                                                       <div class="carousel-caption">

                                                       </div>
                                                  </div>
                                                  <div class="carousel-item">
                                                       <img src="assets/images/properties/p-13.jpg" class="d-block w-100 rounded" alt="img-7">
                                                       <div class="carousel-caption">

                                                       </div>
                                                  </div>
                                                  <div class="carousel-item">
                                                       <img src="assets/images/properties/p-11.jpg" class="d-block w-100 rounded" alt="img-5">
                                                       <div class="carousel-caption">

                                                       </div>
                                                  </div>
                                                  <div class="carousel-item">
                                                       <img src="assets/images/properties/p-15.jpg" class="d-block w-100 rounded" alt="img-5">
                                                       <div class="carousel-caption">
                                                       </div>
                                                  </div>
                                             </div>
                                             <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                                                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                                  <span class="visually-hidden">Previous</span>
                                             </button>
                                             <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                                                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                  <span class="visually-hidden">Next</span>
                                             </button>
                                        </div-->

                                        <div class="d-flex align-items-center my-3 gap-3">
                                             <img src="assets/images/users/avatar-2.jpg" alt="" class="rounded-circle avatar-xl img-thumbnail">
                                             <div>
                                                  <h3 class="fw-semibold mb-1"><?php print $sqlprofile['tbl_lead_user_profile_name']; ?></h3>
                                                  <a href="#!" class="link-primary fw-medium fs-14"><?php print $sqlprofile['tbl_lead_user_profile_email']; ?></a>
                                             </div>

                                        </div>
                                        <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mt-3">

                                             <div>
                                                  <a href="#!" class="btn btn-primary"><i class="ri-chat-1-fill"></i> Chat</a>
                                                  <a href="#!" class="btn btn-outline-primary"><i class="ri-phone-fill"></i> Phone</a>
                                             </div>
                                             <div class="d-flex gap-1">
                                                  <a href="javascript: void(0);" class="btn btn-dark avatar-sm d-flex align-items-center justify-content-center fs-20" data-bs-toggle="modal" data-bs-target="#editModal">
                                                       <i class="ri-edit-fill"></i>
                                                  </a>
                                                  <a href="javascript: void(0);" class="btn btn-primary avatar-sm d-flex align-items-center justify-content-center fs-20">
                                                       <i class="ri-share-fill"></i>
                                                  </a>
                                             </div>
                                        </div>

                                        <div class="row my-4">
                                             <div class="col-lg-3">
                                                  <p class="text-dark fw-semibold fs-16 mb-1">Email Address :</p>
                                                  <p class="mb-0"><?php print $sqlprofile['tbl_lead_user_profile_email']; ?></p>
                                             </div>
                                             <div class="col-lg-3">
                                                  <p class="text-dark fw-semibold fs-16 mb-1">Phone Number :</p>
                                                  <p class="mb-0"><?php print $sqlprofile['tbl_lead_user_profile_mobile']; ?></p>
                                             </div>
                                             <div class="col-lg-3">
                                                  <p class="text-dark fw-semibold fs-16 mb-1">Alternate Phone Number :</p>
                                                  <p class="mb-0"><?php print $sqlprofile['tbl_lead_user_profile_alt_mobile']; ?></p>
                                             </div>
                                             <div class="col-lg-4">
                                                  <p class="text-dark fw-semibold fs-16 mb-1">Project :</p>
                                                  <p class="mb-0"><?php print $project_name; ?> </p>
                                             </div>
                                             <div class="col-lg-2">
                                                  <p class="text-dark fw-semibold fs-16 mb-1">Status :</p>
                                                  <p class="mb-0"><span class="badge bg-success text-white fs-12 px-2 py-1">Active</span> </p>
                                             </div>
                                        </div>
                                        
                                        <!-- Edit Modal -->
                                        <div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
                                          <div class="modal-dialog">
                                            <form method="POST" action="update_profile.php">
                                              <div class="modal-content">
                                                <div class="modal-header">
                                                  <h5 class="modal-title" id="editModalLabel">Edit Profile</h5>
                                                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                </div>
                                                <div class="modal-body">
                                        
                                                  <input type="hidden" name="lead_id" value="<?php echo $leadId; ?>">
                                                  <input type="hidden" name="lead_profile_id" value="<?php echo $sqlprofile['tbl_lead_user_profile_id']; ?>">
                                        
                                                  <div class="mb-3">
                                                    <label>Email Address</label>
                                                    <input type="email" class="form-control" name="email" value="<?php echo $sqlprofile['tbl_lead_user_profile_email']; ?>" required>
                                                  </div>
                                        
                                                  <div class="mb-3">
                                                    <label>Phone Number</label>
                                                    <input type="text" class="form-control" name="phone" value="<?php echo $sqlprofile['tbl_lead_user_profile_mobile']; ?>" required>
                                                  </div>
                                                  
                                                  <div class="mb-3">
                                                    <label>Alternate Phone Number</label>
                                                    <input type="text" class="form-control" name="alt-phone" value="<?php echo $sqlprofile['tbl_lead_user_profile_alt_mobile']; ?>">
                                                  </div>
                                        
                                                  <div class="mb-3">
                                                      <label>Project</label>
                                                      <select class="form-control" name="project" id="project" data-choices data-choices-sorting-false>
                                                        <option value="">Select Project</option>
                                                        <?php
                                                        $psql = mysqli_query($conn, "SELECT tbl_project_id, tbl_project_name FROM tbl_project WHERE tbl_project_flag=0");
                                                        $sql_prjid=mysqli_fetch_array(mysqli_query($conn,"select tbl_lead_user_prj_id from tbl_lead_user_projects where 1 and	tbl_lead_user_id='".$leadId."'"));
                                                        $currentProjectId = $sql_prjid['tbl_lead_user_prj_id']; // Assuming this is the current project ID
                                                        while ($row = mysqli_fetch_array($psql)) {
                                                          $selected = ($row['tbl_project_id'] == $currentProjectId) ? 'selected' : '';
                                                          echo "<option value=\"{$row['tbl_project_id']}\" $selected>{$row['tbl_project_name']}</option>";
                                                        }
                                                        ?>
                                                      </select>
                                                    </div>
                                                  
                                                </div>
                                                <div class="modal-footer">
                                                  <button type="submit" name="update_profile" class="btn btn-primary">Save Changes</button>
                                                </div>
                                              </div>
                                            </form>
                                          </div>
                                        </div>


                                        <!--div class="row">
                                             <div class="col-lg-4">                                                  
                                                  <h4 class="card-title mb-2">Social Media :</h4>
                                                  <ul class="list-inline d-flex gap-1 mb-0 align-items-center mt-3">
                                                       <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="btn btn-soft-primary avatar-sm d-flex align-items-center justify-content-center fs-20">
                                                                 <i class="ri-facebook-fill"></i>
                                                            </a>
                                                       </li>
          
                                                       <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="btn btn-soft-danger avatar-sm d-flex align-items-center justify-content-center fs-20">
                                                                 <i class="ri-instagram-fill"></i>
                                                            </a>
                                                       </li>
          
                                                       <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="btn btn-soft-info avatar-sm d-flex align-items-center justify-content-center  fs-20">
                                                                 <i class="ri-twitter-fill"></i>
                                                            </a>
                                                       </li>
                                                       <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="btn btn-soft-success avatar-sm d-flex align-items-center justify-content-center fs-20">
                                                                 <i class="ri-whatsapp-fill"></i>
                                                            </a>
                                                       </li>
                                                       <li class="list-inline-item">
                                                            <a href="javascript: void(0);" class="btn btn-soft-warning avatar-sm d-flex align-items-center justify-content-center fs-20">
                                                                 <i class="ri-mail-fill"></i>
                                                            </a>
                                                       </li>
                                                  </ul>
                                             </div>
                                             <div class="col-lg-8">
                                                  <h4 class="card-title mb-2">Preferences :</h4>
                                                  <p class="mb-0"><i class="ri-circle-fill fs-10 me-2 text-success"></i> 3-4 bedrooms, 2-3 bathrooms</p>
                                                  <p class="mb-0"><i class="ri-circle-fill fs-10 me-2 text-success"></i> Close to public transportation, good school district, backyard, modern kitchen</p>
                                             </div>
                                        </div-->
                                   </div>
                              </div>
                              <!--div class="card">
                                   <div class="card-body">
                                        <div class="row">
                                             <div class="col-lg-4">
                                                  <div class="border p-2 rounded">
                                                       <div class="d-flex gap-3 align-items-center">
                                                            <div class="avatar bg-success bg-opacity-10 rounded">
                                                                 <iconify-icon icon="solar:home-2-bold" class="fs-28 text-success avatar-title"></iconify-icon>
                                                            </div>
                                                            <div>
                                                                 <p class="text-dark fw-semibold fs-16 mb-0">Active Property</p>
                                                                 <p class="mb-0">350 Property Active</p>
                                                            </div>
                                                       </div>
                                                       <div class="d-flex justify-content-between mt-4">
                                                            <p class="mb-1 text-dark  fw-medium fa-15">View Property</p>
                                                            <div>
                                                                 <p class="mb-0 text-dark fw-semibold fs-15">231</p>
                                                            </div>

                                                       </div>
                                                       <div class="progress mt-2" style="height: 10px;">
                                                            <div class="progress-bar progress-bar  progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: 60%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70"></div>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="col-lg-4">
                                                  <div class="border p-2 rounded">
                                                       <div class="d-flex gap-3 align-items-center">
                                                            <div class="avatar bg-warning bg-opacity-10 rounded">
                                                                 <iconify-icon icon="solar:home-bold" class="fs-28 text-warning avatar-title"></iconify-icon>
                                                            </div>
                                                            <div>
                                                                 <p class="text-dark fw-semibold fs-16 mb-0">View Property</p>
                                                                 <p class="mb-0">231 Property View</p>
                                                            </div>
                                                       </div>
                                                       <div class="d-flex justify-content-between mt-4">
                                                            <p class="mb-1 text-dark  fw-medium fa-15">Own Property</p>
                                                            <div>
                                                                 <p class="mb-0 text-dark fw-semibold fs-15">27</p>
                                                            </div>

                                                       </div>
                                                       <div class="progress mt-2" style="height: 10px;">
                                                            <div class="progress-bar progress-bar  progress-bar-striped progress-bar-animated bg-warning" role="progressbar" style="width: 20%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70"></div>
                                                       </div>
                                                  </div>
                                             </div>
                                             <div class="col-lg-4">
                                                  <div class="border p-2 rounded">
                                                       <div class="d-flex gap-3 align-items-center">
                                                            <div class="avatar bg-primary bg-opacity-10 rounded">
                                                                 <iconify-icon icon="solar:money-bag-bold" class="fs-28 text-primary avatar-title"></iconify-icon>
                                                            </div>
                                                            <div>
                                                                 <p class="text-dark fw-semibold fs-16 mb-0">Own Property</p>
                                                                 <p class="mb-0">27 Property Own</p>
                                                            </div>
                                                       </div>
                                                       <div class="d-flex justify-content-between mt-4">
                                                            <p class="mb-1 text-dark  fw-medium fa-15">Invest On Property</p>
                                                            <div>
                                                                 <p class="mb-0 text-dark fw-semibold fs-15">$928,128</p>
                                                            </div>

                                                       </div>
                                                       <div class="progress mt-2" style="height: 10px;">
                                                            <div class="progress-bar progress-bar  progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 80%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="70"></div>
                                                       </div>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                              </div-->
                              <!--div class="card">
                                   <div class="card-header">
                                    <h4 class="card-title">Interested Properties (3)</h4>
                                   </div>
                              </div-->
                              <!--div class="row mt-3">
                                   <div class="col-lg-4">
                                        <div class="card overflow-hidden">
                                             <div class="position-relative">
                                                  <img src="assets/images/properties/p-1.jpg" alt="" class="img-fluid rounded-top">
                                                  <span class="position-absolute top-0 start-0 p-1">
                                                       <button type="button" class="btn btn-warning avatar-sm d-inline-flex align-items-center justify-content-center fs-20 rounded text-light"><iconify-icon icon="solar:bookmark-broken"></iconify-icon></button>
                                                  </span>                                                  
                                             </div>
                                             <div class="card-body">
                                                  <div class="d-flex align-items-center gap-2">
                                                       <div class="avatar bg-light rounded">
                                                            <iconify-icon icon="solar:home-bold-duotone" class="fs-24 text-primary avatar-title"></iconify-icon>
                                                       </div>
                                                       <div>
                                                            <a href="#!" class="text-dark fw-medium fs-16">Dvilla Residences Batu</a>
                                                            <p class="text-muted mb-0">4604 , Philli Lane
                                                                 Kiowa</p>
                                                       </div>
                                                  </div>
                                                  <div class="row mt-2 g-2">
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:bed-broken" class="align-middle"></iconify-icon></span>
                                                                 5 Beds
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:bath-broken" class="align-middle"></iconify-icon></span>
                                                                 4 Bath
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:scale-broken" class="align-middle"></iconify-icon></span>
                                                                 1400ft
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:double-alt-arrow-up-broken" class="align-middle"></iconify-icon></span>
                                                                 3 Floor
                                                            </span>
                                                       </div>
                                                  </div>

                                             </div>                                            
                                        </div>
                                   </div>
                                   <div class="col-lg-4">
                                        <div class="card overflow-hidden">
                                             <div class="position-relative">
                                                  <img src="assets/images/properties/p-3.jpg" alt="" class="img-fluid rounded-top">
                                                  <span class="position-absolute top-0 start-0 p-1">
                                                       <button type="button" class="btn btn-warning avatar-sm d-inline-flex align-items-center justify-content-center fs-20 rounded text-light"><iconify-icon icon="solar:bookmark-broken"></iconify-icon></button>
                                                  </span>
                                             </div>
                                             <div class="card-body">
                                                  <div class="d-flex align-items-center gap-2">
                                                       <div class="avatar bg-light rounded">
                                                            <iconify-icon icon="solar:home-bold-duotone" class="fs-24 text-primary avatar-title"></iconify-icon>
                                                       </div>
                                                       <div>
                                                            <a href="#!" class="text-dark fw-medium fs-16">Tungis Luxury</a>
                                                            <p class="text-muted mb-0">900 , Creside WI 54913</p>
                                                       </div>
                                                  </div>
                                                  <div class="row mt-2 g-2">
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:bed-broken" class="align-middle"></iconify-icon></span>
                                                                 4 Beds
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:bath-broken" class="align-middle"></iconify-icon></span>
                                                                 3 Bath
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:scale-broken" class="align-middle"></iconify-icon></span>
                                                                 1200ft
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:double-alt-arrow-up-broken" class="align-middle"></iconify-icon></span>
                                                                 2 Floor
                                                            </span>
                                                       </div>
                                                  </div>

                                             </div>                                            
                                        </div>
                                   </div>
                                   <div class="col-lg-4">
                                        <div class="card overflow-hidden">
                                             <div class="position-relative">
                                                  <img src="assets/images/properties/p-6.jpg" alt="" class="img-fluid rounded-top">
                                                  <span class="position-absolute top-0 start-0 p-1">
                                                       <button type="button" class="btn btn-warning avatar-sm d-inline-flex align-items-center justify-content-center fs-20 rounded text-light"><iconify-icon icon="solar:bookmark-broken"></iconify-icon></button>
                                                  </span>                                                  
                                             </div>
                                             <div class="card-body">
                                                  <div class="d-flex align-items-center gap-2">
                                                       <div class="avatar bg-light rounded">
                                                            <iconify-icon icon="solar:home-bold-duotone" class="fs-24 text-primary avatar-title"></iconify-icon>
                                                       </div>
                                                       <div>
                                                            <a href="#!" class="text-dark fw-medium fs-16">Luxury Penthouse</a>
                                                            <p class="text-muted mb-0">Sumner Street Los Angeles</p>
                                                       </div>
                                                  </div>
                                                  <div class="row mt-2 g-2">
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:bed-broken" class="align-middle"></iconify-icon></span>
                                                                 7 Beds
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:bath-broken" class="align-middle"></iconify-icon></span>
                                                                 6 Bath
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:scale-broken" class="align-middle"></iconify-icon></span>
                                                                 2000ft
                                                            </span>
                                                       </div>
                                                       <div class="col-lg-4 col-4">
                                                            <span class="badge bg-light-subtle text-muted border fs-12">
                                                                 <span class="fs-16"><iconify-icon icon="solar:double-alt-arrow-up-broken" class="align-middle"></iconify-icon></span>
                                                                 1 Floor
                                                            </span>
                                                       </div>
                                                  </div>

                                             </div>                                             
                                        </div>
                                   </div>
                              </div-->
                         </div>
                         <div class="col-xl-4 col-lg-12">
                              <div class="card">
                                   <div class="card-header d-flex align-items-center justify-content-between">
                                        <h4 class="card-title">Create Note</h4>
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                            Create
                                        </button>
                                        
                                       <!-- Modal -->
                                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="exampleModalLabel">New Note</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    
                                                    <form class="row g-3" name="noteForm" action="#" method="POST" onsubmit="return validateNoteForm()" enctype="multipart/form-data">	
                                                    <div class="modal-body">
                        								<div class="col-md-12">
                        									<label for="validationDefault01" class="form-label">Note</label>
                        									 <textarea name="note" id="note" class="form-control" placeholder="e.g. Enter Note..."  rows="3"></textarea>
                        								</div>
                                                    </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                            <button type="submit" class="btn btn-primary"  name="note_form">Add Note</button>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <!--div class="dropdown">
                                             <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light rounded show" data-bs-toggle="dropdown" aria-expanded="true">
                                                  This Month
                                             </a>
                                             <div class="dropdown-menu dropdown-menu-end" data-popper-placement="bottom-end" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);">
                                                 
                                                  <a href="#!" class="dropdown-item">Day</a>
                                                
                                                  <a href="#!" class="dropdown-item">Month</a>
                                               
                                                  <a href="#!" class="dropdown-item">Year</a>
                                             </div>
                                        </div-->
                                   </div>
                                   

                                   <!--div class="card-body">
                                        <div class="row">
                                             <div class="col-12">
                                                  <div id="weekly-inquiry" class="apex-charts"></div>
                                             </div> 
                                        </div>
                                   </div>
                                   <div class="card-footer d-flex align-items-center justify-content-between border-top">
                                        <p class="mb-0 fw-medium fs-15">Jan-Dec 2023 </p>
                                        <p class="mb-0 text-dark fw-semibold fs-15">First Week 37</p>
                                   </div-->
                              </div>
                              <div class="card">
                                   <div class="card-header">
                                        <h4 class="card-title">Recent Activities </h4>
                                   </div>
                                   <div class="card-body">
                                        <!--div class="p-3 bg-primary bg-gradient rounded-4 border border-light border-2 shadow-sm">
                                             <div class="d-flex align-items-center">
                                                  <img src="assets/images/chip.png" alt="" class="avatar">
                                                  <div class="ms-auto">
                                                       <img src="assets/images/card/mastercard.svg" alt="" class="avatar">
                                                  </div>
                                             </div>
                                             <div class="mt-5">

                                                  <h4 class="text-white d-flex gap-2"><span class="text-white-50">XXXX</span> <span class="text-white-50">XXXX</span> <span class="text-white-50">XXXX</span> 3467</h4>
                                             </div>
                                             <div class="d-flex align-items-center justify-content-between mt-4">
                                                  <div>
                                                       <p class="text-white-50 mb-2">Holder Name</p>
                                                       <h4 class="mb-0 text-white">Ray C. Nichols</h4>
                                                  </div>
                                                  <div>
                                                       <p class="text-white-50 mb-2">Valid</p>
                                                       <h4 class="mb-0 text-white">05/26</h4>
                                                  </div>
                                                  <img src="assets/images/contactless-payment.png" alt="" class="img-fluid">
                                             </div>
                                        </div>
                                        <div class="mt-4">
                                             <div class="d-flex align-items-center gap-3 border-bottom pb-3">
                                                  <div class="avatar bg-primary bg-opacity-10 rounded">
                                                       <iconify-icon icon="solar:square-transfer-horizontal-bold" class="fs-28 text-primary avatar-title"></iconify-icon>
                                                  </div>
                                                  <div>
                                                       <p class="mb-1 text-dark fw-medium fs-15">Michael A. Miner</p>
                                                       <p class="text-muted mb-0">michaelminer@dayrep.com</p>
                                                  </div>
                                                  <div class="ms-auto">
                                                       <p class="mb-1 fs-16 text-dark fw-medium">$13,987 <span><i class="ri-checkbox-circle-line text-success ms-1"></i></span></p>
                                                       <p class="mb-0 fs-13">TXN-341220</p>
                                                  </div>
                                             </div>
                                             <div class="d-flex align-items-center gap-3 pt-3 rounded">
                                                  <div class="avatar bg-primary bg-opacity-10 rounded">
                                                       <iconify-icon icon="solar:square-transfer-horizontal-bold" class="fs-28 text-primary avatar-title"></iconify-icon>
                                                  </div>
                                                  <div>
                                                       <p class="mb-1 text-dark fw-medium fs-15">Theresa T. Brose</p>
                                                       <p class="text-muted mb-0">theresbrosea@dayrep.com</p>
                                                  </div>
                                                  <div class="ms-auto">
                                                       <p class="mb-1 fs-16 text-dark fw-medium">$2,710 <span><i class="ri-checkbox-circle-line text-success ms-1"></i></span></p>
                                                       <p class="mb-0 fs-13">TXN-836451</p>
                                                  </div>
                                             </div>
                                             <div class="mt-4">
                                                  <a href="#!" class="link-primary fw-medium">View More</a>
                                             </div>
                                        </div-->
                                       
                                        
                                        <div class="timeline">
                                        
                                        <?php
                                        $stmt1 = $conn->prepare("SELECT * FROM tbl_note WHERE tbl_lead_user_id = ? ORDER BY tbl_note_cdate DESC");
                                        $stmt1->bind_param("s", $leadId); // "s" represents a string, change to "i" if it's an integer
                                        $stmt1->execute();
                                        $result1 = $stmt1->get_result();
                                        
                                        if($result1){
                                        ?>
                                            <article class="timeline-time">
                                                <div class="time-show d-flex align-items-center justify-content-center mt-0">
                                                    <h5 class="mb-0 text-uppercase fs-14 fw-semibold">Note</h5>
                                                </div>
                                            </article>
                                            
                                            <article class="timeline-item">
                                                <div class="timeline-desk">
                                                    <div class="timeline-box clearfix">
                                                        <span class="timeline-icon"></span>
                                                        <div class="overflow-hidden">
                                                            <div class="card border-primary border">
                                        
                                        <?php
                                        }
                                        while ($row = $result1->fetch_assoc()) {
                                             if($row['tbl_note_cdate']){
                                                $notedate = new DateTime($row['tbl_note_cdate']);
                                                $notedate = $notedate->format('d-m-Y h:i A');
                                            }
                                        ?>
                                            <div class="card-body">
                                               <h5 class="mt-0 fs-16">Creation Date: <?php print $notedate; ?>
                                                </h5>
                                               
                                                <p class="text-muted mb-0"><b>Note: </b> <?php print $row['tbl_note_text']; ?></p>
                                            </div>
                                        <?php    
                                        }
                                        ?>
                                        
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                        
                                        
                                        <?php
                                        
                                        
                                        $stmt = $conn->prepare("SELECT * FROM tbl_subfollowup WHERE tbl_lead_user_id = ? ORDER BY tbl_subfollowup_cdate DESC");
                                        $stmt->bind_param("s", $leadId); // "s" represents a string, change to "i" if it's an integer
                                        $stmt->execute();
                                        $result = $stmt->get_result();
                                        
                                        while ($row = $result->fetch_assoc()) {
                                            // Process each row
                                            if($row['tbl_subfollowup_date']){
                                                $date = new DateTime($row['tbl_subfollowup_date']);
                                                $f_date = $date->format('d-m-Y h:i A');
                                            }
                                            
                                            $cdate = new DateTime($row['tbl_subfollowup_cdate']);
                                            $cc_date = $cdate->format('d-m-Y h:i A');
                                           
                                       ?>
                                            <article class="timeline-time">
                                                <div class="time-show d-flex align-items-center justify-content-center mt-0">
                                                    <h5 class="mb-0 text-uppercase fs-14 fw-semibold"><?php print htmlspecialchars($row['tbl_subfollowup_status_name']); ?></h5>
                                                </div>
                                            </article>


                                            <article class="timeline-item">
                                                <div class="timeline-desk">
                                                    <div class="timeline-box clearfix">
                                                        <span class="timeline-icon"></span>
                                                        <div class="overflow-hidden">
                                                            <div class="card border-primary border">
                                                                <div class="card-body">
                                                                   <h5 class="mt-0 fs-16">Creation Date: <?php print $cc_date; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Project: <?php print getproject_name($row['tbl_subfollowup_project_id']); ?>
                                                                    </h5>
                                                                    <?php 
                                                                    if($row['tbl_subfollowup_status_id'] != 6){
                                                                    ?>
                                                                   <h5 class="mt-0 fs-16">Followup Date: <?php print $f_date; ?>
                                                                    </h5>
                                                                    <?php 
                                                                    }
                                                                    if($row['tbl_subfollowup_status_id'] == 3 || $row['tbl_subfollowup_status_id'] == 4){
                                                                        $svdate = new DateTime($row['tbl_subfollowup_sv_scheduled_date']);
                                                                        $sv_date = $date->format('d-m-Y h:i A');
                                                                    ?>
                                                                    <h5 class="mt-0 fs-16">SV Date: <?php print $sv_date; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Type of Site Visit: <?php print $row['tbl_subfollowup_sv_type']; ?>
                                                                    </h5>
                                                                    <?php } ?>
                                                                    
                                                                    <?php 
                                                                    if($row['tbl_subfollowup_status_id'] == 7){
                                                                        $tokendate = new DateTime($row['tbl_subfollowup_eoi_token_date']);
                                                                        $tokendate = $date->format('d-m-Y h:i A');
                                                                    ?>
                                                                    <h5 class="mt-0 fs-16">Token Date: <?php print $tokendate; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Token Amount: <?php print $row['tbl_subfollowup_eoi_token_amount']; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Validity Date: <?php print $row['tbl_subfollowup_eoi_validity_date']; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Token Unit Price: <?php print $row['tbl_subfollowup_eoi_unit_price']; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Unit No: <?php print $row['tbl_subfollowup_eoi_unit_no']; ?>
                                                                    </h5>
                                                                    <?php } ?>
                                                                    
                                                                    <?php 
                                                                    if($row['tbl_subfollowup_status_id'] == 5){
                                                                        $bookingdate = new DateTime($row['tbl_subfollowup_booking_date']);
                                                                        $bookingdate = $date->format('d-m-Y h:i A');
                                                                    ?>
                                                                    <h5 class="mt-0 fs-16">Booking Date: <?php print $bookingdate; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Purchase Price: <?php print $row['tbl_subfollowup_booking_net_purchase_price']; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Amount Paid: <?php print $row['tbl_subfollowup_booking_amt_paid']; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Unit No: <?php print $row['tbl_subfollowup_booking_unit_no']; ?>
                                                                    </h5>
                                                                    <?php } ?>
                                                                    
                                                                    <?php 
                                                                    if($row['tbl_subfollowup_status_id'] != 3 && $row['tbl_subfollowup_status_id'] != 4 && $row['tbl_subfollowup_status_id'] != 7 && $row['tbl_subfollowup_status_id'] != 5){
                                                                    ?>
                                                                    <h5 class="mt-0 fs-16">Reason: <?php print $row['tbl_subfollowup_reason']; ?>
                                                                    </h5>
                                                                    <?php } ?>
                                                                    <p class="text-muted mb-0"><b>Comments: </b> <?php print $row['tbl_subfollowup_comment']; ?></p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </article>
                                        <?php
                                         }
                                        $stmt->close();
                                        ?>
                                        <article class="timeline-time">
                                                <div class="time-show d-flex align-items-center justify-content-center mt-0">
                                                    <h5 class="mb-0 text-uppercase fs-14 fw-semibold">Lead Creation</h5>
                                                </div>
                                            </article>


                                            <article class="timeline-item">
                                                <div class="timeline-desk">
                                                    <div class="timeline-box clearfix">
                                                        <span class="timeline-icon"></span>
                                                        <div class="overflow-hidden">
                                                            <div class="card border-primary border">
                                                                <div class="card-body">
                                                                    <?php
                                                                    $date = new DateTime($sql['tbl_lead_user_cdate']);
                                                                    $lead_cdate = $date->format('d-m-Y h:i A');
                                                                    ?>
                                                                    <h5 class="mt-0 fs-16">Date: <?php print $lead_cdate; ?>
                                                                    </h5>
                                                                    <h5 class="mt-0 fs-16">Project: <?php print getproject_name($sql['tbl_lead_user_project_id']); ?>
                                                                    </h5>
                                                                    <!--p class="text-muted mb-0"> <b>Comments:</b></p-->
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </article>

                                        </div>
                                   </div>
                              </div>
                              <style>
        .timeline-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px;
    width: 55%;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .timeline-item {
        width: 90%; /* Increase width for smaller screens */
        flex-direction: column; /* Stack content vertically if needed */
        padding: 12px; /* Slightly increase padding */
    }
}

@media (max-width: 480px) {
    .timeline-item {
        width: 100%; /* Full width on very small screens */
        padding: 15px; /* Increase padding for better spacing */
    }
}

        .timeline-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 368%;
            max-width: 654px; /* Limit width for larger screens */
        }

        .timeline-icon {
            width: 15px;
            height: 15px;
            background-color: #007bff;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .timeline-item {
                flex-direction: column;
                align-items: flex-start;
            }

            .timeline-box {
                width: 100%;
            }

            .timeline-icon {
                margin-bottom: 5px;
            }
        }
    </style>
                              <!--div class="card">
                                   <div class="card-header">
                                        <h4 class="card-title">Own Property</h4>
                                   </div>
                                   <div class="card-body">                                        
                                        <div id="own-property" class="apex-charts"></div>
                                        <div class="d-flex justify-content-between align-content-center">                                             
                                             <div class="d-flex align-items-center gap-3">
                                                  <div class="avatar flex-shrink-0">
                                                      <span class="avatar-title bg-danger-subtle text-danger fw-bold rounded">
                                                       <i class="ri-arrow-up-line fs-20"></i>
                                                      </span>
                                                  </div>
                                                  <div>
                                                      <h4 class="text-dark fw-semibold mb-1">$928,128</h4>
                                                      <p class="mb-0 text-muted">Total Invest On Property</p>
                                                  </div>
                                              </div>
                                              <div class="d-flex align-items-center gap-3">
                                                  <div class="avatar flex-shrink-0">
                                                       <span class="avatar-title bg-success-subtle text-success fw-bold rounded">
                                                            <i class="ri-arrow-down-line fs-20"></i>
                                                       </span>
                                                  </div>
                                                  <div>
                                                       <h4 class="text-dark fw-semibold mb-1">$613,321.12</h4>
                                                       <p class="mb-0 text-muted">Income</p>
                                                  </div>
                                             </div>
                                        </div>
                                   </div>
                              </div-->
                         </div>
                    </div>

                    <!--div class="row">
                         <div class="col-xl-12">
                              <div class="card">
                                   <div class="card-header d-flex justify-content-between align-items-center">
                                        <div>
                                             <h4 class="card-title">Transaction History</h4>
                                        </div>
                                        <div class="dropdown">
                                             <a href="#" class="dropdown-toggle btn btn-sm btn-outline-light rounded" data-bs-toggle="dropdown" aria-expanded="false">
                                                  This Month
                                             </a>
                                             <div class="dropdown-menu dropdown-menu-end">
                                                  
                                                  <a href="#!" class="dropdown-item">Download</a>
                                                
                                                  <a href="#!" class="dropdown-item">Export</a>
                                                
                                                  <a href="#!" class="dropdown-item">Import</a>
                                             </div>
                                        </div>
                                   </div>
                                   <div class="card-body p-0">
                                        <div class="table-responsive">
                                             <table class="table align-middle text-nowrap table-hover table-centered mb-0">
                                                  <thead class="bg-light-subtle">
                                                       <tr>
                                                            <th style="width: 20px;">
                                                                 <div class="form-check">
                                                                      <input type="checkbox" class="form-check-input" id="customCheck1">
                                                                      <label class="form-check-label" for="customCheck1"></label>
                                                                 </div>
                                                            </th>   
                                                            <th>Order ID</th>                                                                                                                  
                                                            <th>Transaction Date</th>
                                                            <th>Property Type</th>
                                                            <th>Properties Address</th>
                                                            <th>Amount</th>
                                                            <th>Status</th>
                                                            <th>Agent Name</th>
                                                            <th>Action</th>
                                                       </tr>
                                                  </thead>
                                                  <tbody>

                                                       <tr>
                                                            <td>
                                                                 <div class="form-check">
                                                                      <input type="checkbox" class="form-check-input" id="customCheck2">
                                                                      <label class="form-check-label" for="customCheck2">&nbsp;</label>
                                                                 </div>
                                                            </td>   
                                                            <td>ORD-75234</td>                                                      
                                                            <td>15/03/2023</td>
                                                            <td>Residential</td>
                                                            <td>123 Maple St, 456 Oak Ave</td>
                                                            <td>$928,128</td>
                                                            <td><span class="badge bg-success text-white fs-11">Paid</span></td>
                                                            <td>Michael A. Miner</td>
                                                            <td>
                                                                 <div class="d-flex gap-2">
                                                                      <a href="#!" class="btn btn-light btn-sm"><iconify-icon icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                      <a href="#!" class="btn btn-soft-primary btn-sm"><iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                      <a href="#!" class="btn btn-soft-danger btn-sm"><iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                 </div>
                                                            </td>
                                                       </tr>

                                                       <tr>
                                                            <td>
                                                                 <div class="form-check">
                                                                      <input type="checkbox" class="form-check-input" id="customCheck2">
                                                                      <label class="form-check-label" for="customCheck2">&nbsp;</label>
                                                                 </div>
                                                            </td>            
                                                            <td>ORD-54222</td>                                              
                                                            <td>20/03/2023</td>
                                                            <td>Commercial</td>
                                                            <td>789 Pine Blvd</td>
                                                            <td>$84,091</td>
                                                            <td><span class="badge bg-success text-white fs-11">Paid</span></td>
                                                            <td>Michael A. Miner</td>
                                                            <td>
                                                                 <div class="d-flex gap-2">
                                                                      <a href="#!" class="btn btn-light btn-sm"><iconify-icon icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                      <a href="#!" class="btn btn-soft-primary btn-sm"><iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                      <a href="#!" class="btn btn-soft-danger btn-sm"><iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                 </div>
                                                            </td>
                                                       </tr>


                                                       <tr>
                                                            <td>
                                                                 <div class="form-check">
                                                                      <input type="checkbox" class="form-check-input" id="customCheck2">
                                                                      <label class="form-check-label" for="customCheck2">&nbsp;</label>
                                                                 </div>
                                                            </td>      
                                                            <td>ORD-63111</td>                                                     
                                                            <td>25/03/2023</td>
                                                            <td>Residential</td>
                                                            <td>101 Birch Ct, 202 Cedar Ln</td>
                                                            <td>$83,120</td>
                                                            <td><span class="badge bg-success text-white fs-11">Paid</span></td>
                                                            <td>Michael A. Miner</td>
                                                            <td>
                                                                 <div class="d-flex gap-2">
                                                                      <a href="#!" class="btn btn-light btn-sm"><iconify-icon icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                      <a href="#!" class="btn btn-soft-primary btn-sm"><iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                      <a href="#!" class="btn btn-soft-danger btn-sm"><iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                 </div>
                                                            </td>
                                                       </tr>
                                                       <tr>
                                                            <td>
                                                                 <div class="form-check">
                                                                      <input type="checkbox" class="form-check-input" id="customCheck2">
                                                                      <label class="form-check-label" for="customCheck2">&nbsp;</label>
                                                                 </div>
                                                            </td>      
                                                            <td>ORD-84623</td>                                                      
                                                            <td>05/04/2023</td>
                                                            <td>Residential</td>
                                                            <td>303 Elm St</td>
                                                            <td>$65,900</td>
                                                            <td><span class="badge bg-success text-white fs-11">Paid</span></td>
                                                            <td>Theresa T. Brose</td>
                                                            <td>
                                                                 <div class="d-flex gap-2">
                                                                      <a href="#!" class="btn btn-light btn-sm"><iconify-icon icon="solar:eye-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                      <a href="#!" class="btn btn-soft-primary btn-sm"><iconify-icon icon="solar:pen-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                      <a href="#!" class="btn btn-soft-danger btn-sm"><iconify-icon icon="solar:trash-bin-minimalistic-2-broken" class="align-middle fs-18"></iconify-icon></a>
                                                                 </div>
                                                            </td>
                                                       </tr>


                                                       
                                                  </tbody>
                                             </table>
                                        </div>
                                        <!-- end table-responsive -->
                                   </div>
                                   <!--div class="card-footer">
                                        <nav aria-label="Page navigation example">
                                             <ul class="pagination justify-content-end mb-0">
                                                  <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
                                                  <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
                                                  <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
                                                  <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
                                                  <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
                                             </ul>
                                        </nav>
                                   </div-->
                              </div>
                         </div>

                    </div-->
               </div>


          </div>
          <!-- End Container Fluid -->
<?php
include('footer.php');
?>

<script>
// Dead Form Submission Validation
function validateNoteForm() {
   
    var note = document.forms["noteForm"]["note"].value;
    var errorMessage = "";

    if (note == "") {
        errorMessage += "Note is required.\n";
    }

    if (errorMessage != "") {
        alert(errorMessage);
        return false;
    }
    return true;
}
</script>

<?php
// Dead Form Submission 
if ($_SERVER["REQUEST_METHOD"] == "POST"  && isset($_POST['note_form'])) {
    $note = $_POST['note'];
    $cuser='Admin';
    $cdate=date('Y-m-d H:i:s');
    $encodedLeadId = base64_encode($leadId);
    if($note) {
        // Insert followup data
        // $lead=mysqli_fetch_array(mysqli_query($conn,"select tbl_lead_user_id from tbl_lead_user where tbl_lead_user_mobile='$lead_id'"));
        // $lead_id=$lead['tbl_lead_user_id'];
        $sqlf = "INSERT INTO tbl_note SET 
                tbl_lead_user_id = '$leadId',
                tbl_note_text = '$note',
                tbl_note_cdate = '$cdate',
                tbl_note_cuser = '$cuser'";
         if(mysqli_query($conn, $sqlf)) {
            echo "<script>
            let encodedLeadId = '$encodedLeadId';
                Swal.fire({
                    title: 'Success!',
                    text: 'Note created successfully.',
                    icon: 'success',
                    confirmButtonClass: 'btn btn-primary w-xs mt-2',
                    buttonsStyling: false,
                    showCloseButton: false
                }).then(function() {
                    window.location.href = 'lead-detail.php?id=' + encodedLeadId;
            });
            </script>";
        } else {
            echo "<script>
            let encodedLeadId = '$encodedLeadId';
                Swal.fire({
                    title: 'Error!',
                    text: 'Failed to create note. Please try again.',
                    icon: 'error',
                    confirmButtonClass: 'btn btn-primary w-xs mt-2',
                    buttonsStyling: false,
                    showCloseButton: false
                }).then(function() {
                    window.location.href = 'lead-detail.php?id=' + encodedLeadId;
            });
            </script>";
        }
        exit;
    } else {
        echo "<script>
        let encodedLeadId = '$encodedLeadId';
            Swal.fire({
                title: 'Error!',
                text: 'Failed to create Note. Please try again.',
                icon: 'error',
                confirmButtonClass: 'btn btn-primary w-xs mt-2',
                buttonsStyling: false,
                showCloseButton: false
            }).then(function() {
                    window.location.href = 'lead-detail.php?id=' + encodedLeadId;
            });
        </script>";
    }
    exit;
    
}