@extends('layouts.app')

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

@section('content')
<div class="container mx-auto py-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">Daftar Template</h2>
    </div>

    <!-- Flash Message -->
    @if(session('success'))
        <div class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
            {{ session('success') }}
        </div>
    @endif

    <!-- Tabel -->
    <div class="bg-white rounded-lg shadow overflow-x-auto">
        <table class="w-full border border-gray-200 text-left border-collapse">
            <thead class="bg-gray-100">
                <tr>
                    <th class="px-3 py-2 border border-gray-200 w-[50px] text-center">No.</th>
                    <th class="px-3 py-2 border border-gray-200">Gambar</th>
                    <th class="px-3 py-2 border border-gray-200">Nama</th>
                    <th class="px-3 py-2 border border-gray-200">Kategori</th>
                    <th class="px-3 py-2 border border-gray-200">Paket</th>
                    <th class="px-3 py-2 border border-gray-200">Harga</th>
                    <th class="px-3 py-2 border border-gray-200 text-center w-[120px]">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($templates as $index => $t)
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 border border-gray-200 text-center">{{ $index + 1 }}</td>
                        
                        <!-- Kolom gambar -->
                        <td class="px-3 py-2 border border-gray-200 text-center">
                            @if($t->foto)
                                <img src="{{ asset('storage/' . $t->foto) }}" 
                                     alt="{{ $t->nama_template }}" 
                                     class="w-16 h-16 object-cover rounded">
                            @else
                                <span class="text-gray-400">-</span>
                            @endif
                        </td>

                        <td class="px-3 py-2 border border-gray-200">{{ $t->nama_template }}</td>
                        <td class="px-3 py-2 border border-gray-200">{{ $t->kategori->nama ?? '-' }}</td>
                        <td class="px-3 py-2 border border-gray-200">{{ ucfirst($t->paket) }}</td>
                        <td class="px-3 py-2 border border-gray-200">Rp {{ number_format($t->harga,0,',','.') }}</td>
                        <td class="px-3 py-2 border border-gray-200 text-center">
                            <div class="flex justify-center gap-2">
                                <a href="{{ route('admin.template.edit', $t->id) }}"
                                   class="px-3 py-1 rounded bg-yellow-500 text-white text-sm hover:bg-yellow-600 flex items-center">
                                    <i class="bi bi-pencil mr-1"></i> Edit
                                </a>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7"
                            class="px-3 py-4 text-center text-gray-500 border border-gray-200">
                            Belum ada template.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection