@extends('layouts.admin')
@section('title', 'Foto Header Halaman – Admin')

@section('admin-content')
<div class="sd-admin-topbar">
  <div>
    <p class="sd-admin-eyebrow">Pengaturan Tampilan</p>
    <h1 class="sd-admin-title">Foto Header Halaman</h1>
  </div>
</div>

<p class="hint" style="margin-bottom:20px">
  Ini foto besar di bawah navbar (di belakang judul halaman) yang muncul di setiap halaman.
  Upload foto baru untuk mengganti, atau klik "Kembalikan ke Bawaan" untuk pakai foto default lagi.
  Ukuran yang bagus: foto landscape lebar (minimal 1400×500px) supaya tidak pecah.
</p>

<div style="display:grid;grid-template-columns:repeat(2,1fr);gap:16px">
  @foreach($items as $item)
  <div class="sd-admin-card" style="margin-bottom:0">
    <div style="display:flex;gap:16px;align-items:flex-start">
      <img src="{{ $item->url }}" alt="{{ $item->label }}" style="width:160px;height:100px;object-fit:cover;border:1px solid var(--abu);flex-shrink:0">
      <div style="flex:1;min-width:0">
        <p style="font-weight:700;font-size:.92rem;margin-bottom:4px">{{ $item->label }}</p>
        <p class="hint" style="margin-bottom:10px">
          {{ $item->gambar ? 'Pakai foto upload sendiri' : 'Pakai foto bawaan' }}
        </p>

        <form action="{{ route('admin.page-hero.update', $item->id) }}" method="POST" enctype="multipart/form-data" style="display:flex;gap:8px;flex-wrap:wrap;align-items:center">
          @csrf
          @method('PUT')
          <input type="file" name="gambar" accept="image/*" required style="font-size:.76rem;max-width:180px">
          <button type="submit" class="sd-admin-btn kecil"><i class="bi bi-upload"></i> Ganti</button>
        </form>

        @if($item->gambar)
        <form action="{{ route('admin.page-hero.reset', $item->id) }}" method="POST" style="margin-top:6px" onsubmit="return confirm('Kembalikan ke foto bawaan?')">
          @csrf
          @method('PUT')
          <button type="submit" class="sd-admin-btn kecil outline"><i class="bi bi-arrow-counterclockwise"></i> Kembalikan ke Bawaan</button>
        </form>
        @endif
      </div>
    </div>
  </div>
  @endforeach
</div>
@endsection