@extends('admin.layout')

@section('content')
<style>
.fade-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.fade-section.show {
  opacity: 1;
  transform: translateY(0);
}
#editModal.show .transform {
  transform: scale(1);
  opacity: 1;
}
#editModal .transform {
  transform: scale(0.9);
  opacity: 0;
  transition: all .25s ease-out;
}
</style>

<div class="p-6 fade-section">
  <div class="flex items-center gap-3 mb-6">
   <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
  <defs>
    <linearGradient id="gradBlue" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="#1e3a8a"/> <!-- biru tua -->
      <stop offset="100%" stop-color="#3b82f6"/> <!-- biru muda -->
    </linearGradient>
  </defs>

  <path fill="url(#gradBlue)" d="M4 10v9h5.59c-.38-.93-.59-1.94-.59-3c0-3.39 2.11-6.27 5.08-7.44L10 5.5L4 10z" opacity=".3"/>
  <path fill="url(#gradBlue)" d="M4 19v-9l6-4.5l4.08 3.06c.81-.32 1.69-.51 2.61-.54L10 3L2 9v12h8.76c-.48-.6-.88-1.27-1.17-2H4zm13-4.25c-.69 0-1.25.56-1.25 1.25c0 .4.2.75.5.97V22h1.5v-5.03c.3-.23.5-.57.5-.97c0-.69-.56-1.25-1.25-1.25z"/>
  <path fill="url(#gradBlue)" d="M17 12c-2.21 0-4 1.79-4 4c0 1.1.45 2.1 1.17 2.83l1.06-1.06A2.5 2.5 0 1 1 19.5 16c0 .69-.28 1.31-.73 1.76l1.06 1.06C20.55 18.1 21 17.1 21 16c0-2.21-1.79-4-4-4z"/>
  <path fill="url(#gradBlue)" d="M17 9.5a6.5 6.5 0 0 0-6.5 6.5c0 1.79.73 3.42 1.9 4.6l1.06-1.06C12.56 18.63 12 17.38 12 16c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.37-.56 2.62-1.46 3.52l1.07 1.06A6.5 6.5 0 0 0 17 9.5z"/>
