<!DOCTYPE html>
<html lang="en">
  <style>
     .timeline {
            position: relative;
            padding-left: 40px;
            margin-bottom: 40px;
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 0;
            left: 21px;
            width: 2px;
            height: 100%;
            background-color: #000;
        }

        .timeline-icon {
            position: absolute;
            top: 0;
            left: 10px;
            font-size: 24px;
            color: #000;
            background-color: #fff;
            border-radius: 50%;
            z-index: 1;
        }

        .timeline-content {
            margin-bottom: 10px;
        }

        .note {
            margin-left: 40px;
            border: 1px solid #000;
            padding: 15px;
            border-radius: 5px;
            background-color: #f8f9fa;
            color:red;
        }

        .read-more-link {
            color: #007bff;
            cursor: pointer;
            display: inline;
        }
    
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bluehealth</title>
    <!-- css -->
    <link rel="stylesheet" href="assets/css/master.css">
    <link rel="stylesheet" href="assets/css/media.css">
    <!-- bootstrap -->
    <link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css">

    <!-- google fonts - poppins  -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

</head>
<body>
 
    <header>
        <nav class="navbar navbar-expand-lg">
            <div class="container-fluid">
              <a class="navbar-brand" href="#">Bluehealth</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <div class="navbar-nav mx-auto mb-2 mb-lg-0">
                  <span class="heading-manage">Manage. My Health. My Way</span>
                </div>
                <div class="d-flex align-items-center">
                    <div class="position-relative">
                        <input class="form-control me-2 rounded-pill" type="search" placeholder="Search" aria-label="Search">
                        <i class="fa-solid fa-xmark close-icon"></i>
                    </div>
                    <i class="fa-solid fa-globe font-custom"></i>
                    <i class="fa-regular fa-circle-question font-custom"></i>
                    <i class="fa-solid fa-right-from-bracket font-custom"></i>
                </div>
                 
              </div>
            </div>
          </nav>
    </header>

    
    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />  
