@extends('layouts.app')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/adminHeader.css') }}">
<link rel="stylesheet" href="{{ asset('css/dashboardAdmin.css') }}">
@endpush

@section('content')
<div class="container-fluid">
    <div class="admin-header-box mb-4">
        <div>
            <h4>Dashboard</h4>
            <p>Selamat Datang, <strong>{{ auth()->user()->name }}</strong></p>
        </div>
    </div>

    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="card dashboard-card bg-gradient-primary h-100">
                <div class="card-body text-white p-4">
                    <h6 class="text-white-50 mb-3 fw-normal">Jumlah borang</h6>
                    <h1 class="display-stat mb-0">{{ $totalSurveys }}</h1>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card dashboard-card bg-gradient-success h-100">
                <div class="card-body text-white p-4">
                    <h6 class="text-white-50 mb-3 fw-normal">Jumlah respons</h6>
                    <h1 class="display-stat mb-0">{{ $totalResponses }}</h1>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card dashboard-card bg-gradient-danger h-100">
                <div class="card-body text-white p-4">
                    <h6 class="text-white-50 mb-3 fw-normal">Jumlah pengguna</h6>
                    <h1 class="display-stat mb-0">{{ $totalUsers }}</h1>
                </div>
            </div>
        </div>
    </div>

    {{-- recent survey table --}}
    <div class="card shadow-sm border-0">
        <div class="card-header bg-white border-bottom py-3">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold">Borang Terkini</h5>
                <a href="{{ route('admin.surveys.index') }}" class="btn btn-sm btn-outline-primary">
                    Lihat Semua <i class="bi bi-arrow-right ms-1"></i>
                </a>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-4">Tajuk</th>
                            <th>Dicipta oleh</th>
                            <th>Respons</th>
                            <th>Tarikh</th>
                            <th class="pe-4">Tindakan</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($recentSurveys as $survey)
                        <tr>
                            <td class="ps-4">
                                <span class="fw-semibold text-primary" title="{{ $survey->title }}">
                                    {{ Str::limit($survey->title, 50) }}
                                </span>
                            </td>
                            <td>{{ $survey->user->name }}</td>
                            <td>
                                <a href="{{ route('admin.responses.respondents', $survey) }}" class="text-decoration-none">
                                    <span class="badge bg-success">{{ $survey->responses->count() }} respons</span>
                                </a>
                            </td>
                            <td class="text-muted">{{ $survey->created_at->format('d/m/Y') }}</td>
                            <td class="pe-4">
                                <a href="{{ route('admin.surveys.edit', $survey->id) }}" class="btn btn-sm btn-outline-secondary" title="Edit">
                                    <i class="bi bi-pencil"></i>
                                </a>
                                <form action="{{ route('admin.surveys.destroy', $survey->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Adakah anda pasti mahu memadam borang ini?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-outline-danger" title="Padam">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-muted">
                                <i class="bi bi-inbox display-4 d-block mb-2"></i>
                                Tiada borang lagi
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="row g-4 mt-4">
        {{-- Ulasan Terkini --}}
        <div class="col-md-6">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 fw-bold">Ulasan Terkini</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @forelse($recentReviews as $review)
                            <li class="list-group-item py-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <span class="fw-semibold text-truncate" style="max-width: 70%;">{{ $review->title }}</span>
                                    <small class="text-muted">{{ $review->updated_at->format('d/m/Y') }}</small>
                                </div>
                                <p class="mb-0 text-muted small text-truncate">{{ $review->ulasan }}</p>
                            </li>
                        @empty
                            <li class="list-group-item text-center py-4 text-muted">Tiada ulasan lagi</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>

        {{-- User Terkini --}}
        <div class="col-md-6">
            <div class="card shadow-sm border-0 h-100">
                <div class="card-header bg-white border-bottom py-3">
                    <h5 class="mb-0 fw-bold">Pengguna Terkini</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush">
                        @forelse($recentUsers as $user)
                            <li class="list-group-item py-3">
                                <div class="d-flex align-items-center">
                                    <div class="bg-light rounded-circle p-2 me-3 text-primary">
                                        <i class="bi bi-person"></i>
                                    </div>
                                    <div>
                                        <h6 class="mb-0 fw-semibold">{{ $user->name }}</h6>
                                        <div class="small text-muted">
                                            <span>{{ $user->jabatan ?? '-' }}</span> |
                                            <span>No Pekerja: {{ $user->no_pekerja ?? '-' }}</span>
                                        </div>
                                    </div>
                                    <div class="ms-auto">
                                        <span class="badge bg-{{ $user->role == 'admin' ? 'info' : 'secondary' }} rounded-pill">{{ ucfirst($user->role) }}</span>
                                    </div>
                                </div>
                            </li>
                        @empty
                             <li class="list-group-item text-center py-4 text-muted">Tiada pengguna lagi</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection