@extends('dashboard')

@section('title', 'Photos')

@section('content')
<div class="p-6 bg-white rounded-lg shadow">
  <h2 class="mb-4 text-xl font-semibold">Foto Real-time</h2>

  <div id="foto-container" class="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Foto cards akan dimuat lewat JS -->
  </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  function fetchFotoData() {
    axios.get('{{ route('api.foto.index') }}')
      .then(function (response) {
        const data = response.data;
        const container = document.getElementById('foto-container');
        container.innerHTML = '';

        data.forEach((item) => {
          const card = `
            <div class="overflow-hidden transition duration-300 bg-white shadow-md rounded-xl hover:shadow-lg">
              <img src="/storage/${item.foto}" alt="Foto" class="object-cover w-full h-48">
              <div class="p-4">
                <p class="text-sm text-gray-500">${new Date(item.created_at).toLocaleString()}</p>
              </div>
            </div>
          `;
          container.insertAdjacentHTML('beforeend', card);
        });
      })
      .catch(function (error) {
        console.error('Gagal memuat data:', error);
      });
  }

  // Muat data pertama kali
  fetchFotoData();

  // Update setiap 5 detik
  setInterval(fetchFotoData, 5000);
</script>
@endpush