@extends('layouts.guru_piket.app')

@section('title', 'Dashboard Guru Piket')

@push('styles')
<style>
  @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
  :root {
    --navy:#0f1f3d; --sky:#2563eb; --gold:#c9a24a; --gold2:#e2bb6a;
    --ink:#1e293b; --dim:#64748b; --fog:#f1f5f9; --line:#e2e8f0;
    --white:#ffffff; --green:#16a34a; --red:#dc2626; --amber:#d97706;
  }
  .gp-wrap * { font-family:'DM Sans',sans-serif; box-sizing:border-box; }
  .gp-wrap { display:flex; flex-direction:column; gap:24px; }

  /* FLASH */
  .gp-flash { display:flex; align-items:center; gap:10px; padding:13px 18px; border-radius:12px; font-size:13px; font-weight:500; }
  .gp-flash svg { width:16px; height:16px; flex-shrink:0; }
  .gp-flash--ok  { background:#f0fdf4; border:1px solid #86efac; color:#15803d; animation:slideUp .4s ease both; }
  .gp-flash--err { background:#fff5f5; border:1px solid #fca5a5; color:#b91c1c; animation:slideUp .4s ease both; }

  /* HERO */
  .gp-hero {
    position:relative; background:var(--navy); border-radius:20px;
    padding:32px 40px; overflow:hidden;
    display:flex; align-items:center; justify-content:space-between; gap:24px;
    animation:slideUp .4s ease both;
  }
  .gp-hero::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 55% 80% at 85% 50%,rgba(37,99,235,.18) 0%,transparent 65%),
               radial-gradient(ellipse 40% 60% at 12% 20%,rgba(201,162,74,.1) 0%,transparent 60%);
    pointer-events:none;
  }
  .gp-hero::after {
    content:''; position:absolute; inset:0;
    background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                     linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
    background-size:32px 32px; pointer-events:none;
  }
  .gp-hero-left { position:relative; z-index:1; }
  .gp-hero-eyebrow {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(201,162,74,.15); border:1px solid rgba(201,162,74,.3);
    border-radius:99px; padding:4px 14px;
    font-size:10px; font-weight:600; letter-spacing:2px;
    text-transform:uppercase; color:var(--gold2); margin-bottom:10px;
  }
  .gp-hero-eyebrow i { width:5px; height:5px; border-radius:50%; background:var(--gold); display:inline-block; }
  .gp-hero h1 {
    font-family:'Playfair Display',serif;
    font-size:clamp(20px,3.5vw,30px); font-weight:700;
    color:var(--white); line-height:1.2; margin:0 0 6px;
  }
  .gp-hero p { font-size:13px; color:rgba(255,255,255,.45); font-weight:300; margin:0; }
  .gp-hero-right { position:relative; z-index:1; flex-shrink:0; text-align:right; }
  .gp-hero-date {
    font-family:'Playfair Display',serif;
    font-size:13px; color:rgba(255,255,255,.5);
  }

  @keyframes slideUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }
  @media(max-width:700px) { .gp-hero{padding:24px 20px;flex-direction:column;align-items:flex-start;} .gp-hero-right{display:none;} }
</style>
@endpush

@section('content')
<div class="gp-wrap">

  {{-- FLASH --}}
  @if(session('success'))
  <div class="gp-flash gp-flash--ok" x-data="{show:true}" x-init="setTimeout(()=>show=false,5000)" x-show="show">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
  </div>
  @endif
  @if(session('error'))
  <div class="gp-flash gp-flash--err">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
    {{ session('error') }}
  </div>
  @endif

  {{-- HERO --}}
  <div class="gp-hero">
    <div class="gp-hero-left">
      <div class="gp-hero-eyebrow"><i></i> Sistem Informasi Sekolah</div>
      <h1>Dashboard Guru Piket</h1>
      <p>{{ $hari }}, {{ $today->format('d F Y') }}</p>
    </div>
    <div class="gp-hero-right">
      <div class="gp-hero-date">{{ $today->format('d M Y') }}</div>
    </div>
  </div>

  {{-- SURAT --}}
  @include('guru_piket.surat')

  {{-- TABEL KEHADIRAN GURU --}}
  @include('guru_piket.partials.tabel-kehadiran-guru')

  {{-- TABEL KETIDAKHADIRAN SISWA --}}
  @include('guru_piket.partials.tabel-ketidakhadiran-siswa')

  {{-- TABEL JADWAL HARI INI --}}
  @include('guru_piket.partials.tabel-jadwal-hari-ini')

</div>
@endsection