@extends('layouts.app')

@section('content')
<div class="row mb-4 align-items-center">
    <div class="col-md-7 mb-3 mb-md-0">
        <h4 class="mb-1" style="font-weight: 700; color: #222;">Dashboard Monitoring Kebersihan</h4>
        <p class="text-muted mb-0">Status kebersihan seluruh ruangan RS untuk tanggal: <strong>{{ date('d F Y', strtotime($filterDate)) }}</strong></p>
    </div>
    <div class="col-md-5 text-md-end mt-3 mt-md-0">
        <form id="filterForm" action="{{ route('dashboard') }}" method="GET" class="d-flex flex-wrap align-items-center justify-content-md-end gap-2">
            <select name="type_filter" class="form-select form-control d-inline-block w-auto shadow-sm" style="border-radius: 8px; border-color: #ddd; font-size: 14px;" onchange="document.getElementById('filterForm').submit()">
                <option value="all" {{ $filterType == 'all' ? 'selected' : '' }}>Semua Lokasi</option>
                <option value="toilet" {{ $filterType == 'toilet' ? 'selected' : '' }}>Khusus Toilet</option>
                <option value="ruangan" {{ $filterType == 'ruangan' ? 'selected' : '' }}>Khusus Ruangan</option>
            </select>
            <input type="date" name="date" id="date" class="form-control d-inline-block w-auto shadow-sm" value="{{ $filterDate }}" onchange="document.getElementById('filterForm').submit()" style="border-radius: 8px; border-color: #ddd; font-size: 14px;">
        </form>
    </div>
</div>

@php
    $total = $locations->count();
    $cleaned = $locations->where('is_cleaned', true)->count();
    $notCleaned = $total - $cleaned;
@endphp

<div class="row mb-4 g-2 flex-nowrap" style="overflow-x: auto;">
    <div class="col-4">
        <div class="card h-100" style="border-top: 4px solid #0b4a99;">
            <div class="card-body text-center p-2 p-md-3">
                <i class="fa-solid fa-hospital mb-2 mb-md-3" style="font-size: 28px; color: #0b4a99;"></i>
                <h4 class="mb-0 fw-bold">{{ $total }}</h4>
                <div class="text-muted mt-1" style="font-size: 11px; line-height: 1.2;">Total Ruangan</div>
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="card h-100" style="border-top: 4px solid #198754;">
            <div class="card-body text-center p-2 p-md-3">
                <i class="fa-solid fa-circle-check mb-2 mb-md-3" style="font-size: 28px; color: #198754;"></i>
                <h4 class="mb-0 fw-bold text-success">{{ $cleaned }}</h4>
                <div class="text-muted mt-1" style="font-size: 11px; line-height: 1.2;">Sudah Bersih</div>
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="card h-100" style="border-top: 4px solid #dc3545;">
            <div class="card-body text-center p-2 p-md-3">
                <i class="fa-solid fa-circle-xmark mb-2 mb-md-3" style="font-size: 28px; color: #dc3545;"></i>
                <h4 class="mb-0 fw-bold text-danger">{{ $notCleaned }}</h4>
                <div class="text-muted mt-1" style="font-size: 11px; line-height: 1.2;">Belum Bersih</div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="mb-0" style="font-weight: 600;">Rincian Status Ruangan</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="ps-4">Nama Lokasi</th>
                        <th>Kode QR</th>
                        <th>Petugas</th>
                        <th>Waktu Scan</th>
                        <th class="text-center pe-4">Status pd. {{ date('d/m/Y', strtotime($filterDate)) }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($locations as $loc)
                    <tr>
                        <td class="ps-4 fw-bold text-dark">{{ $loc->name }}</td>
                        <td><span class="badge bg-secondary">{{ $loc->code }}</span></td>
                        <td>{{ $loc->cleaned_by ?? '-' }}</td>
                        <td>
                            @if($loc->cleaned_at)
                                {{ \Carbon\Carbon::parse($loc->cleaned_at)->format('H:i') }}
                            @else
                                -
                            @endif
                        </td>
                        <td class="text-center pe-4">
                            @if($loc->is_cleaned)
                                <span class="badge bg-success py-2 px-3" style="border-radius: 6px;"><i class="fa-solid fa-check me-1"></i> Sudah Dibersihkan</span>
                            @else
                                <span class="badge bg-danger py-2 px-3" style="border-radius: 6px;"><i class="fa-solid fa-xmark me-1"></i> Belum Dibersihkan</span>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="text-center text-muted py-4">Belum ada data lokasi.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection