@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')

    <style>
        body,
        html {
            overflow: hidden !important;
            zoom: 0.7 !important;
            margin-left: 10px;
            margin-right: 10px;
        }

        @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;
            }

        }
    </style>

    <div class=" mt-2">
        <div class="card-body">
            <div class="table-responsive">
                <h3 class="text-center mb-2">Hasil Perkiraan Ketinggian Bantaran Sungai</h3>
                <table class=" table-hover table-bordered  table-striped  table tables-responsive"
                    style="width:100% !important" id="tables" border="1">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th class="bor text-center" colspan="4">Bantaran Sungai</th>
                            <th class="bor text-center" colspan="4">Hulu Sungai</th>
                        </tr>
                        <tr>
                            <th></th>
                            <th class="text-center">Nama</th>
                            <th class="text-center">Kecamatan</th>
                            <th class="text-center">Ketinggian Air</th>
                            <th class="text-center">Status</th>

                            {{-- hulu --}}
                            <th class="text-center">Nama</th>
                            <th class="text-center">Ketinggian Air</th>
                            <th class="text-center">Status</th>
                            <th class="text-center">Waktu</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($result as $row)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>{{ $row->pengaturan_bantaran_sungai->bantaran_sungai->nama }}</td>
                                <td>{{ $row->pengaturan_bantaran_sungai->bantaran_sungai->kecamatan->nama }}</td>
                                <td>{{ $row->ketinggian_air_bantaran_sungai . ' CM' }}</td>
                                <td>
                                    @php
                                        if ($row) {
                                            $tinggi = $row->status_bantaran_sungai;
                                            if ($row->status_bantaran_sungai == 'Normal') {
                                                $namaio = "<span class='badge badge-pill badge-success bg-success'>
                        $tinggi
                        </span>";
                                            } elseif ($row->status_bantaran_sungai == 'Waspada') {
                                                $namaio = "<span class='badge badge-pill badge-warning bg-warning'>
                        $tinggi
                        </span>";
                                            } elseif ($row->status_bantaran_sungai == 'Meluap') {
                                                $namaio = "<span class='badge badge-pill badge-danger bg-danger'>
                        $tinggi
                        </span>";
                                            } else {
                                                $namaio = '-';
                                            }
                                        } else {
                                            $namaio = '-';
                                        }
                                        echo $namaio;
                                    @endphp
                                </td>
                                <td>{{ $row->pengaturan_bantaran_sungai->bantaran_sungai->device->nama_device }}</td>
                                <td>
                                    {{ $row->ketinggian_air_perangkat . ' CM' }}
                                </td>
                                <td>
                                    @php
                                        if ($row) {
                                            $jk = $row->status_perangkat;
                                            if ($jk == 'Normal') {
                                                $span = "<span class='badge badge-pill badge-success bg-success'>
                        $jk
                        </span>";
                                            } elseif ($jk == 'Siaga 4') {
                                                $span = "<span class='badge badge-pill badge-warning bg-warning'>
                        $jk
                        </span>";
                                            } elseif ($jk == 'Siaga 3') {
                                                $span = "<span class='badge badge-pill badge-warning bg-warning'>
                        $jk
                        </span>";
                                            } elseif ($jk == 'Siaga 2') {
                                                $span = "<span class='badge badge-pill badge-warning bg-warning'>
                        $jk
                        </span>";
                                            } elseif ($jk == 'Siaga 1') {
                                                $span = "<span class='badge badge-pill badge-danger bg-danger'>
                        $jk
                        </span>";
                                            } else {
                                                $span = '';
                                            }
                                        } else {
                                            $span = '-';
                                        }
                                        echo $span;
                                    @endphp
                                </td>
                                <td>
                                    {{ date('d M Y H:i:s', strtotime($row->datetime_calculate)) }}
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        <br>
    </div>
@endsection
@section('vendor-script')
    {{-- vendor files --}}
    <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')
    {{-- Page js files --}}
    <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