@extends('layouts/layout_comand_center')

@section('title', 'Dashboard')

@section('content')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <style>
        /* body {
            overflow: hidden;
        } */
        .ls {
            display: grid;
            align-items: center;
            justify-content: center;
            font-family: 'Poppins', sans-serif;
        }

        .launcher {
            background-color: #3498db;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .icon {
            width: 80px;
            height: 80px;
            background-color: #ecf0f1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
        }

        .icon img {
            max-width: 60%;
            max-height: 60%;
            border-radius: 50%;
        }

        h1 {
            color: #fff;
            font-size: 24px;
        }

        p {
            color: #ecf0f1;
            font-size: 16px;
        }

        .but {
            /* background-color: #43e806; */
            color: #ffffff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px !important;
            transition: background-color 0.3s;
        }

        .but:hover {
            color: white;
        }

        .cen {
            display: flex;
            justify-content: center
        }

        .rows {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 10px;
        }

        .titles {
            text-align: center;color: #3498db;
            margin-bottom: 30px;
            font-weight: bolder;
        }

        .fon {
            font-size: 30px
        }

        @media screen and (max-width:1300px) {
            .rows {
                grid-template-columns: repeat(2,1fr) !important; 
                margin-bottom: 20px;
                margin-right: 20px;
                margin-left: 20px;
            }

        }

        @media screen and (max-width:800px) {
            .rows {
                grid-template-columns: repeat(1,1fr) !important; 
            }

            .titles {
                font-size: 20px;
            }
        }
    </style>
    <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" />
    <section class="ls">
        <br>
        <br>
        <h1 class="titles " >Selamat Datang Pada Dashboard EWS - Ketinggian Permukaan Air Kabupaten Tangerang
        </h1>
        <div class="rows">
            <div class="col_main">
                <div class="launcher">
                    <div class="cen">
                        <div class="icon ">
                            <i class="fa-solid fa-house-flood-water fon text-dark"></i>
                        </div>
                    </div>
                    <h1>Informasi Sungai</h1>
                    <p> Informasi  Bantaran/Hulu Sungai</p>
                    <br>
                    <a class="but bg-dark" href="{{ url("dashboard/hasil_data") }}">Selengkapnya</a>
                </div>
            </div>
            <div class="col_main">
                <div class="launcher bg-warning">
                    <div class="cen">
                        <div class="icon ">
                            <i class="fa-solid fa-water fon text-danger"></i>
                        </div>
                    </div>
                    <h1>Hulu Sungai</h1>
                    <p> Perkiraan Ketinggian Air Hulu Sungai</p>
                    <br>
                    <a class="but bg-danger" href="{{ url("dashboard/grafik_batang") }}">Selengkapnya</a>
                </div>
            </div>
            <div class="col_main">
                <div class="launcher bg-danger">
                    <div class="cen">
                        <div class="icon ">
                            <i class="fa-solid fa-chart-line fon text-warning"></i>
                        </div>
                    </div>
                    <h1>Permukaan Air Sungai</h1>
                    <p> Grafik Permukaan Air Selama 7 Hari Terakhir</p>
                    <br>
                    <a class="but bg-warning" href="{{ url("dashboard/grafik_garis") }}">Selengkapnya</a>
                </div>
            </div>
            <div class="col_main">
                <div class="launcher bg-primary">
                    <div class="cen">
                        <div class="icon ">
                            <i class="fa-solid fa-house-flood-water fon text-success"></i>
                        </div>
                    </div>
                    <h1>Bantaran Sungai</h1>
                    <p>Hasil Perkiraan Ketinggian Bantaran Sungai</p>
                    <br>
                    <a class="but bg-success" href="{{ url("dashboard/table_bantaran") }}">Selengkapnya</a>
                </div>
            </div>
            <div class="col_main">
                <div class="launcher bg-success">
                    <div class="cen">
                        <div class="icon ">
                            <i class="fa-solid fa-cloud-sun fon text-primary"></i>
                        </div>
                    </div>
                    <h1>Perkiraan Cuaca</h1>
                    <p> Perkiraan Cuaca  Provinsi Banten </p>
                    <br>
                    <a class="but bg-primary" href="{{ url("dashboard/cuaca") }}">Selengkapnya</a>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/tables/datatable/jquery.dataTables.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.bootstrap5.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/dataTables.responsive.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/tables/datatable/responsive.bootstrap5.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
    <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
@endsection


@section('page-script')
    <script src="{{ asset(mix('js/scripts/tables/table-datatables-advanced.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/forms/form-select2.js')) }}"></script>
    <script src="{{ asset(mix('js/scripts/components/components-modals.js')) }}"></script>
    <script>
        setInterval(function() {
            location.reload();
        }, 300000);
    </script>
@endsection