@extends('layouts.app')
@section('title', 'Monitoring Gambut')

@section('content')
<!-- Show Modal Kanal -->
<div class="modal fade" id="showkanal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="kanal-nama-modal"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <center id="loading-data-kanal" style="display:none;">
                    <div class="loader mb-2"></div>
                    <h5>Sedang memproses data...</h5>
                </center>
                <div id="data-kanal" style="display:none;">
                <p id="kanal-deskripsi-modal"></p>
                <hr>
                <h6>Koordinat kanal : </h6>
                <ul class="list-group mb-2" id="kanalKoordinat"></ul>
                <hr>
                <h6>Pesan status kanal :</h6>
                <div class="row mb-3" id="riwayatKanal">
                </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Show Desa Modal -->
<div class="modal fade" id="showdesa" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="desa-nama-modal">Desa :</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <center id="loading-data-desa" style="display:none;">
                    <div class="loader mb-2"></div>
                    <h5>Sedang memproses data...</h5>
                </center>
                <div id="data-desa" style="display:none;">
                <p id="desa-deskripsi-modal">Deskripsi Desa : </p>
                <hr>
                <p>Lokasi Desa (Latitude / Longitude) : <span id="desa-latitude-modal"></span> / <span
                        id="desa-longitude-modal"></span></p>
                <p>List Kanal :</p>
                <div id="list-kanal"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Show TMA Modal -->
<div class="modal fade" id="showtma" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Tinggi Muka Air</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <center id="loading-data-tma" style="display:none;">
                    <div class="loader mb-2"></div>
                    <h5>Sedang memproses data...</h5>
                </center>
                <div id="data-tma" style="display:none;">
                <div id="tma-kedalaman"></div>
                <div id="tma-suhu"></div>
                <div class="mb-2" id="tma-kelembaban"></div>
                <hr>
                <h6>Koordinat Tinggi Muka Air (Lat/Long) : <span id="tma-latitude"></span>, <span id="tma-longitude"></span></h6>
                <hr>
                <h6>Data Grafik : </h6>
                <div class="row">
                @php
                    $bulan = ['', 'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']
                @endphp
                @for ($i = 1; $i < count($bulan); $i++)
                <div class="col-md-2 mb-2">    
                    <div class="d-block w-100 btn btn-secondary show-bulan" data-bulan="{{$i}}">{{$bulan[$i]}}</div>
                </div>
                @endfor
                </div>
                <div id="export-tma-container" style="display: none;" class="mt-2 mb-2">
                    <form action="{{ route('exportTmaBulan') }}" method="get">
                    <input type="hidden" id="export-tma-id" name="tma">
                    <input type="hidden" id="export-tma-bulan" name="bulan">
                    <button type="submit" class="btn btn-success btn-sm"><i class="fas fa-download mr-2"></i> Unduh Data</button>
                    </form>
                </div>
                <canvas id="tma-chart" height="230px"></canvas>
                <p style="text-align: center; color: #888;font-weight:bold;">Hari - Jam</p>
                <hr>
                <h6>Pesan status TMA :</h6>
                <div class="row mb-2" id="riwayatTma"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Show Vegetasi Modal -->
<div class="modal fade" id="showvegetasi" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Vegetasi Air di </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <center id="loading-data-vegetasi" style="display:none;">
                    <div class="loader mb-2"></div>
                    <h5>Sedang memproses data...</h5>
                </center>
                <div id="data-vegetasi" style="display:none;">
                <p id="vegetasi-luas"></p>
                <hr>
                <h6>Koordinat Vegetasi Air : </h6>
                <ul class="list-group mb-2">
                    <li class="list-group-item"><span id="vegetasi-latitude"></span>, <span
                            id="vegetasi-longitude"></span></li>
                </ul>
                <hr>
                <h6>Pesan status Vegetasi :</h6>
                <div class="row mb-2" id="riwayatvegetasi"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Content -->
<div id="mapid"></div>
<div id="modalisi"></div>
@guest
<a href="{{route('login')}}" class="btn btn-primary shadow btn-sm px-4 index-login-button"><i
        class="fas fa-sign-in-alt mr-2"></i>Masuk</a>
