<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Historia clínica de {{ $model->patient()->first()->firstname . ' ' . $model->patient()->first()->lastname }}">
  <meta name="author" content="{{ $model->user()->first()->profile ? $model->user()->first()->profile->firstname . ' ' . $model->user()->first()->profile->lastname : $model->user()->first()->name }}">
  <meta name="generator" content="Medical Center PDF Generator">
  <title>Historia Clínica - {{ $model->patient()->first()->firstname . " " . $model->patient()->first()->lastname }}</title>
  <style type="text/css">
    @page {
      margin: 1.8cm;
      size: A4;
    }

    body {
      font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', sans-serif;
      color: #2c3e50;
      line-height: 1.6;
      margin: 0;
      padding: 0;
      background-color: white;
      font-size: 10pt;
    }
    
    /* Contenedor principal */
    .container {
      width: 100%;
      margin: 0;
      padding: 0;
    }
    
    /* Encabezado */
    .header {
      width: 100%;
      border-bottom: 3px solid #1976D2;
      padding-bottom: 15px;
      margin-bottom: 30px;
      display: table;
      background: linear-gradient(to right, #f8f9fa 0%, white 100%);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      border-radius: 8px 8px 0 0;
    }
    
    .header-logo {
      display: table-cell;
      width: 150px;
      text-align: center;
      vertical-align: middle;
      padding: 10px;
    }
    
    .header-info {
      display: table-cell;
      vertical-align: top;
      padding-left: 20px;
      border-left: 1px solid #eaeaea;
    }
    
    .header img {
      max-width: 120px;
      max-height: 80px;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    /* Secciones principales */
    .section {
      margin-bottom: 30px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      padding: 20px;
    }

    .section-title {
      font-size: 14pt;
      font-weight: bold;
      color: #1976D2;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: 2px solid #E3F2FD;
    }

    .subsection {
      margin-bottom: 25px;
      background: #f8f9fa;
      border-radius: 6px;
      padding: 15px;
      border-left: 4px solid #1976D2;
    }

    .subsection-title {
      font-size: 12pt;
      font-weight: bold;
      color: #455A64;
      margin-bottom: 15px;
    }

    /* Tablas */
    table {
      width: 100%;
      border-collapse: collapse;
      margin: 15px 0;
      background: white;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
      border-radius: 6px;
      overflow: hidden;
    }

    td {
      padding: 12px;
      border: 1px solid #E3E8F0;
    }

    .label {
      font-weight: 600;
      color: #455A64;
      width: 30%;
      background-color: #F5F7FA;
    }

    .value {
      color: #37474F;
    }

    /* Índice */
    .toc {
      background: #F5FAFF;
      border: 1px solid #BBDEFB;
      border-radius: 8px;
      padding: 20px;
      margin: 30px 0;
      box-shadow: 0 2px 10px rgba(25, 118, 210, 0.1);
    }

    .toc-title {
      font-size: 14pt;
      font-weight: bold;
      color: #1976D2;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 2px solid #BBDEFB;
    }

    .toc-table {
      width: 100%;
      border-collapse: collapse;
    }

    .toc-table td {
      padding: 8px;
      border: none;
    }

    .toc-item {
      color: #455A64;
    }

    .toc-page {
      text-align: right;
      color: #1976D2;
      font-weight: 500;
    }

    /* Pie de página */
    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 10px 0;
      font-size: 9pt;
      color: #666;
      border-top: 1px solid #E3E8F0;
      background: white;
    }

    .footer-spacer {
      height: 40px;
    }

    /* Mini encabezado para páginas subsiguientes */
    .mini-header {
      background: #F5F7FA;
      padding: 10px 15px;
      margin-bottom: 20px;
      border-radius: 6px;
      border-left: 4px solid #1976D2;
      font-size: 11pt;
      color: #455A64;
    }

    /* Diagnóstico */
    .diagnosis-box {
      background: #E3F2FD;
      border-radius: 6px;
      padding: 15px;
      margin-top: 10px;
    }

    .diagnosis-title {
      font-weight: bold;
      color: #1976D2;
      margin-bottom: 8px;
    }

    .diagnosis-content {
      color: #37474F;
      line-height: 1.6;
    }

    /* Antecedentes */
    .antecedent-item {
      background: white;
      padding: 12px;
      border-radius: 4px;
      border: 1px solid #E3E8F0;
      margin-top: 8px;
      line-height: 1.6;
    }

    /* Saltos de página */
    .page-break {
      page-break-before: always;
    }

    /* Controles médicos */
    .control-section {
      margin-bottom: 30px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      padding: 20px;
    }

    .control-header {
      background: #F5F7FA;
      padding: 12px;
      border-radius: 6px;
      margin-bottom: 15px;
      border-left: 4px solid #1976D2;
    }

    .control-date {
      font-weight: bold;
      color: #1976D2;
    }

    .control-doctor {
      color: #455A64;
      margin-top: 5px;
    }

    .control-content {
      background: white;
      padding: 15px;
      border-radius: 6px;
      border: 1px solid #E3E8F0;
    }

    /* Estilos para la portada */
    .cover-page {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 60px 40px;
      background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
      position: relative;
      overflow: hidden;
    }

    .cover-pattern {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231976D2' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
      opacity: 0.5;
      z-index: 0;
    }

    .cover-header {
      text-align: center;
      margin-bottom: 40px;
      position: relative;
      z-index: 1;
    }

    .cover-logo {
      max-width: 200px;
      margin-bottom: 30px;
    }

    .cover-title {
      font-size: 36pt;
      color: #1976D2;
      margin-bottom: 20px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 3px;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .cover-subtitle {
      font-size: 18pt;
      color: #455A64;
      margin-bottom: 20px;
      font-weight: 300;
      letter-spacing: 1px;
    }

    .cover-divider {
      width: 200px;
      height: 3px;
      background: linear-gradient(to right, transparent, #1976D2, transparent);
      margin: 30px auto;
    }

    .cover-content {
      text-align: center;
      margin: 40px 0;
      position: relative;
      z-index: 1;
    }

    .cover-patient-info {
      background: white;
      padding: 30px;
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      max-width: 600px;
      margin: 0 auto;
    }

    .cover-patient-name {
      font-size: 24pt;
      color: #1976D2;
      margin-bottom: 15px;
      font-weight: 500;
    }

    .cover-patient-details {
      color: #455A64;
      font-size: 14pt;
      margin-bottom: 10px;
    }

    .cover-quote {
      font-size: 16pt;
      color: #64748B;
      font-style: italic;
      max-width: 600px;
      margin: 40px auto 0;
      line-height: 1.6;
    }

    .cover-quote-author {
      font-size: 14pt;
      color: #1976D2;
      margin-top: 20px;
      font-weight: 500;
    }

    .cover-footer {
      text-align: center;
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid #E2E8F0;
      position: relative;
      z-index: 1;
    }

    .cover-clinic-info {
      font-size: 14pt;
      color: #1976D2;
      margin-bottom: 10px;
      font-weight: 600;
    }

    .cover-clinic-contact {
      font-size: 12pt;
      color: #64748B;
      margin-bottom: 5px;
    }

    .cover-year {
      font-size: 11pt;
      color: #94A3B8;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <!-- PORTADA -->
  <div class="cover-page">
    <div class="cover-pattern"></div>
    
    <div class="cover-header">
      @if(isset($identity) && $identity->logo_data_uri)
        <img src="{{ $identity->logo_data_uri }}" alt="Logo" class="cover-logo">
      @endif
      <h1 class="cover-title">Historia Clínica</h1>
      <div class="cover-subtitle">Registro Médico Oficial</div>
      <div class="cover-divider"></div>
    </div>

    <div class="cover-content">
      <div class="cover-patient-info">
        <div class="cover-patient-name">
          {{ $model->patient()->first()->firstname . " " . $model->patient()->first()->lastname }}
        </div>
        <div class="cover-patient-details">
          {{ __("common-view.view.numberHistory") }}: {{ $model->number_history }}
        </div>
        <div class="cover-patient-details">
          {{ __("common-view.view.date") }}: {{ \Carbon\Carbon::parse($model->created_at)->format('d/m/Y H:i') }}
        </div>
        <div class="cover-patient-details">
          {{ __("common-view.view.doctor") }}: {{ $model->user()->first()->profile ? 
            $model->user()->first()->profile->firstname . " " . $model->user()->first()->profile->lastname : 
            $model->user()->first()->name }}
        </div>
      </div>

      <div class="cover-quote">
        "La salud es un estado de completo bienestar físico, mental y social, y no solamente la ausencia de afecciones o enfermedades."
      </div>
      <div class="cover-quote-author">
        - Organización Mundial de la Salud
      </div>
    </div>

    <div class="cover-footer">
      @if(isset($identity) && $identity)
        <div class="cover-clinic-info">{{ $identity->name }}</div>
        <div class="cover-clinic-contact">
          {{ $identity->address }}
          @if($identity->phone || $identity->email)
            • 
            @if($identity->phone) Tel: {{ $identity->phone }} @endif
            @if($identity->phone && $identity->email) • @endif
            @if($identity->email) {{ $identity->email }} @endif
          @endif
        </div>
      @else
        <div class="cover-clinic-info">Centro Médico</div>
      @endif
      <div class="cover-year">
        {{ \Carbon\Carbon::now()->format('Y') }}
      </div>
    </div>
  </div>

  <!-- ENCABEZADO -->
  <div class="header">
    <div class="header-logo">
      @if(isset($identity) && $identity->logo_data_uri)
        <img src="{{ $identity->logo_data_uri }}" alt="Logo">
      @endif
    </div>
    <div class="header-info">
      @if(isset($identity) && $identity)
        <h1 style="margin: 0; color: #1976D2; font-size: 18pt;">{{ $identity->name }}</h1>
        <p style="margin: 5px 0; color: #455A64;">{{ $identity->address }}</p>
        @if($identity->phone || $identity->email)
          <p style="margin: 5px 0; color: #666;">
            @if($identity->phone) Tel: {{ $identity->phone }} @endif
            @if($identity->phone && $identity->email) • @endif
            @if($identity->email) {{ $identity->email }} @endif
          </p>
        @endif
      @else
        <h1 style="margin: 0; color: #1976D2; font-size: 18pt;">Centro Médico</h1>
      @endif
    </div>
  </div>

  <!-- ÍNDICE -->
  <div class="toc">
    <div class="toc-title">Índice</div>
    <table class="toc-table">
      <tr>
        <td class="toc-item">1. Información de la Consulta</td>
        <td class="toc-page">2</td>
      </tr>
      @if(count($model->getSectionHistory()) > 0)
      <tr>
        <td class="toc-item">2. Antecedentes Médicos</td>
        <td class="toc-page">3</td>
      </tr>
      @endif
      @if(count($model->getPhyscalExam()) > 0)
      <tr>
        <td class="toc-item">3. Examen Físico</td>
        <td class="toc-page">4</td>
      </tr>
      @endif
      @if(count($controls) > 0)
      <tr>
        <td class="toc-item">4. Controles Médicos</td>
        <td class="toc-page">5</td>
      </tr>
      @endif
    </table>
  </div>

  <!-- PIE DE PÁGINA DE ÍNDICE -->
  <div class="footer-spacer"></div>
  <footer class="footer">
    @if(isset($identity) && $identity)
      <strong>{{ $identity->name }}</strong> • {{ $identity->address }}
      @if($identity->phone || $identity->email)
        • 
        @if($identity->phone) Tel: {{ $identity->phone }} @endif
        @if($identity->phone && $identity->email) • @endif
        @if($identity->email) {{ $identity->email }} @endif
      @endif
    @else
      <strong>Centro Médico</strong>
    @endif
    • <span style="color:#3498db;">Fecha:</span> {{ \Carbon\Carbon::now()->format('d/m/Y H:i') }}
    • <span style="color:#3498db;">Página 1</span>
  </footer>

  <!-- INFORMACIÓN DE LA CONSULTA -->
  <div class="page-break"></div>
  <div class="mini-header">
    <strong>{{ $model->patient()->first()->firstname . " " . $model->patient()->first()->lastname }}</strong> - 
    {{ __("common-view.view.numberHistory") }}: {{ $model->number_history }}
  </div>
  <div class="section">
    <div class="section-title">1. Información de la Consulta</div>
    
    <!-- Datos del Paciente -->
    <div class="subsection">
      <h3 class="subsection-title">Datos del Paciente</h3>
      <table>
        <tr>
          <td class="label">Nombre Completo:</td>
          <td class="value">{{ $model->patient()->first()->firstname . " " . $model->patient()->first()->lastname }}</td>
        </tr>
        <tr>
          <td class="label">Número de Historia:</td>
          <td class="value">{{ $model->number_history }}</td>
        </tr>
        <tr>
          <td class="label">Fecha de Consulta:</td>
          <td class="value">{{ \Carbon\Carbon::parse($model->created_at)->format('d/m/Y H:i') }}</td>
        </tr>
        <tr>
          <td class="label">Médico:</td>
          <td class="value">
            {{ $model->user()->first()->profile ? 
               $model->user()->first()->profile->firstname . " " . $model->user()->first()->profile->lastname : 
               $model->user()->first()->name }}
          </td>
        </tr>
        <tr>
          <td class="label">Especialidad:</td>
          <td class="value">
            @if(is_array($especialities))
              @foreach($especialities as $especiality)
                @if(is_object($especiality) && $especiality->id == $model->especiality)
                  {{ $especiality->name }}
                @endif
              @endforeach
            @else
              {{ $especialities }}
            @endif
          </td>
        </tr>
      </table>
    </div>

    <!-- Motivo de Consulta -->
    <div class="subsection">
      <h3 class="subsection-title">Motivo de Consulta</h3>
      <div class="antecedent-item">{{ $model->title }}</div>
    </div>

    <!-- Enfermedad Actual -->
    <div class="subsection">
      <h3 class="subsection-title">Enfermedad Actual</h3>
      <div class="antecedent-item">{{ $model->summary }}</div>
    </div>

    <!-- Diagnóstico -->
    @if($model->diagnosis)
    <div class="subsection">
      <h3 class="subsection-title">Diagnóstico</h3>
      <div class="diagnosis-box">
        <div class="diagnosis-title">Diagnóstico Principal:</div>
        <div class="diagnosis-content">{{ $model->diagnosis }}</div>
      </div>
    </div>
    @endif
  </div>

  <!-- PIE DE PÁGINA DE INFORMACIÓN DE LA CONSULTA -->
  <div class="footer-spacer"></div>
  <footer class="footer">
    @if(isset($identity) && $identity)
      <strong>{{ $identity->name }}</strong> • {{ $identity->address }}
      @if($identity->phone || $identity->email)
        • 
        @if($identity->phone) Tel: {{ $identity->phone }} @endif
        @if($identity->phone && $identity->email) • @endif
        @if($identity->email) {{ $identity->email }} @endif
      @endif
    @else
      <strong>Centro Médico</strong>
    @endif
    • <span style="color:#3498db;">Fecha:</span> {{ \Carbon\Carbon::now()->format('d/m/Y H:i') }}
    • <span style="color:#3498db;">Página 2</span>
  </footer>

  <!-- PÁGINA 2: ANTECEDENTES -->
  @if(count($model->getSectionHistory()) > 0)
  <div class="page-break"></div>
  <div class="mini-header">
    <strong>{{ $model->patient()->first()->firstname . " " . $model->patient()->first()->lastname }}</strong> - 
    {{ __("common-view.view.numberHistory") }}: {{ $model->number_history }}
  </div>
  <div class="section">
    <div class="section-title">2. Antecedentes Médicos</div>
    
    @foreach($model->getSectionHistory() as $sectionHistory)
    <div class="subsection">
      <h3 class="subsection-title">{{ $sectionHistory->title }}</h3>
      <div class="antecedent-item">{{ $sectionHistory->summary }}</div>
    </div>
    @endforeach
  </div>
  
  <!-- PIE DE PÁGINA DE ANTECEDENTES -->
  <div class="footer-spacer"></div>
  <footer class="footer">
    @if(isset($identity) && $identity)
      <strong>{{ $identity->name }}</strong> • {{ $identity->address }}
      @if($identity->phone || $identity->email)
        • 
        @if($identity->phone) Tel: {{ $identity->phone }} @endif
        @if($identity->phone && $identity->email) • @endif
        @if($identity->email) {{ $identity->email }} @endif
      @endif
    @else
      <strong>Centro Médico</strong>
    @endif
    • <span style="color:#3498db;">Fecha:</span> {{ \Carbon\Carbon::now()->format('d/m/Y H:i') }}
    • <span style="color:#3498db;">Página 3</span>
  </footer>
  @endif

  <!-- PÁGINA 3: EXAMEN FÍSICO -->
  @if(count($model->getPhyscalExam()) > 0)
  <div class="page-break"></div>
  <div class="mini-header">
    <strong>{{ $model->patient()->first()->firstname . " " . $model->patient()->first()->lastname }}</strong> - 
    {{ __("common-view.view.numberHistory") }}: {{ $model->number_history }}
  </div>
  <div class="section">
    <div class="section-title">3. Examen Físico</div>
    
    @foreach($model->getPhyscalExam() as $key => $value)
    <div class="subsection">
      <h3 class="subsection-title">{{ __("com-form-history." . $key) }}</h3>
      <div class="antecedent-item">{{ $value }}</div>
    </div>
    @endforeach
  </div>
  
  <!-- PIE DE PÁGINA DE EXAMEN FÍSICO -->
  <div class="footer-spacer"></div>
  <footer class="footer">
    @if(isset($identity) && $identity)
      <strong>{{ $identity->name }}</strong> • {{ $identity->address }}
      @if($identity->phone || $identity->email)
        • 
        @if($identity->phone) Tel: {{ $identity->phone }} @endif
        @if($identity->phone && $identity->email) • @endif
        @if($identity->email) {{ $identity->email }} @endif
      @endif
    @else
      <strong>Centro Médico</strong>
    @endif
    • <span style="color:#3498db;">Fecha:</span> {{ \Carbon\Carbon::now()->format('d/m/Y H:i') }}
    • <span style="color:#3498db;">Página 4</span>
  </footer>
  @endif

  <!-- PÁGINA 4: CONTROLES MÉDICOS -->
  @if(count($controls) > 0)
  <div class="page-break"></div>
  <div class="mini-header">
    <strong>{{ $model->patient()->first()->firstname . " " . $model->patient()->first()->lastname }}</strong> - 
    {{ __("common-view.view.numberHistory") }}: {{ $model->number_history }}
  </div>
  <div class="section">
    <div class="section-title">4. Controles Médicos</div>
    
    @foreach($controls as $control)
    <div class="control-section">
      <div class="control-header">
        <div class="control-date">
          {{ \Carbon\Carbon::parse($control->created_at)->format('d/m/Y H:i') }}
        </div>
        <div class="control-doctor">
          Dr(a). {{ $control->user()->first()->profile ? 
                   $control->user()->first()->profile->firstname . " " . $control->user()->first()->profile->lastname : 
                   $control->user()->first()->name }}
        </div>
      </div>
      
      <div class="control-content">
        @if($control->title)
        <div class="subsection">
          <h3 class="subsection-title">Motivo de Control</h3>
          <div class="antecedent-item">{{ $control->title }}</div>
        </div>
        @endif
        
        @if($control->summary)
        <div class="subsection">
          <h3 class="subsection-title">Descripción</h3>
          <div class="antecedent-item">{{ $control->summary }}</div>
        </div>
        @endif
        
        @if($control->diagnosis)
        <div class="subsection">
          <h3 class="subsection-title">Diagnóstico</h3>
          <div class="diagnosis-box">
            <div class="diagnosis-content">{{ $control->diagnosis }}</div>
          </div>
        </div>
        @endif
        
        @if($control->getControlPhyscalExam())
        <div class="subsection">
          <h3 class="subsection-title">Examen Físico</h3>
          @foreach($control->getControlPhyscalExam() as $key => $value)
          <div class="antecedent-item">
            <strong>{{ __("com-form-history." . $key) }}:</strong> {{ $value }}
          </div>
          @endforeach
        </div>
        @endif
      </div>
    </div>
    @endforeach
  </div>
  
  <!-- PIE DE PÁGINA DE CONTROLES -->
  <div class="footer-spacer"></div>
  <footer class="footer">
    @if(isset($identity) && $identity)
      <strong>{{ $identity->name }}</strong> • {{ $identity->address }}
      @if($identity->phone || $identity->email)
        • 
        @if($identity->phone) Tel: {{ $identity->phone }} @endif
        @if($identity->phone && $identity->email) • @endif
        @if($identity->email) {{ $identity->email }} @endif
      @endif
    @else
      <strong>Centro Médico</strong>
    @endif
    • <span style="color:#3498db;">Fecha:</span> {{ \Carbon\Carbon::now()->format('d/m/Y H:i') }}
    • <span style="color:#3498db;">Página 5</span>
  </footer>
  @endif
</body>
</html>
