src/app/case-details-summary-page/case-details-summary-page.component.html

<!-- case-details-summary-page.component.html -->
<!-- Professional Header -->
<div class="site-header" [class.scrolled]="isScrolled">
  <div class="header-inner">
    <div class="logo-cluster">
      <span (click)="navigateHome()" style="cursor:pointer;display:flex;align-items:center;">
        <img src="/assets/pykara-logo.png" alt="PyDetect Logo" class="logo-img-header" />
      </span>
      <div class="py-detect-title-header">
        <span class="py-letter p">P</span>
        <span class="py-letter y">Y</span>
        <span class="py-shape"></span>
        <span class="py-letter d">D</span>
        <span class="py-letter e">E</span>
        <span class="py-letter t">T</span>
        <span class="py-letter e2">E</span>
        <span class="py-letter c">C</span>
        <span class="py-letter t2">T</span>
      </div>
    </div>

    <div class="header-actions-right">
      <div class="action-buttons">
        <button class="action-btn print-btn" (click)="printSummary()" title="Print Summary">
          <i class="fas fa-print"></i>
          <span class="btn-label">Print</span>
        </button>
        <button class="action-btn export-btn" (click)="exportAsPDF()" title="Export as PDF">
          <i class="fas fa-file-pdf"></i>
          <span class="btn-label">PDF</span>
        </button>
        <button class="back-btn" (click)="navigateBack()">
          <i class="fas fa-arrow-left"></i>
          <span>Back</span>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Loading State -->
<div *ngIf="loading" class="loading-overlay" @fadeInOut>
  <div class="loading-spinner">
    <div class="spinner-ring"></div>
    <i class="fas fa-search"></i>
    <p>Loading case details...</p>
  </div>
</div>

