@extends('layouts.admin')

@section('title', 'Data Paket')

@section('content')

<div class="flex justify-between mb-6">
    <h1 class="text-2xl font-bold">Data Paket</h1>
    <button onclick="openModal()" class="bg-blue-600 text-white px-4 py-2 rounded">
        + Tambah Paket
    </button>
</div>

<!-- TABLE -->
<table class="w-full bg-white shadow rounded">
    <thead class="bg-gray-100">
        <tr>
            <th class="p-3">Nama</th>
            <th class="p-3">Gambar</th>
            <th class="p-3">Harga</th>
            <th class="p-3">Deskripsi</th>
            <th class="p-3">Aksi</th>
        </tr>
    </thead>

    <tbody id="tableBody">
        @foreach($paket as $p)
        <tr id="row-{{ $p->id }}">
            <td class="p-3">{{ $p->nama }}</td>
            <td class="p-3">
                @if($p->gambar)
                    <img src="{{ asset('storage/'.$p->gambar) }}" class="w-16 h-16 rounded">
                @else
                    -
                @endif
            </td>
            <td class="p-3">Rp {{ number_format($p->harga,0,',','.') }}</td>
            <td class="p-3">{{ $p->deskripsi }}</td>
            <td class="p-3">
                <button onclick="hapus('{{ $p->id }}')" class="text-red-500">Hapus</button>
            </td>
        </tr>
        @endforeach
    </tbody>
</table>

<!-- MODAL -->
<div id="modal" class="fixed inset-0 bg-black/50 hidden flex items-center justify-center">
    <div id="modalBox" class="bg-white p-6 rounded scale-95 opacity-0 transition">

        <h2 class="text-lg font-bold mb-4">Tambah Paket</h2>

        <form id="paketForm" enctype="multipart/form-data">
            @csrf

            <input type="text" name="nama" placeholder="Nama" class="w-full border p-2 mb-2" required>
            <input type="number" name="harga" placeholder="Harga" class="w-full border p-2 mb-2" required>
            <textarea name="deskripsi" placeholder="Deskripsi" class="w-full border p-2 mb-2"></textarea>

            <input type="file" name="gambar" class="w-full mb-3">

            <button class="bg-green-500 text-white px-4 py-2 w-full">Simpan</button>
        </form>

        <button onclick="closeModal()" class="mt-2 text-gray-500">Batal</button>
    </div>
</div>

<!-- TOAST -->
<div id="toast" class="fixed top-5 right-5 bg-green-500 text-white px-4 py-2 hidden">
    Berhasil disimpan
</div>

<script>

// 🔥 INIT
const paketForm = document.getElementById('paketForm');
const modal = document.getElementById('modal');
const modalBox = document.getElementById('modalBox');
const tableBody = document.getElementById('tableBody');
const toast = document.getElementById('toast');

// OPEN MODAL
function openModal() {
    modal.classList.remove('hidden');
    setTimeout(() => {
        modalBox.classList.remove('scale-95','opacity-0');
    }, 50);
}

// CLOSE MODAL
function closeModal() {
    modalBox.classList.add('scale-95','opacity-0');
    setTimeout(() => {
        modal.classList.add('hidden');
    }, 200);
}

// TOAST
function showToast() {
    toast.classList.remove('hidden');
    setTimeout(() => toast.classList.add('hidden'), 2000);
}

// SUBMIT
paketForm.addEventListener('submit', function(e){
    e.preventDefault();

    let formData = new FormData(this);

    fetch("{{ route('admin.paket.store') }}", {
        method: "POST",
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {

        console.log(data); // DEBUG

        showToast();
        closeModal();

        let gambar = data.gambar
            ? `<img src="/storage/${data.gambar}" class="w-16 h-16 rounded">`
            : '-';

        let row = `
        <tr id="row-${data.id}">
            <td class="p-3">${data.nama}</td>
            <td class="p-3">${gambar}</td>
            <td class="p-3">Rp ${new Intl.NumberFormat('id-ID').format(data.harga)}</td>
            <td class="p-3">${data.deskripsi ?? ''}</td>
            <td class="p-3">
                <button onclick="hapus('${data.id}')" class="text-red-500">Hapus</button>
            </td>
        </tr>`;

        tableBody.insertAdjacentHTML('beforeend', row);

        paketForm.reset();
    });
});

// DELETE
function hapus(id) {
    if(confirm('Yakin hapus?')) {
        fetch(`/rahasia-saja/paket/${id}`, {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
        }).then(() => {
            document.getElementById('row-'+id).remove();
        });
    }
}

</script>

@endsection