<nav class="sidebar">
      <header>
        <div class="d-flex align-items-center">
          <div class="me-3">
            <img src="{{ asset('img/th.jpeg') }}" alt="user" class="img-fluid custom-img">
          </div>
          <div class="text-center">
            <h3 class="side-heading mb-1">{{ $patient->first_name}} {{ $patient->middle_name}} {{ $patient->last_name}}</h3>
            <p class="info">Alias:<span class="inner-info">{{ $patient->first_name}}</span></p>
            <p class="info">Age:<span class="inner-info">{{ $patient->age}}</span></p>
            <p class="info">DOB:<span class="inner-info">{{ $patient->date_of_birth}}</span></p>
            <p class="info">Gender:<span class="inner-info">{{ $patient->sex}}</span></p>

            <h3 class="side-heading mt-2 mb-1">Eergency Contact</h3>
            <p class="info">Name:<span class="inner-info">{{ $patient->first_name}} {{ $patient->middle_name}} {{ $patient->last_name}}</span></p>
            <p class="info">Phone:<span class="inner-info">{{ $patient->patient_phone_number}}</span></p>

          </div>
        </div>

        <i class="bx bx-chevron-right toggle"></i>
      </header>

      <div class="menu-bar">
        <div class="menu pb-3">

          <ul class="menu-links ps-0">
            Allergiess
            @foreach($getAllergies as $allergies)
              <li class="side-li">{{ $allergies->allergy}} </li>
            @endforeach  
           
          </ul>

          <ul class="menu-links list-none ps-0">
            Vital Signs
            @foreach($getvitals as $vital)
            <li class="side-li mt-3"><b>As of date:</b><br>
              <span class="mt-2 d-block"><i class="fa-solid fa-circle-arrow-left me-2"></i>2:04pm on Jul 27, 2024<i class="fa-solid fa-circle-arrow-right ms-2"></i></span>
             </li>
             <li class="side-li"><b>Weight:</b><br>
              <span class="mt-2 d-block">{{$vital->weight}} kgs</span>
             </li> 
             <li class="side-li"><b>height:</b><br>
              <span class="mt-2 d-block">180.34cm/ 5'9"</span>
             </li> 
             <li class="side-li"><b>BMI</b><br>
              <span class="mt-2 d-block">28.3</span>
             </li> 
             <li class="side-li"><b>Temperature</b><br>
              <span class="mt-2 d-block">{{$vital->body_temperature}} C</span>
             </li> 
             <li class="side-li"><b>Pulse Rate:</b><br>
              <span class="mt-2 d-block">{{$vital->pulse_rate}} ppm</span>
             </li> 
             <li class="side-li"><b>Respiration Rate</b><br>
              <span class="mt-2 d-block">{{$vital->respiration_rate}} rpm</span>
             </li> 
             <li class="side-li"><b>BP:</b><br>
              <span class="mt-2 d-block">{{$vital->blood_pressure_systolic}}/{{$vital->blood_pressure_diastolic}}</span>
             </li> 
             <li class="side-li"><b>SP02:</b><br>
              <span class="mt-2 d-block">2:04pm on Jul 27, 2024</span>
             </li> 
             <li class="side-li"><b>Pulse:</b><br>
              <span class="mt-2 d-block">2:04pm on Jul 27, 2024</span>
             </li> 
             <li class="side-li"><b>Blood Glucose Level(Fasting):</b><br>
              <span class="mt-2 d-block">{{$vital->blood_glucose_level}}</span>
             </li> 
             <li class="side-li"><b>Blood Glucose Level(Non-Fasting):</b><br>
              <span class="mt-2 d-block">{{$vital->blood_glucose_level}}</span>
             </li>  
           @endforeach
          </ul>

          <ul class="menu-links ps-0 mb-5">
            Diagnosis
            @foreach ($getDiagnosis as $diagnosis )
              
            <li class="side-li">{{$diagnosis->health_condition}}</li>
            @endforeach
            {{-- <li class="side-li">Hypertension</li>
            <li class="side-li">Hypertension</li>
            <li class="side-li">Hypertension</li>
            <li class="side-li">Hypertension</li> --}}
           
          </ul>

        </div>

       
      </div>
    </nav>

    <main>
      <div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
          </li>
          
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...
              <h1> Patients Notes </h1>
              <div class="container mt-5">
                <div class="timeline">
                    <i class="fas fa-clock timeline-icon"></i>
                    <div class="timeline-content">
                        <strong>Date:</strong> August 9, 2024 &nbsp;&nbsp; | &nbsp;&nbsp; <strong>Doctor:</strong> Dr. John Doe
                    </div>
                    <div class="note">
                        <strong>Notes:</strong>
                        <p class="note-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing jfhjg hkjh kjhfjhhfjhjf j jfhjfhj fhfhj jfjfhj fhjfhjfhelit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
                        </p>
                        
                    </div>
                </div>
            </div>
            
            <div class="container mt-5">
                <div class="timeline">
                    <i class="fas fa-clock timeline-icon"></i>
                    <div class="timeline-content">
                        <strong>Date:</strong> August 9, 2024 &nbsp;&nbsp; | &nbsp;&nbsp; <strong>Doctor:</strong> Dr. John Doe
                    </div>
                    <div class="note">
                        <strong>Notes:</strong>
                        <p class="note-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing jfhjg hkjh kjhfjhhfjhjf j jfhjfhj fhfhj jfjfhj fhjfhjfhelit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
                        </p>
                        
                    </div>
                </div>
            </div>
            
            <div class="container mt-5">
                <div class="timeline">
                    <i class="fas fa-clock timeline-icon"></i>
                    <div class="timeline-content">
                        <strong>Date:</strong> August 9, 2024 &nbsp;&nbsp; | &nbsp;&nbsp; <strong>Doctor:</strong> Dr. John Doe
                    </div>
                    <div class="note">
                        <strong>Notes:</strong>
                        <p class="note-text">
                            Lorem ipsum dolor sit amet, consectetur adipiscing jfhjg hkjh kjhfjhhfjhjf j jfhjfhj fhfhj jfjfhj fhjfhjfhelit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
                        </p>
                        
                    </div>
                </div>
            </div>
            


          </div>
          <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
          <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
       
        </div>
      </div>
      
    </main>

    <footer></footer>
    
</body>

 <!-- fontawesome -->
<script src="https://kit.fontawesome.com/44afa9bba2.js" crossorigin="anonymous"></script>

<!-- bootstrap Js  -->
 {{-- <script src="assets/bootstrap/bootstrap.bundle.js"></script>
 <script src="assets/bootstrap/popper.min.js"></script>
 <script src="assets/js/function.js"></script> --}}

 {{-- <script src="{{ asset('js/bootstrap.bundle.min.js') }}"></script> --}}
 <script src="{{ asset('js/bootstrap.bundle.js') }}"></script>
 <script src="{{ asset('js/bootstrap.min.js') }}"></script>
 <script src="{{ asset('js/popper.min.js') }}"></script>
 <script src="{{ asset('js/function.js') }}"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

 <link href="{{ asset('css/master.css') }}" rel="stylesheet">
<link href="{{ asset('css/media.css') }}" rel="stylesheet">
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
<script>
      document.addEventListener("DOMContentLoaded", function() {
        const noteTexts = document.querySelectorAll('.note-text');
        noteTexts.forEach(noteText => {
            const fullText = noteText.textContent.trim();
            const shortText = fullText.slice(0, 60);
            
            if (fullText.length > 60) {
                noteText.innerHTML = `${shortText}...... <span class="read-more-link">Read more</span>`;
            }

            noteText.addEventListener('click', function(e) {
              alert('gg');
                if (e.target.classList.contains('read-more-link')) {
                    noteText.textContent = fullText;
                }
            });
        });
    });
</script>
</html>