@extends('layouts.intern')

@section('content')
  <!-- Header -->
  <header class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
    <div>
      <h2 class="text-3xl font-bold text-[#13124E] tracking-tight">Dashboard</h2>
      <p class="text-xs text-gray-400 mt-1">Pantau progres kegiatan dan status magang kamu.</p>
    </div>
    <!-- Widget Tanggal -->
    <div class="flex items-center space-x-2.5 bg-white px-3.5 py-1.5 border border-gray-200 rounded-lg text-xs font-medium text-[#13124E] shadow-2xs self-start sm:self-auto">
      <span>{{ \Carbon\Carbon::now()->translatedFormat('d F Y') }}</span>
      <i class="fa-regular fa-calendar text-[#13124E] text-xs"></i>
    </div>
  </header>

  @if (session('success'))
    <div class="mb-6 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-xs font-medium text-emerald-800 flex items-center justify-between shadow-xs">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
        <span>{{ session('success') }}</span>
      </div>
    </div>
  @endif

  @if (session('error'))
    <div class="mb-6 p-4 rounded-xl bg-rose-50 border border-rose-200 text-xs font-medium text-rose-800 flex items-center justify-between shadow-xs">
      <div class="flex items-center gap-2">
        <i class="fa-solid fa-circle-exclamation text-rose-600 text-sm"></i>
        <span>{{ session('error') }}</span>
      </div>
    </div>
  @endif

  <!-- Banner Sapaan -->
  <section class="bg-[#13124E] text-white rounded-2xl p-7 mb-6 shadow-xs relative overflow-hidden">
    <div class="flex items-center gap-2 text-[11px] font-semibold text-white/90 tracking-wider mb-2.5">
      <span class="w-1.5 h-1.5 rounded-full bg-white inline-block shrink-0"></span>
      <span>Periode Magang {{ $intern?->getBatchStartDate() ? $intern->getBatchStartDate()->format('d/m/Y') : ($intern?->start_date ? \Carbon\Carbon::parse($intern->start_date)->format('d/m/Y') : '-') }} - {{ $intern?->getBatchEndDate() ? $intern->getBatchEndDate()->format('d/m/Y') : ($intern?->end_date ? \Carbon\Carbon::parse($intern->end_date)->format('d/m/Y') : '-') }}</span>
    </div>
    <h3 class="text-2xl font-bold mb-1.5">{{ $greeting }}, {{ Auth::user()->name }}!</h3>
    <p class="text-xs text-indigo-100/90 font-normal">
      @if($intern && $intern->status === 'lulus')
      Selamat Atas Keberhasilan Anda Menyelesaikan Program Magang!
      @elseif($intern && $intern->status === 'fail')
      Anda tidak lulus program magang. Jangan menyerah, tingkatkan kompetensi Anda!
      @elseif($intern && ! $intern->hasBatchStarted())
      Masa magang batch Anda belum dimulai. Periode magang akan dimulai pada tanggal {{ $intern->getBatchStartDate()?->translatedFormat('d F Y') ?? '-' }}.
      @elseif ($hasReportToday)
        Kamu sudah mengisi jurnal kegiatan hari ini. Tetap semangat!
      @else
        Jangan lupa isi jurnal kegiatan hari ini, {{ Auth::user()->name }}.
      @endif
    </p>
  </section>

  @if ($intern && $intern->status === 'lulus')
    <!-- Banner Kelulusan -->
    <section class="bg-[#E7F2ED] border border-[#B7E4C7] rounded-2xl p-6 mb-6 shadow-xs flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
      <div>
        <h3 class="text-lg font-bold text-[#246B51] mb-1">
          Selamat! Anda Telah Lulus Magang!
        </h3>
        <p class="text-xs text-[#246B51] font-normal">
          Selamat atas keberhasilan Anda menyelesaikan program magang. Sertifikat kelulusan Anda kini tersedia.
        </p>
      </div>

      <div class="flex flex-wrap items-center gap-3 shrink-0">
        <a href="{{ route('intern.certificate') }}"
          class="inline-flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold px-4 py-2 rounded-lg shadow-2xs transition">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
          </svg>
          Lihat Sertifikat
        </a>

        <a href="{{ route('intern.certificate.download') }}"
          class="inline-flex items-center justify-center gap-2 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 border border-emerald-200 text-xs font-semibold px-4 py-2 rounded-lg shadow-2xs transition">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
          </svg>
          Download PDF
        </a>
      </div>
    </section>
  @endif

  @if($intern && $intern->status === 'aktif' && $intern->hasBatchStarted() && count($missingDates) > 0)
    <!-- Banner Peringatan Belum Mengisi Logbook -->
    <section class="bg-amber-50 border border-amber-200/80 rounded-2xl p-5 mb-6 shadow-xs flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
      <div class="flex items-start gap-3.5">
        <div class="w-10 h-10 rounded-xl bg-amber-500 text-white flex items-center justify-center shrink-0 shadow-2xs mt-0.5">
          <i class="fa-solid fa-triangle-exclamation text-base"></i>
        </div>
        <div>
          <h3 class="text-sm font-bold text-amber-950 mb-1">
            Perhatian: Anda belum mengisi logbook untuk {{ count($missingDates) }} hari!
          </h3>
          <p class="text-xs text-amber-900 leading-relaxed">
            Tanggal yang belum diisi (7 hari terakhir):
            <span class="font-semibold text-amber-950">
              {{ collect($missingDates)->pluck('short')->join(', ') }}
            </span>.
            Anda masih dapat mengisi logbook hingga 7 hari ke belakang.
          </p>
        </div>
      </div>
      <a href="{{ route('intern.jurnal_kegiatan') }}" wire:navigate
        class="inline-flex items-center justify-center gap-2 bg-amber-600 hover:bg-amber-700 text-white text-xs font-semibold px-4 py-2.5 rounded-lg shadow-2xs transition shrink-0 cursor-pointer">
        <i class="fa-solid fa-pen-to-square"></i>
        <span>Isi Logbook Sekarang</span>
      </a>
    </section>
  @endif

  <!-- Livewire Stats Overview (Data Binding, Loading States, URL State, Lazy Loading) -->
  <livewire:intern.stats-overview />

  <!-- Livewire Recent Activity Table (Data Binding, Loading States, URL State, Lazy Loading) -->
  <livewire:intern.recent-activity-table />
@endsection