


<style>
    header.card.p-2.shadow-sm {
        border: 1px solid #e3e3e3;
    }

    .sidebar {
        width: 380px;
        border-right: 1px solid #c9c9c9;
        background-color: #d9edf7;
        position: fixed;
        left: 0;
        top: 66px;
        height: calc(100vh - 20px);
        overflow-y: auto;
    }

    .custom-img {
        width: 80px;
        border-radius: 50%;
        height: 80px;
        object-fit: contain;
        position: relative;
        z-index: 1;
    }

    .progress-circle {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: conic-gradient(#76c7c0 var(--progress), #e0e0e0 var(--progress));
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
    }

    .progress-circle-fill {
        position: absolute;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        background-color: #fff;
    }

    .progress-text {
        position: absolute;
        font-size: 11px;
        font-weight: bold;
        color: #333;
        z-index: 2;
        margin-top: 88px;
        border: 3px solid #76c7c0;
        background: white;
        border-radius: 50px;
        padding: 1px 5px;
    }

    .progress-label {
        text-align: center;
        font-size: 12px;
        font-weight: bold;
        color: #333;
        margin-top: 5px;
    }

    .card {
        max-width: 400px;
        margin: auto;
        border-radius: 30px;
        background-color: #fff;
        border: none;
    }

    p {
        font-size: 13px;
        color: #333;
    }

    b {
        font-size: 13px;
    }

    .patientB {
        font-size: 15px;
        color: #333;
    }

    @media (max-width: 768px) {
        .d-flex {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .me-3 {
            margin-bottom: 10px;
        }
    }

    .menu-bar {
        max-width: 400px;
        margin-bottom: 20px;
        border-radius: 30px;
        background-color: #DEDDF1;
        border: none;
        overflow: hidden;
        margin-top: 16px;
    }

    .menu.pb-3.set-scroll {
        max-height: 580px;
        overflow-y: auto;
        background-color: #DEDDF1;
        border-radius: 30px;
        padding-bottom: 15px;
        scrollbar-width: thin;
        scrollbar-color: #d1d1d9 #DEDDF1;
    }

    .menu {
        max-width: 400px;
        margin: auto;
        border-radius: 15px;
        background-color: transparent;
        padding: 15px;
        border: none;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .menu-links {
        list-style-type: none;
        padding-left: 0;
        font-size: 14px;
        color: #333;
    }

    .side-li,
    .side-vital-li {
        padding: 8px 12px;
        border-bottom: 1px solid #eee;
        font-size: 13px;
        color: #555;
    }

    .side-li:last-child,
    .side-vital-li:last-child {
        border-bottom: none;
    }

    a.chatapi {
        text-decoration: none;
        color: inherit;
    }

    a.chatapi:hover {
        text-decoration: none;
        color: inherit;
    }

    .side-vital-li b {
        font-size: 13px;
        color: #222;
    }

    #prevVital, #nextVital {
        font-size: 20px;
    }

    span.mt-2.d-block {
        font-weight: bold;
        font-size: 15px;
    }

    #currentVital {
        margin-left: -30px;
    }

    #loaders {
        display: none;
    }

    .loader-overlays {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        z-index: 9999;
    }

    .loader-container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .spinners {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spins 1s linear infinite;
        margin: auto;
    }

    @keyframes spins {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<div id="loaders" class="loader-overlays">
    <div class="loader-container">
        <div class="spinners"></div>
    </div>
</div>

@php
    $totalFields = 25;
    $completedFields = 0;

    if ($patient->first_name) $completedFields++;
    if ($patient->last_name) $completedFields++;
    if ($patient->middle_name) $completedFields++;
    if ($patient->date_of_birth) $completedFields++;
    if ($patient->sex) $completedFields++;
    if ($patient->address) $completedFields++;
    if ($patient->patient_phone_num_country_code) $completedFields++;
    if ($patient->patient_phone_number) $completedFields++;
    if ($patient->patient_er_phone_number) $completedFields++;
    if ($patient->aadhar_card_num) $completedFields++;
    if ($patient->pan_card_num) $completedFields++;
    if ($patient->email) $completedFields++;
    if ($patient->cibil_score) $completedFields++;
    if ($patient->profession) $completedFields++;
    if ($patient->employment_status) $completedFields++;
    if ($patient->marital_status) $completedFields++;
    if ($patient->father_name) $completedFields++;
    if ($patient->mother_name) $completedFields++;
    if ($patient->male_siblings) $completedFields++;
    if ($patient->female_siblings) $completedFields++;
    if ($patient->consent_to_contact) $completedFields++;
    if ($patient->medical_billing_address) $completedFields++;
    if ($patient->current_medications) $completedFields++;
    if ($patient->previous_health_history) $completedFields++;
    if ($patient->allergies) $completedFields++;

    $progress = ($completedFields / $totalFields) * 100;
@endphp

<nav class="sidebar">
    <header class="card p-2 shadow-sm">
        <div class="d-flex">
            <div class="a-img me-3">
                <a href="{{ route('patients.create', $patient->patient_id) }}">
                    <div class="progress-circle" id="progressCircle" style="--progress: {{ $progress }}%;">
                        <div class="progress-circle-fill"></div>
                        <img 
                            src="{{ $patient->photo ? asset('storage/photos/' . $patient->photo) : asset('storage/photos/default-user.png') }}" 
                            alt="user" 
                            class="img-fluid custom-img">
                        <span class="progress-text" id="progressText">{{ round($progress) }}%</span>
                    </div>
                    <div class="progress-label">{{ round($progress) }}% Complete</div>
                </a>
            </div>
            <div>
                <h3 class="fw-bold mb-1 patientB">{{ $patient->first_name }} {{ $patient->middle_name }} {{ $patient->last_name }}</h3>
                <p class="info"><b>Patient ID: </b><span class="inner-info">{{ $patient->patient_id }}</span></p>
                <p class="info"><b>Age: </b><span class="inner-info">{{ $patient->age }}</span></p>
                <p class="info"><b>Gender: </b><span class="inner-info">{{ $patient->sex }}</span></p>
                <p class="mb-1"><b>DOB: </b><span class="inner-info">{{ \Carbon\Carbon::parse($patient->date_of_birth)->format('M j, Y') }}</span></p>
                <p class="mb-1"><b>Phone: </b><span class="inner-info">{{ $patient->patient_phone_num_country_code . $patient->patient_phone_number }}</span></p>
                <h3 class="fw-bold mb-1 patientB">Emergency Contact: </h3>
                <p class="mb-1"><b>Name: </b><span class="inner-info">{{ $patient->father_name }}</span></p>
                <p class="mb-1"><b>Phone: </b><span class="inner-info">{{ $patient->patient_er_country_code . $patient->patient_er_phone_number }}</span></p>
                @if($patient->blood_group)
                    <p class="mb-0"><b>Blood Group:</b><span class="inner-info"> {{ $patient->blood_group }}</span></p>
                @endif
                @if($patient->organ_donors)
                    <p class="mb-0"><b>Organ Donor:</b><span class="inner-info"><i class="fas fa-check-circle text-success me-2" style="font-size: 1.2rem;"></i></span></p>
                @endif
                @if($patient->disability)
                    <p class="mb-0"><b>Disability:</b><span class="inner-info"> {{ $patient->disability }}</span></p>
                @endif
            </div>
        </div>
    </header>

    <div class="menu-bar mb-5">
        <div class="menu pb-3 set-scroll">
            <ul class="menu-links ps-0">
                Allergies
                @foreach($getAllergies as $allergies)
                    <li class="side-li">{{ $allergies->allergy }}</li>
                @endforeach  
            </ul>
            <ul class="menu-links list-none ps-0" id="vitalSignsList">
                Vital Signs
                <div id="currentVital" class="mt-3">
                    @php
                        $hasVitals = $getVitals->isNotEmpty();
                        $currentIndex = 0;
                    @endphp
                    <li class="side-vital-li">
                        <b>As of date s:</b><br>
                        <span class="mt-2 d-block">
                            <i class="fa-solid fa-circle-arrow-left me-2 {{ $hasVitals && $currentIndex === 0 ? 'disabled-arrow' : '' }}" 
                               id="prevVital" 
                               style="cursor: {{ $hasVitals && $currentIndex === 0 ? 'default' : 'pointer' }}; color: {{ $hasVitals && $currentIndex === 0 ? 'grey' : 'blue' }};" 
                               onclick="showVital(-1)"></i>
                            <span id="recorded_at">
        {{ $hasVitals && $getVitals[$currentIndex]->recorded_at
    ? $getVitals[$currentIndex]->recorded_at
        ->setTimezone(config('app.timezone'))
        ->format('g:ia \o\n M d, Y')
    : '--' }}

                            </span>
                            <i class="fa-solid fa-circle-arrow-right ms-2 {{ $hasVitals && $currentIndex === count($getVitals) - 1 ? 'disabled-arrow' : '' }}" 
                               id="nextVital" 
                               style="cursor: {{ $hasVitals && $currentIndex === count($getVitals) - 1 ? 'default' : 'pointer' }}; color: {{ $hasVitals && $currentIndex === count($getVitals) - 1 ? 'grey' : 'blue' }};" 
                               onclick="showVital(1)"></i>
                        </span>
                    </li>
                    <a class="chatapi" href="/patients/vitals">
                        <li class="side-vital-li"><b>Heart Rate (NIBP):</b> 
                          {{ $hasVitals ? $getVitals[$currentIndex]->pulse_rate_nibp . ' bpm' : '--' }}

                        </li>
                        <li class="side-vital-li"><b>Pulse Rate (SpO₂):</b> 
                            {{ $hasVitals && isset($getVitals[$currentIndex]->spo2_status['pulse_flag']) && $getVitals[$currentIndex]->spo2_status['pulse_flag'] ? ($getVitals[$currentIndex]->pulse_rate_spo2 ?? $getVitals[$currentIndex]->pulse_rate ?? '--') . ' bpm' : '--' }}
                        </li>
                        <li class="side-vital-li"><b>Respiratory Rate (ECG):</b> 
                            {{ $hasVitals ? ($getVitals[$currentIndex]->respiration_rate ?? '--') . ' bpm' : '--' }}
                        </li>
                        <li class="side-vital-li"><b>SpO₂:</b> 
                            {{ $hasVitals ? ($getVitals[$currentIndex]->ecg && isset($getVitals[$currentIndex]->ecg->ecg_twelve_lead['saturation']['v']) ? $getVitals[$currentIndex]->ecg->ecg_twelve_lead['saturation']['v'] : ($getVitals[$currentIndex]->blood_oxygen ?? '--')) . '%' : '--' }}
                        </li>
                        <li class="side-vital-li"><b>Blood Pressure:</b> 
                            {{ $hasVitals ? ($getVitals[$currentIndex]->blood_pressure_systolic && $getVitals[$currentIndex]->blood_pressure_diastolic ? "{$getVitals[$currentIndex]->blood_pressure_systolic}/{$getVitals[$currentIndex]->blood_pressure_diastolic} mmHg" : '--') : '--' }}
                        </li>
                        <li class="side-vital-li"><b>Body Temperature:</b> 
                            {{ $hasVitals ? ($getVitals[$currentIndex]->body_temperature ?? '--') . ' °C' : '--' }}
                        </li>
                        <li class="side-vital-li"><b>Skin Temperature:</b> 
                            {{ $hasVitals && isset($getVitals[$currentIndex]->temperature['temp_1_c']) ? $getVitals[$currentIndex]->temperature['temp_1_c'] . ' °C' : '--' }}
                        </li>
                        <li class="side-vital-li"><b>Forehead Temperature (IR):</b> 
                            {{ $hasVitals && isset($getVitals[$currentIndex]->temperature['ir_temp_c']) ? $getVitals[$currentIndex]->temperature['ir_temp_c'] . ' °C' : '--' }}
                        </li>
                    
                        <li class="side-vital-li"><b>Fasting Blood Glucose: </b> 
                            {{ $hasVitals && isset($getVitals[$currentIndex]->blood_glucose_fasting['fasting']) ? $getVitals[$currentIndex]->blood_glucose_fasting['fasting'] . ' mg/dL' : '--' }}
                        </li>
                          <li class="side-vital-li"><b>Pre Meal Blood Glucose: </b> 
                            {{ $hasVitals && isset($getVitals[$currentIndex]->blood_glucose_fasting['pre_meal']) ? $getVitals[$currentIndex]->blood_glucose_fasting['pre_meal'] . ' mg/dL' : '--' }}
                        </li>
                          <li class="side-vital-li"><b>Post Meal Blood Glucose: </b> 
                            {{ $hasVitals && isset($getVitals[$currentIndex]->blood_glucose_fasting['post_meal']) ? $getVitals[$currentIndex]->blood_glucose_fasting['post_meal'] . ' mg/dL' : '--' }}
                        </li>
                        <li class="side-vital-li"><b>Weight:</b> 
                            {{ $hasVitals ? ($getVitals[$currentIndex]->weight ?? '--') . ' kg' : '--' }}
                        </li>
                        <li class="side-vital-li"><b>Height:</b> 
                            {{ $hasVitals ? ($getVitals[$currentIndex]->height ?? '--') . ' cm' : '--' }}
                        </li>
                        <li class="side-vital-li"><b>BMI:</b> 
                            {{ $hasVitals ? ($getVitals[$currentIndex]->bmi ?? '--') : '--' }}
                        </li>
                    </a>
                </div>
            </ul>
            <ul class="menu-links ps-0 mb-5">
                Diagnosis
                @foreach ($getDiagnosis as $diagnosis)
                    @if($diagnosis->health_condition)
                        <li class="side-li">{{ $diagnosis->health_condition }}</li>
                    @endif
                @endforeach
            </ul>
        </div>
    </div>
</nav>

<script>
    let currentIndex = {{ $hasVitals ? 0 : -1 }};
    const vitals = @json($getVitals->load('ecg')); // Load ECG relationship
    const vitalCount = vitals.length;

    function updateDisplay() {
        if (vitalCount === 0) {
            document.getElementById('currentVital').innerHTML = `
                <li class="side-vital-li">
                    <b>As of date:</b><br>
                    <span class="mt-2 d-block">--</span>
                </li>
                <a class="chatapi" href="/patients/vitals">
                    <li class="side-vital-li"><b>Heart Rate (NIBP):</b> --</li>
                    <li class="side-vital-li"><b>Pulse Rate (SpO₂):</b> --</li>
                    <li class="side-vital-li"><b>Respiratory Rate (ECG):</b> --</li>
                    <li class="side-vital-li"><b>SpO₂:</b> --</li>
                    <li class="side-vital-li"><b>Blood Pressure:</b> --</li>
                    <li class="side-vital-li"><b>Body Temperature:</b> --</li>
                    <li class="side-vital-li"><b>Skin Temperature:</b> --</li>
                    <li class="side-vital-li"><b>Forehead Temperature (IR):</b> --</li>
                    <li class="side-vital-li"><b>Fasting Blood Glucose: </b>--</span></li>
                        <li class="side-vital-li"><b>Pre Meal Blood Glucose: </b>--</li>
                        <li class="side-vital-li"><b>Post Meal Blood Glucose: </b>--</li>

                    
                    <li class="side-vital-li"><b>Weight:</b> --</li>
                    <li class="side-vital-li"><b>Height:</b> --</li>
                    <li class="side-vital-li"><b>BMI:</b> --</li>
                </a>
            `;
            return;
        }

        document.getElementById('currentVital').innerHTML = `
            <li class="side-vital-li">
                <b>As of date:</b><br>
                <span class="mt-2 d-block">
                    <i class="fa-solid fa-circle-arrow-left me-2 ${currentIndex === 0 ? 'disabled-arrow' : ''}" 
                       id="prevVital" 
                       style="cursor: ${currentIndex === 0 ? 'default' : 'pointer'}; color: ${currentIndex === 0 ? 'grey' : 'blue'};" 
                       onmouseover="if(this.classList.contains('disabled-arrow')) this.style.color='grey'; else this.style.color='darkblue';" 
                       onmouseout="if(this.classList.contains('disabled-arrow')) this.style.color='grey'; else this.style.color='blue';" 
                       onclick="showVital(-1)"></i>
                    ${new Date(vitals[currentIndex].created_at).toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })} on ${new Date(vitals[currentIndex].created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
                    <i class="fa-solid fa-circle-arrow-right ms-2 ${currentIndex === vitalCount - 1 ? 'disabled-arrow' : ''}" 
                       id="nextVital" 
                       style="cursor: ${currentIndex === vitalCount - 1 ? 'default' : 'pointer'}; color: ${currentIndex === vitalCount - 1 ? 'grey' : 'blue'};" 
                       onmouseover="if(this.classList.contains('disabled-arrow')) this.style.color='grey'; else this.style.color='darkblue';" 
                       onmouseout="if(this.classList.contains('disabled-arrow')) this.style.color='grey'; else this.style.color='blue';" 
                       onclick="showVital(1)"></i>
                </span>
            </li>
            <a class="chatapi" href="/patients/vitals">  
               <li class="side-vital-li">
  <b>Heart Rate (NIBP):</b>
  ${vitals[currentIndex].pulse_rate_nibp ? vitals[currentIndex].pulse_rate_nibp + ' bpm' : '--'}
</li>
  
                <li class="side-vital-li"><b>Pulse Rate (SpO₂):</b> ${vitals[currentIndex].spo2_status && vitals[currentIndex].spo2_status.pulse_flag ? (vitals[currentIndex].pulse_rate_spo2 || vitals[currentIndex].pulse_rate) + ' bpm' : '--'}</li>
                <li class="side-vital-li"><b>Respiratory Rate (ECG):</b> ${vitals[currentIndex].respiration_rate ? vitals[currentIndex].respiration_rate + ' bpm' : '--'}</li>
                <li class="side-vital-li"><b>SpO₂:</b> ${vitals[currentIndex].ecg && vitals[currentIndex].ecg.ecg_twelve_lead && vitals[currentIndex].ecg.ecg_twelve_lead.saturation ? vitals[currentIndex].ecg.ecg_twelve_lead.saturation.v + '%' : (vitals[currentIndex].blood_oxygen ? vitals[currentIndex].blood_oxygen + '%' : '--')}</li>
                <li class="side-vital-li"><b>Blood Pressure:</b> ${vitals[currentIndex].blood_pressure_systolic && vitals[currentIndex].blood_pressure_diastolic ? vitals[currentIndex].blood_pressure_systolic + '/' + vitals[currentIndex].blood_pressure_diastolic + ' mmHg' : '--'}</li>
                <li class="side-vital-li"><b>Body Temperature:</b> ${vitals[currentIndex].body_temperature ? vitals[currentIndex].body_temperature + ' °C' : '--'}</li>
                <li class="side-vital-li"><b>Skin Temperature:</b> ${vitals[currentIndex].temperature && vitals[currentIndex].temperature.temp_1_c ? vitals[currentIndex].temperature.temp_1_c + ' °C' : '--'}</li>
                <li class="side-vital-li"><b>Forehead Temperature (IR):</b> ${vitals[currentIndex].temperature && vitals[currentIndex].temperature.ir_temp_c ? vitals[currentIndex].temperature.ir_temp_c + ' °C' : '--'}</li>
                <li class="side-vital-li"><b>Blood Glucose:</b><br>${vitals[currentIndex].blood_glucose_level ? vitals[currentIndex].blood_glucose_level + ' mg/dL' : '--'}</span></li>
                <li class="side-vital-li"><b>Fasting Blood Glucose: </b>${vitals[currentIndex].blood_glucose_fasting && vitals[currentIndex].blood_glucose_fasting.fasting ? vitals[currentIndex].blood_glucose_fasting.fasting + ' mg/dL' : '--'}</li>
                <li class="side-vital-li"><b>Pre Meal Blood Glucose: </b>${vitals[currentIndex].blood_glucose_fasting && vitals[currentIndex].blood_glucose_fasting.pre_meal ? vitals[currentIndex].blood_glucose_fasting.pre_meal + ' mg/dL' : '--'}</li>
               <li class="side-vital-li"><b>Post Meal Blood Glucose: </b>${vitals[currentIndex].blood_glucose_fasting && vitals[currentIndex].blood_glucose_fasting.post_meal ? vitals[currentIndex].blood_glucose_fasting.post_meal + ' mg/dL' : '--'}</li>
                <li class="side-vital-li"><b>Weight:</b> ${vitals[currentIndex].weight ? vitals[currentIndex].weight + ' kg' : '--'}</li>
                <li class="side-vital-li"><b>Height:</b> ${vitals[currentIndex].height ? vitals[currentIndex].height + ' cm' : '--'}</li>
                <li class="side-vital-li"><b>BMI:</b> ${vitals[currentIndex].bmi ? vitals[currentIndex].bmi : '--'}</li>
            </a>
        `;
    } 

    function showVital(direction) {
        currentIndex += direction;
        if (currentIndex < 0) {
            currentIndex = 0;
        } else if (currentIndex >= vitalCount) {
            currentIndex = vitalCount - 1;
        }
        updateDisplay();
    }

    function updateProgressBar(progress) {
        const progressCircle = document.getElementById('progressCircle');
        const progressText = document.getElementById('progressText');
        const progressLabel = document.querySelector('.progress-label');
        if (progressCircle && progressText && progressLabel) {
            progressCircle.style.setProperty('--progress', `${progress}%`);
            progressText.textContent = `${Math.round(progress)}%`;
            progressLabel.textContent = `${Math.round(progress)}% Complete`;
        }
    }

    if (vitalCount > 0) {
        updateDisplay();
    }
    updateProgressBar({{ $progress }});
</script>       