@extends('admin.layout')

@section('content')

<style>
/* Animasi Fade */
.fade-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease-out, transform .7s ease-out;
}
.fade-section.show {
  opacity: 1;
  transform: translateY(0);
}

/* Modal Anim (kalau nanti pakai modal) */
#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">
        {{-- ICON GRADIENT BIRU --}}
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24">
          <defs>
            <linearGradient id="gradBlue" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stop-color="#1e3a8a"/>
              <stop offset="100%" stop-color="#3b82f6"/>
            </linearGradient>
          </defs>
          <path fill="url(#gradBlue)" d="M2 4h20v16H2z" opacity=".2"/>
          <path fill="url(#gradBlue)" d="m3 5l9 7l9-7v2l-9 7l-9-7z"/>
          <path fill="url(#gradBlue)" d="M3 19h18v-9l-9 7l-9-7z"/>
        </svg>

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

    @if(session('success'))
        <div class="p-3 bg-green-100 border border-green-300 text-green-700 rounded mb-4 fade-section">
            {{ session('success') }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.emailbroadcast.send') }}" enctype="multipart/form-data" 
          class="bg-white p-5 rounded-xl shadow fade-section">
        @csrf

        {{-- JUDUL --}}
        <div class="mb-4">
            <label class="font-semibold flex items-center gap-2 text-gray-700">
                {{-- ICON NOTEBOOK --}}
                <svg width="20" height="20" viewBox="0 0 24 24">
                    <path fill="#3b82f6" d="M4 3h13a2 2 0 0 1 2 2v16H6a2 2 0 0 1-2-2V3z" opacity=".3"/>
                    <path fill="#1e3a8a" d="M6 3h12a1 1 0 0 1 1 1v15H6a1 1 0 0 1-1-1V3z"/>
                    <path fill="#3b82f6" d="M8 7h8v2H8zm0 4h5v2H8z"/>
                </svg>
                Judul Email
            </label>
            <input type="text" name="title" class="w-full border p-2 rounded-lg mt-1 focus:ring focus:ring-blue-200" required>
        </div>

        {{-- ISI --}}
        <div class="mb-4">
            <label class="font-semibold flex items-center gap-2 text-gray-700">
                {{-- ICON TEXT --}}
                <svg width="20" height="20" viewBox="0 0 24 24">
                    <path fill="#1e3a8a" d="M4 5h16v2H4zm0 4h10v2H4zm0 4h14v2H4zm0 4h8v2H4z"/>
                </svg>
                Isi Email
            </label>
            <textarea name="content" rows="6" class="w-full border p-2 rounded-lg mt-1 focus:ring focus:ring-blue-200" required></textarea>
        </div>

        {{-- GAMBAR --}}
        <div class="mb-4">
            <label class="font-semibold flex items-center gap-2 text-gray-700">
                {{-- ICON IMAGE --}}
                <svg width="20" height="20" viewBox="0 0 24 24">
                    <path fill="#3b82f6" d="M3 5h18v14H3z" opacity=".3"/>
                    <path fill="#1e3a8a" d="M3 5h18v10l-5-4l-4 3l-3-2l-6 5z"/>
                </svg>
                Gambar (Opsional)
            </label>
            <input type="file" name="image" accept="image/*" class="w-full border p-2 rounded-lg mt-1">
        </div>

        <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg shadow-md transition-all">
            Kirim Broadcast
        </button>

    </form>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".fade-section").forEach(el => el.classList.add("show"));
});
</script>

@endsection
