@extends(session('staff_logged_in') ? 'Staff.layout' : 'Admin.layout')
<style>
.tab-content:not(.doc-example-content) {
    padding: 0% !important;
}

.card {
    border-radius: 18px;
}

.icon-btn-shadow {
    box-shadow: 0px 9px 12px -2px #66328E1F;
}

.premium-profile-hero {
    border-radius: 24px;
    border: 1px solid rgba(105, 108, 255, 0.16);
    background: linear-gradient(135deg, rgba(105, 108, 255, 0.12), rgba(102, 50, 142, 0.08));
    box-shadow: 0 20px 45px rgba(17, 24, 39, 0.10);
    overflow: hidden;
}

[data-bs-theme="dark"] .premium-profile-hero {
    background: linear-gradient(135deg, rgba(105, 108, 255, 0.22), rgba(102, 50, 142, 0.16));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

.premium-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #696cff, #66328e);
    color: #fff;
    font-size: 32px;
    box-shadow: 0 10px 24px rgba(105, 108, 255, 0.24);
    flex-shrink: 0;
}

.premium-profile-badge,
.premium-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.45rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.82);
    color: #5f6c7b;
    border: 1px solid rgba(105, 108, 255, 0.12);
}

[data-bs-theme="dark"] .premium-profile-badge,
[data-bs-theme="dark"] .premium-profile-pill {
    background: rgba(255, 255, 255, 0.06);
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.08);
}

.premium-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.premium-profile-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #5f6c7b;
    border: 1px solid rgba(105, 108, 255, 0.12);
}

[data-bs-theme="dark"] .premium-profile-meta span {
    background: rgba(255, 255, 255, 0.06);
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.08);
}

.premium-profile-meta i {
    color: #696cff;
}

@media (max-width: 575px) {
    .premium-profile-avatar {
        width: 62px;
        height: 62px;
        font-size: 26px;
    }

    .premium-profile-meta span,
    .premium-profile-badge,
    .premium-profile-pill {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Sidebar tab layout */
.patient-tab-layout {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.patient-tab-sidebar {
    flex: 0 0 220px;
    position: sticky;
    top: 1rem;
}

.tab-sidebar-card {
    overflow: hidden;
}

.patient-tab-content {
    flex: 1 1 0%;
    min-width: 0;
}

.nav-pills .nav-link {
    border-radius: 10px;
    color: #697a8d;
    display: flex;
    align-items: center;
    padding: 0.65rem 0.9rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-pills .nav-link:hover:not(.active) {
    background: #696cff10;
    color: #696cff;
}

.nav-pills .nav-link.active {
    background: #696cff;
    color: #fff;
}

.section-title {
    border-left: 4px solid #696cff;
    padding-left: 12px;
}

.section-title h5 {
    margin: 0;
    font-weight: 700;
}

.card-header {
    border-bottom: 1px solid #edf1f7;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #697a8d;
    margin-bottom: 0.35rem;
}

.form-control,
.form-select {
    border-radius: 10px;
}

.form-control:focus,
.form-select:focus {
    border-color: #696cff;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.15);
}

/* Subtle lift on report cards for a bit of tactile feedback */
.report-card {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.report-card:hover {
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.08);
    transform: translateY(-2px);
}

/* Below laptop breakpoint: collapse back to horizontal pills stacked above content */
@media (max-width: 991px) {
    .patient-tab-layout {
        flex-direction: column;
    }

    .patient-tab-sidebar {
        flex: 1 1 auto;
        width: 100%;
        position: static;
    }

    .nav-pills#patientTabs {
        flex-direction: row !important;
        flex-wrap: wrap;
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .nav-pills#patientTabs .nav-item {
        flex: 0 0 auto;
    }
}

@media (max-width: 575px) {

    .patient-tab-sidebar .card-body,
    .patient-tab-sidebar .p-2 {
        padding: 0.5rem !important;
    }
}
</style>
@section('content')

<div class="card border-0 premium-profile-hero mb-4 mt-3">
    <div class="card-body p-4 p-md-5">
        <div
            class="d-flex flex-column flex-lg-row align-items-start align-items-lg-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <a href="{{ route('patient_list') }}" class="btn btn-icon bg-white icon-btn-shadow rounded-circle">
                    <i class="ti tabler-chevron-left"></i>
                </a>
                <!-- <div class="premium-profile-avatar">
                        <i class="ti tabler-user"></i>
                    </div> -->
                <div>
                    <div class="d-flex align-items-center flex-wrap gap-2 mb-2">
                        <h4 class="fw-bold mb-0">John Doe</h4>
                        <span class="premium-profile-badge">Patient</span>
                    </div>

                </div>
            </div>

            <div class="d-flex flex-wrap gap-2">
                <div class="premium-profile-meta text-muted small">
                    <span><i class="ti tabler-id"></i>123</span>
                    <span><i class="ti tabler-phone"></i>9876543210</span>
                    <span><i class="ti tabler-gender-male"></i>Female</span>
                    <span><i class="ti tabler-calendar"></i>22 Years</span>
                </div>
                <span class="premium-profile-pill">
                    <i class="ti tabler-droplet text-primary"></i>A +
                </span>
            
                <span class="premium-profile-pill">
                    <i class="ti tabler-home text-primary"></i>Place
                </span>

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

{{-- Sidebar Tabs + Content --}}
<div class="patient-tab-layout">

    {{-- Vertical Tabs (sidebar on laptop, stacked pills on mobile) — UNCHANGED --}}
    <div class="patient-tab-sidebar">
        <div class="card border-0 shadow-sm tab-sidebar-card">
            <ul class="nav nav-pills flex-column gap-1 p-2" id="patientTabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="pill" href="#profileTab">
                        <i class="ti tabler-user me-2"></i> Profile
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ route('health_details') }}">
                        <i class="ti tabler-stethoscope me-2"></i> Body Health
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#medicalTab">
                        <i class="ti tabler-heart-rate-monitor me-2"></i> Medical
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#reportsTab">
                        <i class="ti tabler-file-text me-2"></i> Reports
                    </a>
                </li>
                <!-- <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#casesTab">
                        <i class="ti tabler-notes me-2"></i> Cases
                    </a>
                </li> -->
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#followupsTab">
                        <i class="ti tabler-calendar me-2"></i> Followups
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="pill" href="#appointmentsTab">
                        <i class="ti tabler-calendar me-2"></i> Appointments
                    </a>
                </li>
            </ul>
        </div>
    </div>

    {{-- Tab Content --}}
    <div class="patient-tab-content">
        <div class="tab-content">

            {{-- Profile Tab (now editable) --}}
            <div class="tab-pane fade show active" id="profileTab">

              

            </div>

     

        </div>
    </div>

</div>


@endsection