@extends('layouts.admin')

@section('title', 'Dashboard Admin')
@section('page_title', 'Dashboard')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="/admin">Dashboard</a></li>
    <li class="breadcrumb-item active">Overview</li>
@endsection

@push('css')
<style>
  .small-box { border-radius: 1rem; }
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-lg-3 col-6">
        <div class="small-box bg-primary">
            <div class="inner">
                <h3>{{ $total }}</h3>
                <p>Total Pengaduan</p>
            </div>
            <div class="icon">
                <i class="ion ion-document-text"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-warning">
            <div class="inner">
                <h3>{{ $pending }}</h3>
                <p>Pending</p>
            </div>
            <div class="icon">
                <i class="ion ion-clock"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-info">
            <div class="inner">
                <h3>{{ $proses }}</h3>
                <p>Diproses</p>
            </div>
            <div class="icon">
                <i class="ion ion-load-c"></i>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-6">
        <div class="small-box bg-success">
            <div class="inner">
                <h3>{{ $selesai }}</h3>
                <p>Selesai</p>
            </div>
            <div class="icon">
                <i class="ion ion-checkmark-circled"></i>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Data Pengaduan</h3>
        <div class="card-tools">
            <div class="dropdown">
                <button class="btn btn-tool dropdown-toggle" data-toggle="dropdown">
                    <i class="fas fa-filter"></i> Kategori
                </button>
                <div class="dropdown-menu">
                    @php $categories = \App\Models\Category::orderBy('nama')->get(); @endphp
                    <a href="/admin" class="dropdown-item">Semua</a>
                    @foreach($categories as $cat)
                        <a href="/admin/kategori/{{ $cat->slug }}" class="dropdown-item">
                            <i class="fas {{ $cat->icon }} mr-2"></i> {{ $cat->nama }}
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    <div class="card-body table-responsive p-0">
        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>Nama</th>
                    <th>Tanggal</th>
                    <th>Kategori</th>
                    <th>Deskripsi</th>
                    <th>Lokasi</th>
                    <th>Gambar</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($complaints as $item)
                <tr>
                    <td>{{ $item->nama }}</td>
                    <td>{{ date('d-m-Y H:i', strtotime($item->created_at)) }}</td>
                    <td>
                        @php
                            $cat = $categories->firstWhere('slug', $item->kategori);
                        @endphp
                        @if($cat)
                            <i class="fas {{ $cat->icon }} text-primary mr-1"></i>
                        @endif
                        {{ $item->kategori }}
                    </td>
                    <td style="max-width:200px;white-space:normal">{{ $item->deskripsi }}</td>
                    <td>
                        @if($item->latitude && $item->longitude)
                            <a href="https://www.google.com/maps?q={{ $item->latitude }},{{ $item->longitude }}" target="_blank" class="btn btn-sm btn-primary">
                                <i class="fas fa-map-marker-alt"></i> Lihat
                            </a>
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    </td>
                    <td>
                        @if($item->gambar)
                            @php $ext = pathinfo($item->gambar, PATHINFO_EXTENSION); @endphp
                            @if(in_array(strtolower($ext), ['jpg','jpeg','png','gif','webp','svg']))
                                <a href="{{ asset('storage/'.$item->gambar) }}" target="_blank">
                                    <img src="{{ asset('storage/'.$item->gambar) }}" width="60" class="rounded">
                                </a>
                            @else
                                <a href="{{ asset('storage/'.$item->gambar) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                                    <i class="fas fa-download"></i>
                                </a>
                            @endif
                        @else
                            <span class="text-muted">-</span>
                        @endif
                    </td>
                    <td>
                        <span class="badge badge-{{ $item->status == 'pending' ? 'warning' : ($item->status == 'proses' ? 'info' : ($item->status == 'selesai' ? 'success' : 'danger')) }}">
                            {{ $item->status == 'tolak' ? 'Ditolak' : ucfirst($item->status) }}
                        </span>
                    </td>
                    <td>
                        <a href="/admin/pengaduan/{{ $item->id }}" class="btn btn-sm btn-info" title="Detail">
                            <i class="fas fa-eye"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="text-center text-muted py-4">Belum ada pengaduan</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('js')
<script>
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
</script>
@endpush