</svg>

    <h2 class="text-2xl font-bold text-gray-800">Kelola Broadcast</h2>
  </div>

  {{-- 📨 Form Tambah Broadcast --}}
  <form method="POST" action="{{ route('admin.broadcasts.store') }}" class="bg-white p-5 rounded-xl shadow fade-section">
    @csrf
    <div class="mb-4">
      <label class="font-semibold flex items-center gap-2 text-gray-700">
         <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path fill="#ffdda1" d="M17.05 4.208a.917.917 0 0 1 .917.917v16.5a.916.916 0 0 1-.916.917H2.384a.917.917 0 0 1-.917-.917v-16.5a.917.917 0 0 1 .917-.917z"/><path fill="#ffbc44" d="m17.968 14.036l-2.626 1.224l-1.958 2.701l3.329.237l1.255-.586zM14.75 6.958a.917.917 0 0 1-.917.917h-8.25a.917.917 0 0 1-.917-.917v-2.75H14.75z"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M17.967 18.417v3.208a.916.916 0 0 1-.916.917H2.384a.917.917 0 0 1-.917-.917v-16.5a.917.917 0 0 1 .917-.917h2.75m9.166 0h2.75a.917.917 0 0 1 .917.917v3.208"/><path fill="#e4f1f5" d="M11.015 3.292h2.37a.916.916 0 0 1 .916.916v.917a.916.916 0 0 1-.917.917H6.051a.917.917 0 0 1-.917-.917v-.917a.917.917 0 0 1 .917-.916h2.374"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M11.015 3.292h2.37a.916.916 0 0 1 .916.916v.917a.916.916 0 0 1-.917.917H6.051a.917.917 0 0 1-.917-.917v-.917a.917.917 0 0 1 .917-.916h2.374"/><path fill="#98b7c0" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M9.717 4.208a1.375 1.375 0 1 0 0-2.75a1.375 1.375 0 0 0 0 2.75"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M4.217 9.708h11m-11 3.667h8.677m-8.677 3.667h7.318"/><path fill="#66e1ff" stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="m16.593 17.042l-3.209.916l.917-3.208l5.483-5.484a1.62 1.62 0 0 1 2.292 2.292z"/></g></svg>
        Judul Broadcast
      </label>
      <input type="text" name="title" class="w-full border border-gray-300 rounded-lg p-2 mt-1 focus:ring focus:ring-blue-200 focus:outline-none" placeholder="Masukkan judul broadcast" required>
    </div>

    <div class="mb-4">
      <label class="font-semibold flex items-center gap-2 text-gray-700">
        <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path fill="#e3e3e3" d="M16.224 1H2.02a.947.947 0 0 0-.947.947v14.975c0 .523.424.947.947.947h14.204a.947.947 0 0 0 .947-.947V1.947A.947.947 0 0 0 16.224 1"/><path fill="#fff" d="M16.337 1.227c-.014 0-.025-.007-.04-.007H2.093a.947.947 0 0 0-.947.947v14.252z"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M11.09 18.265H2.092a.947.947 0 0 1-.947-.947V2.167c0-.523.424-.947.947-.947h14.205c.523 0 .947.424.947.947v9.47"/><path fill="#ffef5e" d="m18.646 13.076l-5.947 5.947l2.84 2.842l5.948-5.947z"/><path fill="#ffbc44" d="m12.699 19.023l2.84 2.84L11.564 23z"/><path fill="#ff808c" d="m22.339 15.064l-.853.853l-2.84-2.841l.852-.853c1.093-1.093 2.96-.593 3.36.901a2.01 2.01 0 0 1-.52 1.94"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M6.354 5.008h6.63M4.46 7.849h8.523M4.46 10.69h8.523M4.46 13.53h6.156m8.03-.454l-5.947 5.947l2.84 2.842l5.948-5.947z"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="m12.699 19.023l2.84 2.84L11.564 23zm9.64-3.959l-.853.853l-2.84-2.841l.852-.853c1.093-1.093 2.96-.593 3.36.901a2.01 2.01 0 0 1-.52 1.94"/></g></svg>
        Isi Broadcast
      </label>
      <textarea name="message" rows="5" class="w-full border border-gray-300 rounded-lg p-2 mt-1 focus:ring focus:ring-blue-200 focus:outline-none" placeholder="Masukkan isi pesan yang akan dikirim ke semua user" required></textarea>
    </div>

    <button type="submit" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition">
      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><g fill="none"><path fill="#d7e0ff" d="m5.808 11l2.178 2.169a1.1 1.1 0 0 0 1.049.3a1.12 1.12 0 0 0 .809-.74l3.577-10.72A1.12 1.12 0 0 0 11.982.57L1.262 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1L3.56 8.742l-.09 3.466z"/><path stroke="#4147d5" stroke-linecap="round" stroke-linejoin="round" d="m5.808 11l2.178 2.169a1.1 1.1 0 0 0 1.049.3a1.12 1.12 0 0 0 .809-.74l3.577-10.72A1.12 1.12 0 0 0 11.982.57L1.262 4.147a1.12 1.12 0 0 0-.74.859a1.1 1.1 0 0 0 .3 1L3.56 8.742l-.09 3.466zM13.101.79L3.56 8.743"/></g></svg>
      Kirim Broadcast
    </button>
  </form>

  {{-- 📋 Tabel Broadcast --}}
  <div class="bg-white p-5 rounded-xl shadow mt-8 fade-section">
    <h3 class="font-semibold text-gray-700 flex items-center gap-2 mb-3">
            <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none"><path fill="url(#SVGRCeZy53p)" d="M8 21h11a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H8l-.5 2.5zm0-6.5h11a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H8L7.5 12zM8 8h11a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2H8l-.5 2.5z"/><path fill="url(#SVGSvIV8cVP)" d="M8 9.5v5H5a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2zM8 3v5H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm0 13v5H5a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2z"/><defs><linearGradient id="SVGRCeZy53p" x1="5.475" x2="20.939" y1=".429" y2="19.98" gradientUnits="userSpaceOnUse"><stop stop-color="#36DFF1"/><stop offset="1" stop-color="#0094F0"/></linearGradient><linearGradient id="SVGSvIV8cVP" x1="4.189" x2="11.747" y1="5.393" y2="8.745" gradientUnits="userSpaceOnUse"><stop offset=".125" stop-color="#9C6CFE"/><stop offset="1" stop-color="#7A41DC"/></linearGradient></defs></g></svg>
      Daftar Broadcast
    </h3>

    <table class="w-full border-collapse">
      <thead>
        <tr class="bg-gray-100 text-left text-gray-600">
          <th class="p-2 border">Judul</th>
          <th class="p-2 border">Tanggal</th>
          <th class="p-2 border w-40 text-center">Aksi</th>
        </tr>
      </thead>
      <tbody>
        @foreach($broadcasts as $b)
        <tr class="border-b hover:bg-gray-50 transition">
          <td class="p-2 text-gray-800 flex items-center gap-2">
            <svg width="15" height="15" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#2196f3" d="M2 6l10 7L22 6v12H2z"/></svg>
            {{ $b->title }}
          </td>
          <td class="p-2 text-sm text-gray-500">{{ $b->created_at->format('d M Y, H:i') }}</td>
          <td class="p-2 text-center flex justify-center gap-2">
            <button type="button"
              class="flex items-center gap-1 bg-blue-600 hover:bg-blue-700 text-white font-medium px-3 py-1.5 rounded-lg text-sm shadow-sm transition"
              onclick="editBroadcast({{ $b->id }})">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width='1em' height='1em'>
                <path fill="currentColor" d="M13.8 2.2a2.51 2.51 0 0 0-3.54 0l-6.9 6.91l-1.76 3.62a1.26 1.26 0 0 0 1.12 1.8a1.2 1.2 0 0 0 .55-.13l3.62-1.76l6-6l.83-.82l.06-.06a2.52 2.52 0 0 0 .02-3.56m-.89.89a1.25 1.25 0 0 1 0 1.77l-1.77-1.77a1.24 1.24 0 0 1 .86-.37a1.22 1.22 0 0 1 .91.37M2.73 13.27L4.29 10L6 11.71zm4.16-2.4L5.13 9.11L10.26 4L12 5.74z"/>
              </svg>
            </button>
            <form method="POST" action="{{ route('admin.broadcasts.destroy', $b->id) }}">
              @csrf @method('DELETE')
              <button class="flex items-center gap-1 bg-red-600 hover:bg-red-700 text-white font-medium px-3 py-1.5 rounded-lg text-sm shadow-sm transition">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M6 7h12M9 7V4h6v3m2 0v13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V7z" />
                </svg>
              </button>
            </form>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

{{-- ✏️ Modal Edit Broadcast --}}
<div id="editModal"
     class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity">
  <div class="bg-white rounded-xl shadow-2xl w-[90%] max-w-md p-6 relative transform scale-95 transition-all duration-300">
    <button onclick="closeModal()" class="absolute top-3 right-3 text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
    <h3 class="text-lg font-semibold text-gray-700 mb-4 flex items-center gap-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24"
           stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
           d="M15.232 5.232l3.536 3.536M9 11l3 3L20.485 5.515a2.121 2.121 0 0 0-3-3L9 11zM9 11l-3 3v3h3l3-3"/></svg>
      Edit Broadcast
    </h3>

    <form id="editForm" method="POST">
      @csrf @method('PUT')
      <div class="mb-3">
        <label class="font-semibold text-gray-700 text-sm">Judul</label>
        <input type="text" name="title" id="editTitle"
               class="w-full border border-gray-300 rounded-lg p-2 mt-1 text-sm focus:ring focus:ring-blue-200"
               required>
      </div>

      <div class="mb-3">
        <label class="font-semibold text-gray-700 text-sm">Isi Pesan</label>
        <textarea name="message" id="editMessage" rows="4"
                  class="w-full border border-gray-300 rounded-lg p-2 mt-1 text-sm focus:ring focus:ring-blue-200"
                  required></textarea>
      </div>

      <button type="submit"
              class="bg-blue-600 hover:bg-blue-700 text-white font-medium text-sm px-4 py-2 rounded-lg transition">
        Simpan Perubahan
      </button>
    </form>
  </div>
</div>

<script>
function editBroadcast(id) {
  fetch(`/admin/broadcasts/${id}/edit`)
    .then(res => res.json())
    .then(data => {
      document.getElementById('editTitle').value = data.title;
      document.getElementById('editMessage').value = data.message;
      document.getElementById('editForm').action = `/admin/broadcasts/${id}`;
      const modal = document.getElementById('editModal');
      modal.classList.remove('hidden');
      setTimeout(() => modal.classList.add('show'), 10);
    });
}

function closeModal() {
  const modal = document.getElementById('editModal');
  modal.classList.remove('show');
  setTimeout(() => modal.classList.add('hidden'), 200);
}

const fadeEls = document.querySelectorAll('.fade-section');
const observer = new IntersectionObserver(entries => {
  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('show'); });
}, { threshold: 0.15 });
fadeEls.forEach(el => observer.observe(el));
</script>
@endsection
