@extends('layouts/layout_comand_center')

@section('title', 'Dashboard')

@section('vendor-style')
    <!-- vendor css files -->
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/charts/apexcharts.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/dataTables.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/tables/datatable/responsive.bootstrap5.min.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
@endsection
@section('page-style')
    <!-- Page css files -->
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/charts/chart-apex.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
    <link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-invoice-list.css')) }}">
@endsection
@section('content')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
        integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        body,
        html {
            overflow: hidden !important;
            zoom: 0.6 !important;
            margin-left: 10px !important;
            margin-right: 10px !important;
            margin-top: 10px !important;
            font-size: 20px !important;
            

        }

        .card_grid {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 20px;
        }

      

        .kotaks {
            display: grid;
            grid-template-columns: repeat(1, 50px) repeat(1, 1fr);
        }

        @media screen and (max-width:700px) {
            body {
                overflow: scroll !important;
                zoom: 1 !important;
            }

            body::-webkit-scrollbar {
                width: 4px;
            }

            body::-webkit-scrollbar-thumb {
                background-color: #a39e9e;
            }

            body::-webkit-scrollbar-track {
                background-color: #f0f0f0;
            }

            .card_grid {
                grid-template-columns: repeat(1,1fr);
            }
        }
    </style>
    <div class="  mr-1 ">
        <div class="card-body">
            <h3 class="text-center mb-2">Jumlah Keselurahan Status Dan Pemberitahuan Bantaran Sungai </h3>
            <div class="card_grid">
                <div class="cols">
                    <div class="card card-border-shadow-primary bg-danger">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-warning"><i
                                            class="fa-solid p-1 fa-house-flood-water-circle-arrow-right text-white"
                                            style="font-size: 25px"></i></span>
                                </div>
                                <h4 class=" mb-0 text-white">{{ isset($meluap) ? $meluap : 0 }}</h4>
                            </div>
                            <h4 class="mb-1 text-white">Bantaran Sungai Meluap
                            </h4>
                        </div>
                    </div>
                </div>
                <div class="cols">
                    <div class="card card-border-shadow-primary bg-warning">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-info"><i
                                            class="fa-solid p-1 fa-person-circle-exclamation text-white"
                                            style="font-size: 25px"></i></span>
                                </div>
                                <h4 class="mb-0 text-white">{{ isset($waspada) ? $waspada : 0 }}</h4>
                            </div>
                            <h4 class="mb-1 text-white">Bantaran Sungai Waspada
                            </h4>
                        </div>
                    </div>
                </div>
                <div class="cols">
                    <div class="card  card-border-shadow-primary bg-success">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-primary"><i
                                            class="fa-solid p-1 fa-water text-white" style="font-size: 25px"></i></span>
                                </div>
                                <h4 class="mb-0 text-white">{{ isset($normal) ? $normal : 0 }}</h4>
                            </div>
                            <h4 class="mb-1 text-white">Bantaran Sungai Normal
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card_grid">
                <div class="cols">
                    <div class="card  card-border-shadow-primary bg-primary">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-danger"><i
                                            class="fa-solid p-1 text-white fa-sliders" style="font-size: 25px"></i></span>
                                </div>
                                <h4 class="mb-0 text-white">
                                    {{ isset($jumlah_bantaran_tanpa_pengaturan) ? $jumlah_bantaran_tanpa_pengaturan : 0 }}
                                </h4>
                            </div>
                            <h4 class="mb-1 text-white">Setting Bantaran Sungai Belum Lengkap
                            </h4>
                        </div>
                    </div>
                </div>
                <div class="cols">
                    <div class="card  card-border-shadow-primary bg-dark">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-success"><i
                                            class="fa-solid p-1 text-white fa-microchip" style="font-size: 25px"></i></span>
                                </div>
                                <h4 class="mb-0 text-white">{{ isset($alat_tidak_aktif) ? $alat_tidak_aktif : 0 }}</h4>
                            </div>
                            <h4 class="mb-1 text-white">Perangkat Hulu Sungai Yang Mati
                            </h4>
                        </div>
                    </div>
                </div>
                <div class="cols">
                    <div class="card  card-border-shadow-primary bg-info">
                        <div class="card-body">
                            <div class="d-flex align-items-center mb-2 pb-1">
                                <div class="avatar me-2">
                                    <span class="avatar-initial rounded bg-secondary"><i
                                            class="fa-solid p-1 text-white  fa-bridge-water"
                                            style="font-size: 25px"></i></span>
                                </div>
                                <h4 class="mb-0 text-white">{{ isset($bantaran) ? $bantaran : 0 }}</h4>
                            </div>
                            <h4 class="mb-1 text-white">Jumlah Bantaran Sungai
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
            <div class="">
                <h3 class="card-title">Pemberitahun</h3>
                <ul class="list-group">
                    @if ($count_status)
                        @foreach ($result_status as $selesai)
                            <li class="list-group-item" style='font-size:25px'>
                                - Bantaran Sungai {{ $selesai->pengaturan_bantaran_sungai->bantaran_sungai->nama }}
                                Kecamatan {{ $selesai->pengaturan_bantaran_sungai->bantaran_sungai->kecamatan->nama }}
                                Bersetatus
                                @if ($selesai->status_bantaran_sungai == 'Meluap')
                                    <span class="badge badge-pill bg-danger">{{ $selesai->status_bantaran_sungai }}</span>
                                @elseif($selesai->status_bantaran_sungai == 'Waspada')
                                    <span class="badge badge-pill bg-warning">{{ $selesai->status_bantaran_sungai }}</span>
                                @else
                                    <span class="badge badge-pill bg-success">{{ $selesai->status_bantaran_sungai }}</span>
                                @endif
                            </li>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
    </div>
    <br>
    <script>
        setInterval(function() {
            location.reload();
        }, 300000);
    </script>




@endsection