@extends('layouts.app')

@section('title', 'Halaman Dasbor')

@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">Halaman Dasbor</h3>
        <div class="flex items-center gap-3">
            <div class="bg-blue-100 text-blue-600 px-3 py-2 rounded-lg flex items-center gap-2 text-sm">
                <i class="bi bi-clock-history"></i>
                {{ $today }}
            </div>
        </div>
    </div>

    <!-- Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2">
            <div>
                <h5 class="text-gray-500 text-sm">Kategori</h5>
                <h3 class="font-bold text-xl">{{ $totalKategori }}</h3>
            </div>
            <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
                <i class="bi bi-diagram-3"></i>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2">
            <div>
                <h5 class="text-gray-500 text-sm">Template</h5>
                <h3 class="font-bold text-xl">{{ $totalTemplate }}</h3>
            </div>
            <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
                <i class="bi bi-card-list"></i>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow-md p-4 flex justify-between items-center hover:shadow-lg transition-transform duration-300 transform hover:-translate-y-2">
            <div>
                <h5 class="text-gray-500 text-sm">Pelanggan</h5>
                <h3 class="font-bold text-xl">{{ $totalPelanggan }}</h3>
            </div>
            <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center text-xl">
                <i class="bi bi-person"></i>
            </div>
        </div>
    </div>

<!-- Recent Pelanggan -->
<div class="bg-white rounded-lg shadow-sm mt-6">
    <div class="p-4 overflow-x-auto">
        <h4 class="text-lg font-bold mb-3">Pelanggan Terbaru</h4>
        <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">No</th>
                    <th class="p-2 border border-gray-300 text-center">Nama</th>
                    <th class="p-2 border border-gray-300 text-center">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($recentPelanggan as $index => $pelanggan)
                    <tr>
                        <td class="p-2 py-4 border border-gray-300 text-center">{{ $index + 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="8" class="p-2 text-center text-gray-500 border border-gray-300">
                            Belum ada data pelanggan.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<!-- Modal Hapus Pelanggan -->
@foreach ($recentPelanggan 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_pemesan }}</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