@else
<div class="btn-group shadow index-login-button">
    <button type="button" class="btn btn-primary btn-sm px-4 dropdown-toggle" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"><i class="fas fa-user mr-2"></i>{{Auth::user()->name}}</button>
    <div class="dropdown-menu text-sm py-1">
        @if(Auth::user()->role == 'Admin')
        <a class="dropdown-item" href="{{ route('admin.home') }}"><i
                class="fas fa-tachometer-alt mr-2"></i>{{ __('Dashboard') }}</a>
        <a class="dropdown-item" href="{{ route('admin.user.edit', Auth::user()->id) }}"><i
                class="fas fa-user-cog mr-2"></i>{{ __('Edit Profile') }}</a>
        @elseif(Auth::user()->role == 'Pekerja')
        <a class="dropdown-item" href="{{ route('pekerja.home') }}"><i
                class="fas fa-tachometer-alt mr-2"></i>{{ __('Dashboard') }}</a>
        <a class="dropdown-item" href="{{ route('pekerja.user.edit', Auth::user()->id) }}"><i
                class="fas fa-user-cog mr-2"></i>{{ __('Edit Profile') }}</a>
        @elseif(Auth::user()->role == 'Supervisor')
        <a class="dropdown-item" href="{{ route('supervisor.home') }}"><i
                class="fas fa-tachometer-alt mr-2"></i>{{ __('Dashboard') }}</a>
        <a class="dropdown-item" href="{{ route('supervisor.user.edit', Auth::user()->id) }}"><i
                class="fas fa-user-cog mr-2"></i>{{ __('Edit Profile') }}</a>
        @endif
        <a class="dropdown-item" href="{{ route('logout') }}"
            onclick="event.preventDefault(); document.getElementById('logout-form').submit();"><i
                class="fas fa-power-off mr-2"></i>{{ __('Logout') }}</a>
        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
            @csrf
        </form>
    </div>
</div>
@endif


<!-- KALIMANTAN LOGO -->
<div class="small-icon wwf-icon rounded-circle shadow">
    <a href="https://www.wwf.id/" target="_blank">
        <img src="{{asset('images/icon/logo-kalimantan.png')}}" alt="Kalimantan">
    </a>
</div>

<!-- KEHUTANAN LOGO -->
<div class="small-icon pilot-icon rounded-circle shadow">
    <a href="" target="_blank">
        <img src="{{asset('images/icon/logo-kehutanan.png')}}" alt="Kehutanan">
    </a>
</div>




{{-- <div class="col-xl-2 wwf-footer rounded shadow p-2">
    <div class="row">
        <div class="col-md-3 wwf-icon">
            <img src="{{asset('images/icon/wwf-logo.png')}}" alt="WWF">
        </div>
        <div class="col-md-9 wwf-logo-name text-muted">
            <h1>Powered By <b>WWF</b></h1>
        </div>
    </div>
</div> --}}

<div class="accordion col-lg-3 col-12 legenda-spacing px-3" id="accordionExample">
    <div style="cursor:pointer;" class="legenda col-12 py-2 shadow rounded" data-toggle="collapse"
        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        <button class="btn btn-link collapsed font-weight-bold text-secondary" type="button">
            <i class="fas fa-map-signs mr-2"></i>Legenda Maps
            <div class="legenda-heading-line mt-1"></div>
        </button>
        <div id="collapseTwo" class="collapse legenda-content" aria-labelledby="headingTwo"
            data-parent="#accordionExample">
            <div class="row">
                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/desaIcon.png')}}" alt="Desa">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Desa</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/kanalIcon.png')}}" alt="Kanal">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Kanal</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/vegetasiIcon.png')}}" alt="Vegetasi">
                        </div>
                        <div class="col-xl-9 col-9 legenda-name">
                            <p>Vegetasi</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/tmaHighIcon.png')}}" alt="Tinggi Muka Air (TMA)">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Tinggi Muka Air (TMA) - Aman<br>(> 0 M)</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/tmaMediumIcon.png')}}" alt="Tinggi Muka Air (TMA)">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Tinggi Muka Air (TMA) - Siaga<br>(0 – (-0,4) M)</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/tmaLowIcon.png')}}" alt="Tinggi Muka Air (TMA)">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Tinggi Muka Air (TMA) - Bahaya<br>(< -0,4 M)</p>
                        </div>
                    </div>
                </div>
                
                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/aparAvailableIcon.png')}}"
                                alt="Mark3 / Ministrike">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Mark3 / Ministrike<br>(Available)</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/aparNotAvailableIcon.png')}}"
                                alt="Mark3 / Ministrike">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Mark3 / Ministrike<br>(Not Available)</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/wtpAvailableIcon.png')}}" alt="Tangki Air">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Tangki Air (Available)</p>
                        </div>
                    </div>
                </div>

                <div class="col-xl-12 col-12 legenda-list">
                    <div class="row">
                        <div class="col-xl-2 col-2 legenda-icon">
                            <img src="{{asset('images/icon/wtpNotAvailableIcon.png')}}" alt="Tangki Air">
                        </div>
                        <div class="col-xl-10 col-10 legenda-name">
                            <p>Tangki Air (Not Available)</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('jsExternalAdd')
@include('layouts.components.icon')
@include('layouts.components.chart')
@include('layouts.components.map')
@include('layouts.mapsJS')
@endsection