@extends('layouts.app')
@section('title', 'Hubungi Kami – SD Negeri 4 Keling')

@push('styles')
<style>
/* ── Kontak Cards atas ──────────────────────── */
.sd-kontak-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:44px}
.sd-kontak-card{
  background:var(--putih);border:1px solid var(--abu);
  padding:28px 20px;text-align:center;
  border-top:4px solid transparent;
  transition:box-shadow .2s,transform .2s;
}
.sd-kontak-card:hover{box-shadow:0 6px 22px rgba(0,0,0,.09);transform:translateY(-3px)}
.sd-kontak-card:nth-child(1){border-top-color:var(--biru)}
.sd-kontak-card:nth-child(2){border-top-color:#25d366}
.sd-kontak-card:nth-child(3){border-top-color:#e1306c}
.sd-kontak-card:nth-child(4){border-top-color:var(--kuning)}
.sd-kontak-card-icon{
  font-size:2rem;display:block;margin-bottom:14px;
}
.sd-kontak-card:nth-child(1) .sd-kontak-card-icon{color:var(--biru)}
.sd-kontak-card:nth-child(2) .sd-kontak-card-icon{color:#25d366}
.sd-kontak-card:nth-child(3) .sd-kontak-card-icon{color:#e1306c}
.sd-kontak-card:nth-child(4) .sd-kontak-card-icon{color:var(--kuning)}
.sd-kontak-card-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--teks-abu);margin-bottom:6px}
.sd-kontak-card-val{font-size:.92rem;font-weight:700;color:var(--teks);margin-bottom:4px;line-height:1.4}
.sd-kontak-card-sub{font-size:.74rem;color:var(--teks-abu);line-height:1.5;margin-bottom:14px}
.sd-kontak-card-btn{
  display:inline-block;padding:7px 18px;
  font-size:.75rem;font-weight:700;font-family:var(--font);
  border:1.5px solid var(--abu);background:var(--putih);color:var(--teks);
  cursor:pointer;transition:all .16s;text-decoration:none;
}
.sd-kontak-card:nth-child(1) .sd-kontak-card-btn:hover{border-color:var(--biru);color:var(--biru)}
.sd-kontak-card:nth-child(2) .sd-kontak-card-btn:hover{border-color:#25d366;color:#25d366}
.sd-kontak-card:nth-child(3) .sd-kontak-card-btn:hover{border-color:#e1306c;color:#e1306c}
.sd-kontak-card:nth-child(4) .sd-kontak-card-btn:hover{border-color:var(--kuning);color:#9a6600}

/* ── Layout utama: form + info ──────────────── */
.sd-hubungi-wrap{display:grid;grid-template-columns:1fr 380px;gap:28px;margin-bottom:44px;align-items:start}

/* ── Form Pesan ─────────────────────────────── */
.sd-form-card{background:var(--putih);border:1px solid var(--abu)}
.sd-form-card-head{
  background:var(--biru);color:var(--putih);
  padding:16px 24px;font-size:.82rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.sd-form-card-body{padding:24px}
.sd-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sd-form-full{grid-column:1/-1}
.sd-form-group{display:flex;flex-direction:column;gap:6px}
.sd-form-label{font-size:.78rem;font-weight:600;color:var(--teks)}
.sd-form-label span{color:var(--merah)}
.sd-form-input,.sd-form-select,.sd-form-textarea{
  width:100%;padding:11px 14px;
  border:1.5px solid #d0d0d0;
  font-family:var(--font);font-size:.85rem;color:var(--teks);
  outline:none;background:var(--putih);border-radius:0;
  transition:border-color .18s;
}
.sd-form-input:focus,.sd-form-select:focus,.sd-form-textarea:focus{border-color:var(--biru)}
.sd-form-textarea{resize:vertical;min-height:130px}
.sd-form-submit{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 30px;
  background:var(--biru);color:var(--putih);
  font-family:var(--font);font-size:.88rem;font-weight:700;
  border:none;cursor:pointer;
  transition:background .18s,transform .12s;
  margin-top:4px;
}
.sd-form-submit:hover{background:#1a2280;transform:translateY(-1px)}
.sd-form-submit:disabled{background:#aaa;cursor:default;transform:none}

/* ── Sidebar Info ───────────────────────────── */
.sd-sidebar-card{background:var(--putih);border:1px solid var(--abu);margin-bottom:16px}
.sd-sidebar-head{
  background:var(--biru);color:var(--putih);
  padding:13px 18px;font-size:.78rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.sd-sidebar-head.kuning{background:var(--kuning);color:var(--biru)}
.sd-sidebar-body{padding:18px}
.sd-sidebar-list{display:flex;flex-direction:column;gap:14px}
.sd-sidebar-row{display:flex;flex-direction:column;gap:2px}
.sd-sidebar-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--teks-abu)}
.sd-sidebar-val{font-size:.85rem;color:var(--teks);line-height:1.5}
.sd-sidebar-val a{color:var(--biru);font-weight:600}
.sd-sidebar-val a:hover{color:var(--merah)}

/* Jam operasional tabel mini */
.sd-jam-table{width:100%;border-collapse:collapse;font-size:.82rem;margin-top:2px}
.sd-jam-table tr{border-bottom:1px solid var(--abu)}
.sd-jam-table tr:last-child{border-bottom:none}
.sd-jam-table td{padding:7px 0;vertical-align:top;color:var(--teks-abu)}
.sd-jam-table td:first-child{font-weight:600;color:var(--teks);width:52%}
.sd-jam-libur{color:var(--merah)!important;font-weight:600!important}

/* Sosmed links */
.sd-sosmed-list{display:flex;flex-direction:column;gap:10px;margin-top:2px}
.sd-sosmed-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border:1.5px solid var(--abu);
  text-decoration:none;color:var(--teks);
  transition:border-color .16s,background .16s;
  font-size:.83rem;font-weight:600;
}
.sd-sosmed-item:hover{background:#f7f7ff;border-color:var(--biru)}
.sd-sosmed-item i{font-size:1.2rem;flex-shrink:0}
.sd-sosmed-item.wa i{color:#25d366}
.sd-sosmed-item.ig i{color:#e1306c}
.sd-sosmed-item.yt i{color:#ff0000}
.sd-sosmed-item.fb i{color:#1877f2}
.sd-sosmed-sub{font-size:.7rem;font-weight:300;color:var(--teks-abu);margin-left:auto}

/* ── Peta Google Maps ───────────────────────── */
.sd-maps-wrap{
  width:100%;height:360px;overflow:hidden;border:1px solid var(--abu);
  margin-bottom:44px;
}
.sd-maps-wrap iframe{width:100%;height:100%;border:none;display:block;filter:grayscale(.25)}

/* ── Toast ──────────────────────────────────── */
.sd-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:var(--teks);color:var(--putih);
  padding:12px 28px;font-size:.85rem;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .3s;z-index:9999;
  min-width:240px;text-align:center;
}
.sd-toast.show{opacity:1}
.sd-toast.sukses{background:#27ae60}

/* Copy button kecil */
.sd-copy-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.7rem;font-weight:600;font-family:var(--font);
  padding:2px 8px;border:1px solid #d0d0d0;
  background:var(--putih);color:var(--teks-abu);cursor:pointer;
  transition:all .14s;vertical-align:middle;margin-left:6px;
}
.sd-copy-btn:hover{border-color:var(--biru);color:var(--biru)}

@media(max-width:900px){
  .sd-hubungi-wrap{grid-template-columns:1fr}
  .sd-kontak-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:540px){
  .sd-kontak-cards{grid-template-columns:1fr}
  .sd-form-grid{grid-template-columns:1fr}
}
</style>
@endpush

@section('content')

{{-- Page Hero --}}
<div class="sd-page-hero" style="background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.30),rgba(0,0,0,.05)), url('{{ (isset($heroImages['hubungi-kami']) ? $heroImages['hubungi-kami']->url : asset('images/buathubungi.jpeg')) }}');background-size:cover;background-position:center;">
  <div class="sd-page-hero-inner">
    <p class="sd-page-breadcrumb">
      <a href="{{ route('home') }}">Beranda</a> &nbsp;/&nbsp;
      <span>Hubungi Kami</span>
    </p>
    <h1 class="sd-page-title">Hubungi Kami</h1>
    <p class="sd-page-subtitle">Ada pertanyaan, saran, atau keperluan? Kami siap membantu Anda.</p>
    <div class="sd-page-accent"></div>
  </div>
</div>

<div class="sd-page-body">

  {{-- 4 Kontak Card Atas --}}
  <div class="sd-kontak-cards sd-reveal">

    <div class="sd-kontak-card">
      <i class="bi bi-whatsapp sd-kontak-card-icon"></i>
      <p class="sd-kontak-card-label">WhatsApp</p>
      <p class="sd-kontak-card-val">{{ $kontak->whatsapp ?? '0812-3456-7890' }}</p>
      <p class="sd-kontak-card-sub">Hubungi cepat untuk pertanyaan atau informasi.</p>
      <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', ltrim($kontak->whatsapp ?? '081234567890', '0')) }}?text=Halo%20SD%20Negeri%204%20Keling%2C%20saya%20ingin%20bertanya%20mengenai..." target="_blank" class="sd-kontak-card-btn">Chat WA</a>
    </div>

    <div class="sd-kontak-card">
      <i class="bi bi-instagram sd-kontak-card-icon"></i>
      <p class="sd-kontak-card-label">Instagram</p>
      <p class="sd-kontak-card-val">{{ $kontak->instagram_handle ?? '@sdn4keling' }}</p>
      <p class="sd-kontak-card-sub">Ikuti kegiatan dan update sekolah terbaru.</p>
      <a href="{{ $kontak->instagram_url ?? 'https://instagram.com/sdn4keling' }}" target="_blank" class="sd-kontak-card-btn">Kunjungi</a>
    </div>

    <div class="sd-kontak-card">
      <i class="bi bi-envelope-fill sd-kontak-card-icon"></i>
      <p class="sd-kontak-card-label">Email</p>
      <p class="sd-kontak-card-val">{{ $kontak->email ?? 'sdnegeri4keling@gmail.com' }}</p>
      <p class="sd-kontak-card-sub">Untuk keperluan surat-menyurat resmi.</p>
      <a href="mailto:{{ $kontak->email ?? 'sdnegeri4keling@gmail.com' }}" class="sd-kontak-card-btn">Kirim Email</a>
    </div>

    <div class="sd-kontak-card">
      <i class="bi bi-youtube sd-kontak-card-icon"></i>
      <p class="sd-kontak-card-label">YouTube</p>
      <p class="sd-kontak-card-val">{{ $kontak->youtube_label ?? 'SD Negeri 4 Keling' }}</p>
      <p class="sd-kontak-card-sub">Tonton dokumentasi kegiatan dan berita sekolah.</p>
      <a href="{{ $kontak->youtube_url ?? 'https://youtube.com/@sdn4keling' }}" target="_blank" class="sd-kontak-card-btn">Lihat</a>
    </div>

  </div>

  {{-- Form + Sidebar --}}
  <div class="sd-hubungi-wrap sd-reveal">

    {{-- Form Pesan --}}
    <div class="sd-form-card">
      <div class="sd-form-card-head">Kirim Pesan ke Sekolah</div>
      <div class="sd-form-card-body">
        <div class="sd-form-grid">

          <div class="sd-form-group">
            <label class="sd-form-label">Nama Lengkap <span>*</span></label>
            <input type="text" id="fNama" class="sd-form-input" placeholder="Nama Anda">
          </div>

          <div class="sd-form-group">
            <label class="sd-form-label">Nomor HP / WhatsApp <span>*</span></label>
            <input type="tel" id="fHp" class="sd-form-input" placeholder="08xxxxxxxxxx">
          </div>

          <div class="sd-form-group sd-form-full">
            <label class="sd-form-label">Email</label>
            <input type="email" id="fEmail" class="sd-form-input" placeholder="email@contoh.com (opsional)">
          </div>

          <div class="sd-form-group">
            <label class="sd-form-label">Hubungan dengan Sekolah <span>*</span></label>
            <select id="fHubungan" class="sd-form-select">
              <option value="">Pilih...</option>
              <option>Orang Tua / Wali Murid</option>
              <option>Siswa</option>
              <option>Alumni</option>
              <option>Masyarakat Umum</option>
              <option>Instansi / Lembaga</option>
              <option>Lainnya</option>
            </select>
          </div>

          <div class="sd-form-group">
            <label class="sd-form-label">Perihal <span>*</span></label>
            <select id="fPerihal" class="sd-form-select">
              <option value="">Pilih topik...</option>
              <option>Informasi Umum Sekolah</option>
              <option>Pendaftaran / PPDB</option>
              <option>Kegiatan Belajar Mengajar</option>
              <option>Fasilitas Sekolah</option>
              <option>Prestasi &amp; Ekstrakurikuler</option>
              <option>Administrasi &amp; Keuangan</option>
              <option>Saran &amp; Masukan</option>
              <option>Lainnya</option>
            </select>
          </div>

          <div class="sd-form-group sd-form-full">
            <label class="sd-form-label">Pesan <span>*</span></label>
            <textarea id="fPesan" class="sd-form-textarea" placeholder="Tulis pesan, pertanyaan, atau masukan Anda di sini..."></textarea>
          </div>

          <div class="sd-form-full">
            <button type="button" class="sd-form-submit" id="submitBtn" onclick="kirimPesan()">
              <i class="bi bi-send-fill"></i> Kirim Pesan
            </button>
          </div>

        </div>
      </div>
    </div>

    {{-- Sidebar Info --}}
    <div>
      {{-- Jam Operasional --}}
      <div class="sd-sidebar-card">
        <div class="sd-sidebar-head kuning">Jam Operasional</div>
        <div class="sd-sidebar-body">
          <table class="sd-jam-table">
            <tr><td>Senin – Kamis</td><td>{{ $kontak->jam_senin_kamis ?? '07.00 – 13.00 WIB' }}</td></tr>
            <tr><td>Jumat</td><td>{{ $kontak->jam_jumat ?? '07.00 – 11.00 WIB' }}</td></tr>
            <tr><td>Sabtu</td><td>{{ $kontak->jam_sabtu ?? '07.00 – 12.00 WIB' }}</td></tr>
            <tr><td class="sd-jam-libur">Minggu &amp; Libur</td><td class="sd-jam-libur">Tutup</td></tr>
          </table>
          <p style="font-size:.73rem;color:var(--teks-abu);margin-top:12px;line-height:1.6">
            Untuk keperluan mendesak di luar jam operasional, silakan hubungi via WhatsApp.
          </p>
        </div>
      </div>

    </div>
  </div>

  {{-- Peta --}}
  <h2 class="sd-inner-section-title sd-reveal">Lokasi Sekolah</h2>
  <div class="sd-maps-wrap sd-reveal">
    <iframe
      src="{{ $kontak->maps_embed_url ?? 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3962.5!2d110.75!3d-6.65!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zNsKwMzknMDAuMCJTIDExMMKwNDUnMDAuMCJF!5e0!3m2!1sid!2sid!4v1700000000000!5m2!1sid!2sid' }}"
      allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade">
    </iframe>
  </div>

</div>

<div class="sd-toast" id="toast"></div>

@endsection

@push('scripts')
<script>
function showToast(msg, tipe){
  var t = document.getElementById('toast');
  t.textContent = msg;
  t.className = 'sd-toast show' + (tipe ? ' '+tipe : '');
  setTimeout(function(){ t.className = 'sd-toast'; }, 2400);
}

function salin(teks){
  navigator.clipboard.writeText(teks).then(function(){
    showToast('Disalin: ' + teks);
  });
}

function kirimPesan(){
  var nama     = document.getElementById('fNama').value.trim();
  var hp       = document.getElementById('fHp').value.trim();
  var email    = document.getElementById('fEmail').value.trim();
  var hubungan = document.getElementById('fHubungan').value;
  var perihal  = document.getElementById('fPerihal').value;
  var pesan    = document.getElementById('fPesan').value.trim();

  if(!nama)     { showToast('Nama lengkap wajib diisi.'); return; }
  if(!hp)       { showToast('Nomor HP / WhatsApp wajib diisi.'); return; }
  if(!hubungan) { showToast('Pilih hubungan dengan sekolah.'); return; }
  if(!perihal)  { showToast('Pilih perihal pesan.'); return; }
  if(!pesan)    { showToast('Pesan tidak boleh kosong.'); return; }

  var btn = document.getElementById('submitBtn');
  btn.disabled = true;
  btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Mengirim...';

  fetch('{{ route("hubungi-kami.store") }}', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
    },
    body: JSON.stringify({ nama: nama, no_hp: hp, email: email, hubungan: hubungan, perihal: perihal, pesan: pesan }),
  })
  .then(function(res){ return res.json().then(function(data){ return {ok: res.ok, data: data}; }); })
  .then(function(result){
    if(result.ok){
      showToast(result.data.message || 'Pesan berhasil dikirim!', 'sukses');
      btn.innerHTML = '<i class="bi bi-check2-circle"></i> Pesan Terkirim';
      btn.style.background = '#27ae60';
      document.getElementById('fNama').value = '';
      document.getElementById('fHp').value = '';
      document.getElementById('fEmail').value = '';
      document.getElementById('fHubungan').value = '';
      document.getElementById('fPerihal').value = '';
      document.getElementById('fPesan').value = '';
      setTimeout(function(){
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-send-fill"></i> Kirim Pesan';
        btn.style.background = '';
      }, 2500);
    } else {
      showToast('Gagal mengirim pesan. Coba periksa kembali isian Anda.');
      btn.disabled = false;
      btn.innerHTML = '<i class="bi bi-send-fill"></i> Kirim Pesan';
    }
  })
  .catch(function(){
    showToast('Terjadi kesalahan jaringan. Coba lagi.');
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-send-fill"></i> Kirim Pesan';
  });
}
</script>
@endpush