@extends('layouts.jobseeker')

@section('title', 'Auto-Generated Curriculum Vitae | Candidate Portal')

@section('content')
<div class="jobseeker-resume-view" style="max-width: 900px; margin: 0 auto;">
  <!-- Action Bar (Hidden in Print) -->
  <div class="no-print" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem;">
    <div>
      <h1 style="font-size: 1.75rem; font-family: var(--font-heading); margin-bottom: 0.25rem;">Standardized Employment CV</h1>
      <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">Verified curriculum vitae auto-generated from your MahaSwayam profile records.</p>
    </div>
    <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
      <a href="{{ route('jobseeker.resume.download') }}" class="btn btn-primary" style="display: inline-flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-file-pdf"></i> Download Official PDF
      </a>
      <button type="button" onclick="window.print()" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-print"></i> Print CV
      </button>
      <a href="{{ route('jobseeker.wizard') }}" class="btn btn-outline" style="display: inline-flex; align-items: center; gap: 0.5rem;">
        <i class="fas fa-edit"></i> Edit Records
      </a>
    </div>
  </div>

  <!-- Styled Printable Resume Card -->
  <div class="printable-resume-card" style="background: #ffffff; color: #1e293b; border-radius: 8px; border: 1px solid #cbd5e1; padding: 3rem; box-shadow: 0 10px 25px rgba(0,0,0,0.06); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; position: relative;">
    
    <!-- Header Section with Photo & Verified Badge -->
    <div style="display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #0f172a; padding-bottom: 1.75rem; margin-bottom: 2rem; gap: 1.5rem;">
      <div style="flex: 1;">
        <div style="display: inline-block; background: #0f172a; color: #38bdf8; font-size: 0.75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 4px; margin-bottom: 0.5rem;">
          Verified Candidate Dossier
        </div>
        <h2 style="font-size: 2.1rem; font-weight: 800; color: #0f172a; margin: 0 0 0.4rem 0; letter-spacing: -0.5px;">
          {{ $user->name }}
        </h2>
        <div style="font-size: 0.95rem; font-weight: 600; color: #475569; margin-bottom: 0.75rem;">
          {{ $highestQualification?->stream_degree ?? 'Registered Candidate' }} • {{ $profile->preferred_sector ?? 'Professional' }}
        </div>

        <div style="font-size: 0.88rem; color: #475569; display: flex; flex-wrap: wrap; gap: 1.25rem;">
          <span><i class="fas fa-id-badge" style="color: #0284c7; width: 16px;"></i> <strong>{{ $user->registration_id ?: 'MH-REGISTERED' }}</strong></span>
          <span><i class="fas fa-envelope" style="color: #0284c7; width: 16px;"></i> {{ $user->email }}</span>
          <span><i class="fas fa-phone" style="color: #0284c7; width: 16px;"></i> {{ $user->phone ?? $profile->alternate_mobile ?? 'N/A' }}</span>
          <span><i class="fas fa-map-marker-alt" style="color: #0284c7; width: 16px;"></i> {{ $profile->district ?? 'Maharashtra' }}, Maharashtra</span>
        </div>
      </div>

      <!-- Photo & QR Code -->
      <div style="display: flex; gap: 1rem; align-items: center;">
        @if($profile->photo_path)
          <div style="width: 105px; height: 125px; border: 2px solid #0f172a; border-radius: 4px; overflow: hidden; background: #f8fafc;">
            <img src="{{ asset('storage/' . $profile->photo_path) }}" alt="Candidate Photo" style="width: 100%; height: 100%; object-fit: cover;">
          </div>
        @else
          <div style="width: 105px; height: 125px; border: 2px solid #0f172a; border-radius: 4px; background: #0f172a; color: #38bdf8; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; font-weight: 800;">
            {{ strtoupper(substr($user->name, 0, 1)) }}
          </div>
        @endif

        <!-- QR Code -->
        <div style="text-align: center; width: 85px;">
          <div style="width: 80px; height: 80px; border: 1px solid #cbd5e1; border-radius: 4px; padding: 4px; background: #fff; margin: 0 auto 0.25rem;">
            <svg viewBox="0 0 100 100" style="width: 100%; height: 100%; fill: #0f172a;">
              <rect x="5" y="5" width="28" height="28" fill="#0f172a" />
              <rect x="9" y="9" width="20" height="20" fill="#ffffff" />
              <rect x="13" y="13" width="12" height="12" fill="#0f172a" />
              <rect x="67" y="5" width="28" height="28" fill="#0f172a" />
              <rect x="71" y="9" width="20" height="20" fill="#ffffff" />
              <rect x="75" y="13" width="12" height="12" fill="#0f172a" />
              <rect x="5" y="67" width="28" height="28" fill="#0f172a" />
              <rect x="9" y="71" width="20" height="20" fill="#ffffff" />
              <rect x="13" y="75" width="12" height="12" fill="#0f172a" />
              <rect x="38" y="10" width="8" height="8" fill="#0f172a" />
              <rect x="42" y="24" width="8" height="8" fill="#0f172a" />
              <rect x="50" y="38" width="8" height="8" fill="#0f172a" />
              <rect x="20" y="44" width="8" height="8" fill="#0f172a" />
              <rect x="36" y="50" width="8" height="8" fill="#0f172a" />
              <rect x="65" y="50" width="8" height="8" fill="#0f172a" />
              <rect x="44" y="66" width="8" height="8" fill="#0f172a" />
              <rect x="60" y="72" width="8" height="8" fill="#0f172a" />
              <rect x="76" y="80" width="8" height="8" fill="#0f172a" />
            </svg>
          </div>
          <span style="font-size: 0.62rem; color: #64748b; font-weight: 700; text-transform: uppercase;">Scan To Verify</span>
        </div>
      </div>
    </div>

    <!-- Career Objective / Professional Statement -->
    <div style="margin-bottom: 2rem;">
      <h3 style="font-size: 1.05rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1.5px solid #e2e8f0; padding-bottom: 0.4rem; margin-bottom: 0.75rem;">
        Professional Summary & Career Objective
      </h3>
      <p style="font-size: 0.92rem; line-height: 1.6; color: #334155; margin: 0;">
        Registered candidate in the Maharashtra Model Employment Service network with academic qualification in <strong>{{ $highestQualification?->stream_degree ?? 'General Studies' }}</strong>. Actively seeking dynamic career requisitions in <strong>{{ $profile->preferred_sector ?: 'Information Technology & Corporate Services' }}</strong> across <strong>{{ $profile->preferred_district ?: ($profile->district ?: 'Maharashtra') }}</strong>. Dedicated to delivering statutory compliance, operational excellence, and technical competence.
      </p>
    </div>

    <!-- Academic Qualifications -->
    <div style="margin-bottom: 2rem;">
      <h3 style="font-size: 1.05rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1.5px solid #e2e8f0; padding-bottom: 0.4rem; margin-bottom: 0.75rem;">
        Educational Qualifications & Certifications
      </h3>

      <table style="width: 100%; border-collapse: collapse; font-size: 0.88rem;">
        <thead>
          <tr style="background: #f1f5f9; border-bottom: 2px solid #cbd5e1; text-align: left;">
            <th style="padding: 0.6rem 0.75rem; font-weight: 700; color: #0f172a;">Level</th>
            <th style="padding: 0.6rem 0.75rem; font-weight: 700; color: #0f172a;">Degree / Stream</th>
            <th style="padding: 0.6rem 0.75rem; font-weight: 700; color: #0f172a;">Board / University</th>
            <th style="padding: 0.6rem 0.75rem; font-weight: 700; color: #0f172a;">Year</th>
            <th style="padding: 0.6rem 0.75rem; font-weight: 700; color: #0f172a; text-align: right;">Percentage / Grade</th>
          </tr>
        </thead>
        <tbody>
          @forelse($qualifications as $qual)
            <tr style="border-bottom: 1px solid #e2e8f0;">
              <td style="padding: 0.6rem 0.75rem; font-weight: 600; color: #0f172a;">{{ $qual->level }}</td>
              <td style="padding: 0.6rem 0.75rem; color: #334155;">{{ $qual->stream_degree }}</td>
              <td style="padding: 0.6rem 0.75rem; color: #475569;">{{ $qual->board_university }}</td>
              <td style="padding: 0.6rem 0.75rem; color: #475569;">{{ $qual->passing_year }}</td>
              <td style="padding: 0.6rem 0.75rem; font-weight: 700; color: #0f172a; text-align: right;">
                {{ $qual->percentage ? $qual->percentage . '%' : ($qual->grade ?? 'Passed') }}
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="5" style="padding: 1rem; text-align: center; color: #64748b;">No qualifications recorded.</td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <!-- Personal Particulars & Placement Preferences (2-Column Grid) -->
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem;">
      <!-- Column 1: Personal Details -->
      <div>
        <h3 style="font-size: 1.05rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1.5px solid #e2e8f0; padding-bottom: 0.4rem; margin-bottom: 0.75rem;">
          Personal Information
        </h3>
        <table style="width: 100%; font-size: 0.88rem; line-height: 1.8;">
          <tr>
            <td style="color: #64748b; width: 45%;">Date of Birth:</td>
            <td style="font-weight: 600; color: #0f172a;">{{ $profile->dob ? $profile->dob->format('d M Y') : 'N/A' }}</td>
          </tr>
          <tr>
            <td style="color: #64748b;">Gender:</td>
            <td style="font-weight: 600; color: #0f172a;">{{ ucfirst($profile->gender ?? 'N/A') }}</td>
          </tr>
          <tr>
            <td style="color: #64748b;">Social Category:</td>
            <td style="font-weight: 600; color: #0f172a;">{{ strtoupper($profile->category ?? 'OPEN') }}</td>
          </tr>
          <tr>
            <td style="color: #64748b;">Father's Name:</td>
            <td style="font-weight: 600; color: #0f172a;">{{ $profile->father_name ?? 'N/A' }}</td>
          </tr>
          <tr>
            <td style="color: #64748b;">UIDAI Aadhaar Ref:</td>
            <td style="font-weight: 600; font-family: monospace; color: #0f172a;">
              XXXX-XXXX-{{ $profile->aadhaar_last4 ?? '----' }} (Verified)
            </td>
          </tr>
        </table>
      </div>

      <!-- Column 2: Career Preferences -->
      <div>
        <h3 style="font-size: 1.05rem; font-weight: 800; color: #0f172a; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1.5px solid #e2e8f0; padding-bottom: 0.4rem; margin-bottom: 0.75rem;">
          Employment Preferences
        </h3>
        <table style="width: 100%; font-size: 0.88rem; line-height: 1.8;">
          <tr>
            <td style="color: #64748b; width: 45%;">Placement District:</td>
            <td style="font-weight: 600; color: #0f172a;">{{ $profile->preferred_district ?: ($profile->district ?: 'Maharashtra') }}</td>
          </tr>
          <tr>
            <td style="color: #64748b;">Industry Sector:</td>
            <td style="font-weight: 600; color: #0f172a;">{{ $profile->preferred_sector ?: 'Open / Multi-Sector' }}</td>
          </tr>
          <tr>
            <td style="color: #64748b;">Expected Salary:</td>
            <td style="font-weight: 600; color: #10b981;">
              @if($profile->expected_salary_min)
                ₹{{ number_format($profile->expected_salary_min) }} - ₹{{ number_format($profile->expected_salary_max) }} / Month
              @else
                As per industry standards
              @endif
            </td>
          </tr>
          <tr>
            <td style="color: #64748b;">Exchange Registration:</td>
            <td style="font-weight: 600; color: #0f172a;">
              Valid until {{ $user->expiry_date ? $user->expiry_date->format('d M Y') : 'Active' }}
            </td>
          </tr>
        </table>
      </div>
    </div>

    <!-- Official Statutory Footer & Declaration -->
    <div style="border-top: 1.5px solid #cbd5e1; padding-top: 1.25rem; margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: flex-end; font-size: 0.8rem; color: #64748b;">
      <div>
        <strong>Declaration:</strong> I hereby declare that all details furnished above are verified against statutory Aadhaar records.<br>
        <em>Generated via Zhelhire Consultancy & MahaSwayam Employment Portal on {{ date('d M Y') }}.</em>
      </div>
      <div style="text-align: right; font-weight: 700; color: #0f172a;">
        {{ $user->name }}<br>
        <span style="font-size: 0.72rem; color: #64748b; font-weight: normal;">Digitally Verified Signature</span>
      </div>
    </div>
  </div>
</div>
@endsection