@extends('layouts.app')

@section('content')
<div class="card">
    <div class="card-header bg-white d-flex justify-content-between align-items-center py-3">
        <h5 class="mb-0 fw-bold text-dark"><i class="fa-solid fa-triangle-exclamation text-danger me-2"></i> Daftar Laporan Kerusakan</h5>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="px-4 py-3">Tanggal</th>
                        <th class="py-3">Lokasi</th>
                        <th class="py-3">Pelapor</th>
                        <th class="py-3" style="min-width: 250px;">Deskripsi Kerusakan</th>
                        <th class="py-3 text-center">Foto</th>
                        <th class="py-3 text-center">Status</th>
                        <th class="px-4 py-3 text-end">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($complaints as $complaint)
                    <tr>
                        <td class="px-4 text-nowrap">
                            <span class="d-block fw-semibold">{{ \Carbon\Carbon::parse($complaint->created_at)->format('d M Y') }}</span>
                            <span class="text-muted small">{{ \Carbon\Carbon::parse($complaint->created_at)->format('H:i') }}</span>
                        </td>
                        <td class="fw-medium">{{ $complaint->location->name }}</td>
                        <td>{{ $complaint->user->name }}</td>
                        <td>
                            <p class="mb-0 text-wrap" style="max-width: 300px;">{{ $complaint->description }}</p>
                        </td>
                        <td class="text-center">
                            <a href="{{ url('file/' . $complaint->photo_path) }}" target="_blank">
                                <img src="{{ url('file/' . $complaint->photo_path) }}" alt="Foto" class="rounded" style="width: 60px; height: 60px; object-fit: cover; border: 1px solid #ddd;">
                            </a>
                        </td>
                        <td class="text-center">
                            @if($complaint->status === 'pending')
                                <span class="badge bg-warning text-dark px-3 py-2 rounded-pill">Menunggu</span>
                            @else
                                <span class="badge bg-success px-3 py-2 rounded-pill">Selesai</span>
                            @endif
                        </td>
                        <td class="px-4 text-end">
                            <form action="{{ route('admin.complaints.updateStatus', $complaint->id) }}" method="POST" class="d-inline">
                                @csrf
                                @method('PUT')
                                @if($complaint->status === 'pending')
                                    <input type="hidden" name="status" value="resolved">
                                    <button type="submit" class="btn btn-sm btn-outline-success rounded-pill" title="Tandai Selesai" onclick="return confirm('Tandai laporan ini sebagai selesai diperbaiki?')">
                                        <i class="fa-solid fa-check"></i> Selesai
                                    </button>
                                @else
                                    <input type="hidden" name="status" value="pending">
                                    <button type="submit" class="btn btn-sm btn-outline-warning rounded-pill" title="Batalkan" onclick="return confirm('Batalkan status selesai?')">
                                        <i class="fa-solid fa-rotate-left"></i> Batal
                                    </button>
                                @endif
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <i class="fa-solid fa-box-open fs-1 text-light mb-3"></i>
                            <p class="mb-0">Belum ada laporan kerusakan masuk.</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection