@extends('layouts.app')

@section('title', 'Manajemen Pelanggan')

@section('content')
    <div class="container mx-auto py-4">

        <!-- Header -->
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold">Manajemen Pelanggan</h3>
        </div>

        <!-- Flash Message -->
        @if (session('success'))
            <div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
                {{ session('success') }}
            </div>
            <script>
                setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
            </script>
        @endif

        <!-- Tabel Pelanggan -->
        <div class="bg-white rounded-lg shadow-sm">
            <div class="p-4 overflow-x-auto">
                <table class="w-full text-left border-collapse border border-gray-300">
                    <thead class="bg-gray-100">
                        <tr>
                            <th class="p-2 border border-gray-300 text-center w-16">Nomor</th>
                            <th class="p-2 border border-gray-300 text-center">Nama</th>
                            <th class="p-2 border border-gray-300 text-center">Nama template</th>
                            <th class="p-2 border border-gray-300 text-center">Kategori</th>
                            <th class="p-2 border border-gray-300 text-center">Email</th>
                            <th class="p-2 border border-gray-300 text-center">No. Telepon</th>
                            <th class="p-2 border border-gray-300 text-center">Harga</th>
                            <th class="p-2 border border-gray-300 text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($pelanggans as $key => $pelanggan)
                            <tr>
                                <td class="p-2 py-4 border border-gray-300 text-center">{{ $key + 1 }}</td>
                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_pemesan }}</td>
                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->nama_template }}</td>
                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->kategori ?? '-' }}</td>
                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->email }}</td>
                                <td class="p-2 py-4 border border-gray-300 truncate">{{ $pelanggan->no_tlpn ?? '-' }}</td>
                                <td class="py-3 px-2 border border-gray-300 text-center">
                                    Rp {{ number_format($pelanggan->harga, 0, ',', '.') }}
                                </td>
                                <td class="p-2 border border-gray-300 text-center">
                                    <div class="flex justify-center space-x-2">
                                        <a href="{{ route('admin.pelanggan.show', $pelanggan->id) }}"
                                            class="text-blue-600 hover:underline flex items-center">
                                            <i class="bi bi-eye mr-1"></i> Detail
                                        </a>
                                        <button class="text-red-600 hover:underline flex items-center openDeleteModalBtn"
                                            data-id="{{ $pelanggan->id }}">
                                            <i class="bi bi-trash mr-1"></i> Hapus
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="p-2 text-center text-gray-500 border border-gray-300">
                                    Belum ada pelanggan
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal Hapus Pelanggan -->
    @foreach ($pelanggans as $pelanggan)
        <div id="modalDelete{{ $pelanggan->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
            <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $pelanggan->id }}"></div>
            <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
                <div class="p-4 border-b">
                    <h5 class="text-lg font-medium">Hapus Pelanggan</h5>
                </div>
                <div class="p-4">
                    <p>Apakah Anda yakin ingin menghapus pelanggan <strong>{{ $pelanggan->nama }}</strong>?</p>
                </div>
                <div class="p-4 border-t flex justify-end space-x-2">
                    <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
                        data-id="{{ $pelanggan->id }}">Batal</button>
                    <form action="{{ route('admin.pelanggan.destroy', $pelanggan->id) }}" method="POST" class="inline">
                        @csrf
                        @method('DELETE')
                        <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
                    </form>
                </div>
            </div>
        </div>
    @endforeach

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
            const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
            const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');

            openDeleteBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = btn.dataset.id;
                    const modal = document.getElementById('modalDelete' + id);
                    if (modal) {
                        modal.classList.remove('hidden');
                        modal.classList.add('flex');
                    }
                });
            });

            closeDeleteBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    const id = btn.dataset.id;
                    const modal = document.getElementById('modalDelete' + id);
                    if (modal) {
                        modal.classList.add('hidden');
                        modal.classList.remove('flex');
                    }
                });
            });

            closeDeleteOverlays.forEach(overlay => {
                overlay.addEventListener('click', () => {
                    const id = overlay.dataset.id;
                    const modal = document.getElementById('modalDelete' + id);
                    if (modal) {
                        modal.classList.add('hidden');
                        modal.classList.remove('flex');
                    }
                });
            });
        });
    </script>
@endsection