<!-- Main Content -->
<div class="case-details-summary-layout" [class.print-mode]="printMode">

  <!-- Left Navigation Sidebar -->
  <aside class="sidebar" *ngIf="!printMode" @slideInLeft>
    <nav class="sidebar-nav">
      <div class="nav-section" *ngFor="let section of sidebarSections; let i = index"
           [class.expanded]="expandedMainHeader === section.key">
        <div class="nav-section-header" (click)="setMainHeader(section.key)">
          <div class="nav-icon-wrapper">
            <i [class]="section.icon"></i>
          </div>
          <span>{{section.title}}</span>
          <i class="fas fa-chevron-right nav-chevron"
             [class.rotated]="expandedMainHeader === section.key"></i>
        </div>
        <div class="nav-subgroups" *ngIf="expandedMainHeader === section.key" @expandAnimation>
          <div *ngFor="let subgroup of getSubgroupsForSection(section.key); let j = index"
               class="nav-subgroup-item"
               [class.active]="activeSubheader === section.key + '-' + subgroup.name"
               (click)="setSubheader(section.key, subgroup.name)"
               @staggerItem>
            <div class="subgroup-icon-wrapper">
              <i [class]="subgroup.icon"></i>
            </div>
            <span>{{ subgroup.name }}</span>
            <div class="subgroup-indicator"></div>
          </div>
        </div>
      </div>
    </nav>

    <div class="sidebar-footer" @fadeInUp>
      <div class="case-summary" *ngIf="selectedCase">
        <h4><i class="fas fa-chart-pie"></i> Case Summary</h4>
        <div class="summary-item" @fadeInUp *ngIf="selectedCase.status">
          <span class="summary-label">Status:</span>
          <span class="summary-value" [class]="getCaseStatusClass()">
            {{ selectedCase.status || 'Not Assigned' }}
          </span>
        </div>
        <div class="summary-item" @fadeInUp *ngIf="selectedCase.casePriority">
          <span class="summary-label">Priority:</span>
          <span class="summary-value priority-{{ selectedCase.casePriority.toLowerCase() }}">
            {{ selectedCase.casePriority || 'Not Set' }}
          </span>
        </div>
        <div class="summary-item" @fadeInUp>
          <span class="summary-label">Last Updated:</span>
          <span class="summary-value">
            {{ getFilledDetail('crime', 'Identification & Timing', 'Date & Time (Entry)') || 'N/A' }}
          </span>
        </div>
        <div class="summary-progress" *ngIf="getProgressPercentage() > 0">
          <div class="progress-label">
            <span>Case Progress</span>
            <span>{{ getProgressPercentage() }}%</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill" [style.width.%]="getProgressPercentage()"></div>
          </div>
        </div>
      </div>
    </div>
  </aside>

  <!-- Main Content Area -->
  <main class="main-content">
    <!-- Case Header Banner -->
    <div class="case-header-banner" @slideInDown>
      <div class="case-header-content">
        <div class="case-identity">
          <div class="case-ref">
            <div class="case-ref-top">
              <h1 class="case-ref-label">CASE REFERENCE</h1>
              <h1 class="case-ref-value">{{ selectedCase?.caseId || 'Not Assigned' }}</h1>

              <div class="case-actions">
                <button class="case-action-btn" (click)="toggleFavorite()" [class.favorited]="isFavorited">
                  <i [ngClass]="isFavorited ? 'fas fa-star' : 'far fa-star'"></i>
                </button>
                <button class="case-action-btn" (click)="addReminder()">
                  <i class="fas fa-bell"></i>
                </button>
              </div>
            </div>
            <div class="case-tags">
              <span class="case-tag" *ngIf="selectedCase?.crime">
                <i class="fas fa-gavel"></i>
                {{ selectedCase?.crime }}
              </span>
              <span class="case-tag">
                <i class="fas fa-calendar"></i>
                {{ getFilledDetail('crime', 'Identification & Timing', 'Date & Time (Entry)') | date:'mediumDate' }}
              </span>

              <div class="case-meta">
                <div class="case-status-badge" [class]="getCaseStatusClass()" @pulseAnimation>
                  <span class="status-dot"></span>
                  {{ (selectedCase?.status || 'Not Assigned') | uppercase }}
                </div>
                <div class="case-priority" *ngIf="selectedCase?.casePriority">
                  <span class="priority-label">Priority:</span>
                  <span class="priority-value priority-{{ selectedCase?.casePriority?.toLowerCase() }}">
                    <i class="fas fa-flag"></i>
                    {{ selectedCase?.casePriority | uppercase }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="case-quick-info">
          <div class="quick-info-item" *ngFor="let info of quickInfoItems" @slideInUp>
            <div class="info-icon-wrapper">
              <i [class]="info.icon"></i>
            </div>
            <div class="info-content">
              <span class="info-label">{{ info.label }}</span>
              <span class="info-value">{{ info.value || 'Not Specified' }}</span>
            </div>
            <div class="info-hover-effect"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- Details Container -->
    <div class="details-container">
      <!-- Details Section -->
      <div *ngIf="activeMainHeader && activeSubheader" class="details-section" @fadeIn>
        <!-- Section Header -->
        <div class="section-header">
          <div class="section-title">
            <div class="section-icon-wrapper">
              <i [class]="sections[activeMainHeader]?.icon"></i>
            </div>
            <div>
              <h2>{{ sections[activeMainHeader]?.title | uppercase }}</h2>
              <p class="section-subtitle">{{ activeSubheaderName | uppercase }}</p>
            </div>
          </div>
          <div class="section-actions">
            <button class="section-action-btn" (click)="copySection()" title="Copy Section">
              <i class="fas fa-copy"></i>
            </button>
            <button class="section-action-btn" (click)="printSummary()" title="Print">
              <i class="fas fa-print"></i>
            </button>
            <button class="section-action-btn" (click)="exportAsPDF()" title="Export PDF">
              <i class="fas fa-file-pdf"></i>
            </button>
            <button class="section-action-btn expand-all" (click)="toggleExpandAll()" title="Expand All">
              <i class="fas" [class.fa-expand]="!allExpanded" [class.fa-compress]="allExpanded"></i>
            </button>
          </div>
        </div>

        <!-- Details Content -->
        <div class="details-content-scrollable">
          <div *ngIf="sections[activeMainHeader]?.subgroups[activeSubheaderName] as fields">
            <div class="form-grid">
              <div class="form-group"
                   *ngFor="let field of fields; let i = index"
                   [class.remark-field]="field === 'Remark'"
                   [ngClass]="{
                     'description-field': isDescriptionField(field),
                     'important-field': isImportantField(field),
                     'expanded': allExpanded || expandedFields.has(field)
                   }"
                   @staggerItem>
                <div class="field-container" (click)="toggleFieldExpand(field)">
                  <div class="field-header">
                    <div class="field-label">
                      <div class="field-icon-wrapper">
                        <i [class]="getFieldIcon(field)"></i>
                      </div>
                      <span class="field-label-text">{{ field | uppercase }}</span>
                    </div>
                    <div class="field-meta">
                      <span class="field-type">
                        {{ getFieldType(field) | uppercase }}
                      </span>
                      <i class="fas fa-chevron-down field-expand-icon"
                         [class.rotated]="allExpanded || expandedFields.has(field)"></i>
                    </div>
                  </div>
                  <div class="field-value-container">
                    <div class="field-value"
                         [class.empty-field]="getFilledDetail(activeMainHeader, activeSubheaderName, field) === '— Not Provided'">
                      <ng-container *ngIf="getFilledDetail(activeMainHeader, activeSubheaderName, field) !== '— Not Provided'; else notProvided">
                        <span class="value-text">{{ getFilledDetail(activeMainHeader, activeSubheaderName, field) }}</span>
                      </ng-container>
                      <ng-template #notProvided>
                        <span class="not-provided">
                          <i class="fas fa-minus-circle"></i>
                          NOT PROVIDED
                        </span>
                      </ng-template>
                    </div>
                  </div>
                  <div class="field-footer">
                    <span class="field-updated">Last updated: {{ getFieldUpdateTime(field) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Empty Fields Summary -->
          <div class="empty-fields-summary" *ngIf="hasEmptyFields()" @fadeIn>
            <div class="summary-header">
              <i class="fas fa-exclamation-triangle"></i>
              <h3>Missing Information</h3>
            </div>
            <p>{{ getEmptyFieldsCount() }} fields in this section require attention.</p>
            <button class="action-btn fill-empty-btn" (click)="highlightEmptyFields()">
              <i class="fas fa-highlighter"></i>
              Highlight Missing Fields
            </button>
          </div>
        </div>
      </div>

      <!-- Empty State -->
      <div *ngIf="!activeMainHeader || !activeSubheader" class="empty-state" @fadeIn>
        <div class="empty-state-icon">
          <i class="fas fa-file-search"></i>
          <div class="pulse-ring"></div>
        </div>
        <h3>SELECT A SECTION TO VIEW DETAILS</h3>
        <p>Choose a category from the sidebar to display the corresponding case information.</p>
        <div class="empty-state-actions">
          <button class="primary-btn" (click)="setMainHeader('crime')">
            <i class="fas fa-gavel"></i>
            START WITH CRIME DETAILS
          </button>
          <button class="secondary-btn" (click)="expandAllSections()">
            <i class="fas fa-expand"></i>
            EXPAND ALL SECTIONS
          </button>
        </div>
        <div class="empty-state-tips">
          <div class="tip">
            <i class="fas fa-lightbulb"></i>
            <span>Tip: Use keyboard shortcuts for faster navigation</span>
          </div>
        </div>
      </div>

      <!-- Quick Actions Bar -->
      <div class="quick-actions-bar" *ngIf="activeMainHeader && activeSubheader" @slideInUp>
        <div class="quick-action" (click)="scrollToTop()" data-tooltip="Scroll to Top">
          <i class="fas fa-arrow-up"></i>
          <span>Top</span>
        </div>
        <div class="quick-action" (click)="exportSection()" data-tooltip="Export Section">
          <i class="fas fa-download"></i>
          <span>Export</span>
        </div>
        <div class="quick-action" (click)="shareSection()" data-tooltip="Share Section">
          <i class="fas fa-share-alt"></i>
          <span>Share</span>
        </div>
        <div class="quick-action" (click)="addNote()" data-tooltip="Add Note">
          <i class="fas fa-plus"></i>
          <span>Add Note</span>
        </div>
      </div>
    </div>
  </main>

  <!-- Notification Toast -->
  <div class="notification-toast" [class.show]="showNotification" @slideInRight>
    <div class="toast-content">
      <i class="fas" [class]="notificationIcon"></i>
      <div>
        <p class="toast-title">{{ notificationTitle }}</p>
        <p class="toast-message">{{ notificationMessage }}</p>
      </div>
    </div>
    <button class="toast-close" (click)="hideNotification()">
      <i class="fas fa-times"></i>
    </button>
  </div>
</div>

<!-- Footer from record page -->
<footer>
  <p>©2025 Pykara Technologies Pvt. Ltd. All rights reserved.</p>
</footer>