@extends('layouts.layout-user')
@section('content')
<div class="row">
    <h1>DASHBOARD</h1>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-6 mb-4">
                <div class="d-flex flex-column h-100">
                    <a href="#" class="card shadow text-decoration-none flex-grow-1" style="background-image: linear-gradient(to right, #0867E9, #6BA3F0);">
                        <div class="card-body text-center d-flex flex-column justify-content-between" style="color:white;">
                            <div style="font-size: 16px;">Sedang Dilaporkan</div>
                            <span id="userSpan" style="font-size: 30px; font-weight: bold; border-radius: 50%;" onmouseout="this.style.border = 'none'; this.style.color = '';">{{$total}}</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-6 mb-4">
                <div class="d-flex flex-column h-100">
                    <a href="#" class="card shadow text-decoration-none flex-grow-1" style="background-image: linear-gradient(to right, #F76D2E, #EEA45D);">
                        <div class="card-body text-center d-flex flex-column justify-content-between" style="color:white;">
                            <div style="font-size: 16px;">Diverifikasi</div>
                            <span id="menuSpan" style="font-size: 30px; font-weight: bold; border-radius: 50%;" onmouseout="this.style.border = 'none'; this.style.color = '';">{{$tot}}</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-6 mb-4">
                <div class="d-flex flex-column h-100">
                    <a href="#" class="card shadow text-decoration-none flex-grow-1" style="background-image: linear-gradient(to right, #F84B67, #F86E85);">
                        <div class="card-body text-center d-flex flex-column justify-content-between" style="color:white;">
                            <div style="font-size: 16px;">Ditindak Lanjuti</div>
                            <span id="bahanSpan" style="font-size: 30px; font-weight: bold; border-radius: 50%;" onmouseout="this.style.border = 'none'; this.style.color = '';">{{$tots}}</span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-6 mb-4">
                <div class="d-flex flex-column h-100">
                    <a href="#" class="card shadow text-decoration-none flex-grow-1" style="background-image: linear-gradient(to right, #08976B, #47D5A7);">
                        <div class="card-body text-center d-flex flex-column justify-content-between" style="color:white;">
                            <div style="font-size: 16px;">Selesai</div>
                            <span id="stokSpan" style="font-size: 30px; font-weight: bold; border-radius: 50%;" onmouseout="this.style.border = 'none'; this.style.color = '';">{{$totals}}</span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@foreach($pelaporans as $lap)
    @if($lap->tindakan_id != 4 && $lap->tindakan_id != 'Selesai')
        <div class="row mt-2">
            <div class="col-md-12">
                <div class="alert alert-warning" role="alert">
                    Hati-hati ada bahaya {{$lap->judul}} di {{$lap->lokasi}} dengan tingkat bahaya {{$lap->status}} yang wajib kamu waspadai !!!
                </div>
            </div>
        </div>
    @endif
@endforeach
@foreach($apresiasi as $apre)
    <div class="row mt-2">
        <div class="col-md-12">
            <a href="{{route('apresiasi.userIndex')}}">
                <div class="alert alert-success" role="alert">
                    Ada laporan apresiasi {{$apre->judul}} di {{$apre->lokasi}} yang bisa kamu lihat dan contoh !!!
                </div>
            </a>
        </div>
    </div>
@endforeach


<script>
    function changeColor(id, bgColor, textColor) {
        document.getElementById(id).style.backgroundColor = bgColor;
        document.getElementById(id).style.color = textColor;
    }
</script>

@endsection