@extends('layouts.dashboard')
@section('title', $desa->desa_nama.' | Monitoring Gambut')
@section('dashboard_content')
<!-- Alert Toast Success -->
@if(session('status_pekerja'))
<div class="toast bg-success toast-alert" data-animation="true" data-delay="4000">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fas fa-check mr-2"></i>Status Pekerja</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        {{session('status_pekerja')}}
    </div>
</div>
@elseif(session('status_kanal'))
<div class="toast bg-success toast-alert" data-animation="true" data-delay="4000">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fas fa-check mr-2"></i>Status Kanal</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        {{session('status_kanal')}}
    </div>
</div>
@elseif(session('status_tma'))
<div class="toast bg-success toast-alert" data-animation="true" data-delay="4000">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fas fa-check mr-2"></i>Status TMA</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        {{session('status_tma')}}
    </div>
</div>
@elseif(session('status_vegetasi'))
<div class="toast bg-success toast-alert" data-animation="true" data-delay="4000">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fas fa-check mr-2"></i>Status Vegetasi</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        {{session('status_vegetasi')}}
    </div>
</div>
@elseif(session('status_apar'))
<div class="toast bg-success toast-alert" data-animation="true" data-delay="4000">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fas fa-check mr-2"></i>Status APAR</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        {{session('status_apar')}}
    </div>
</div>
@elseif(session('status_wtp'))
<div class="toast bg-success toast-alert" data-animation="true" data-delay="4000">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fas fa-check mr-2"></i>Status Tangki Air</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        {{session('status_wtp')}}
    </div>
</div>
@endif

<!-- Alert Toast Error -->
@if(session('status_error_pekerja'))
<div class="toast bg-danger toast-alert" data-animation="true" data-delay="4000">
    <div class="toast-header">
        <strong class="mr-auto"><i class="fas fa-exclamation-circle mr-2"></i>Status Pekerja</strong>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="toast-body">
        {{session('status_error_pekerja')}}
    </div>
</div>
@endif

<!-- Insert Kanal Modal -->
<div class="modal fade" id="addKanalModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah Kanal di <b>{{$desa->desa_nama}}</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('pekerja.kanal.store')}}" method="post">
                    @csrf
                    <div class="form-group">
                        <label for="nama">Nama Kanal:</label>
                        <input type="text" class="form-control @error('kanal_nama') is-invalid @enderror" id="nama"
                            placeholder="Nama Kanal" name="kanal_nama" value="{{old('kanal_nama')}}"
                            oninvalid="this.setCustomValidity('Masukkan nama kanal disini')"
                            oninput="this.setCustomValidity('')" required>
                        @error('kanal_nama') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="kanal_deskripsi">Deskripsi Kanal:</label>
                        <textarea name="kanal_deskripsi" id="kanal_deskripsi" cols="30" rows="10"
                            class="form-control @error('kanal_deskripsi') is-invalid @enderror" id="deskripsi"
                            placeholder="Deskripsi Kanal"
                            oninvalid="this.setCustomValidity('Masukkan deskripsi kanal disini')"
                            oninput="this.setCustomValidity('')" required>{{old('kanal_deskripsi')}}</textarea>
                        @error('kanal_deskripsi') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                    <button type="submit" class="btn btn-primary float-right">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Insert TMA Modal -->
<div class="modal fade" id="addTmaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah TMA di <b>{{$desa->desa_nama}}</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="mapinserttma" style="height: 300px;"></div>
                <form action="{{route('pekerja.tma.store')}}" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="latitude-tma">Latitude:</label>
                                <input type="text" id="latitude-tma"
                                    class="form-control @error('tma_latitude') is-invalid @enderror"
                                    placeholder="Latitude TMA" name="tma_latitude" value="{{old('tma_latitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan latitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('tma_latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="longitude-tma">Longitude:</label>
                                <input type="text" id="longitude-tma"
                                    class="form-control @error('tma_longitude') is-invalid @enderror"
                                    placeholder="Longitude TMA" name="tma_longitude" value="{{old('tma_longitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan longitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('tma_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-12">
                            <button id="detectlocationtma" type="button" class="btn btn-primary btn-sm">Deteksi Lokasi
                                Sekarang</button>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary float-right">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Insert APAR Modal -->
<div class="modal fade" id="addAparModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah Alat Pemadam Api Ringan di
                    <b>{{$desa->desa_nama}}</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="mapinsertapar" style="height: 300px;"></div>
                <form action="{{route('pekerja.apar.store')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="nama">Foto APAR:</label>
                        <input type="file" accept="image/*"
                            class="form-control @error('apar_foto') is-invalid @enderror" placeholder="Foto APAR"
                            name="apar_foto" value="{{old('apar_foto')}}"
                            oninvalid="this.setCustomValidity('Masukkan foto APAR disini')"
                            oninput="this.setCustomValidity('')" required>
                        @error('apar_foto')
                        <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="latitude-apar">Latitude:</label>
                                <input type="text" id="latitude-apar"
                                    class="form-control @error('apar_latitude') is-invalid @enderror"
                                    placeholder="Latitude APAR" name="apar_latitude" value="{{old('apar_latitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan latitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('apar_latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="longitude-apar">Longitude:</label>
                                <input type="text" id="longitude-apar"
                                    class="form-control @error('apar_longitude') is-invalid @enderror"
                                    placeholder="Longitude APAR" name="apar_longitude" value="{{old('apar_longitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan longitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('apar_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-12">
                            <button id="detectlocationapar" type="button" class="btn btn-primary btn-sm">Deteksi Lokasi
                                Sekarang</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="tipe">Tipe APAR:</label>
                        <select id="tipe" name="apar_type"
                            class="form-control select2Apar @error('apar_type') is-invalid @enderror"
                            oninvalid="this.setCustomValidity('Masukkan Tipe APAR disini')"
                            oninput="this.setCustomValidity('')" data-placeholder="Pilih Tipe APAR" style="display: block !important; width: 100% !important;" required>
                            <option value=""></option>
                            <option value="Mark3">Mark3</option>
                            <option value="Ministrike">Ministrike</option>
                        </select>
                        @error('apar_type') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="nama">Keterangan APAR:</label>
                        <select name="apar_keterangan"
                            class="form-control select2Apar @error('apar_keterangan') is-invalid @enderror"
                            value="{{old('apar_keterangan')}}"
                            oninvalid="this.setCustomValidity('Masukkan Keterangan APAR disini')"
                            oninput="this.setCustomValidity('')" data-placeholder="Pilih Keterangan APAR"
                            style="display: block !important; width: 100% !important;" required>
                            <option value=""></option>
                            <option value="Available">Available</option>
                            <option value="Not Available">Not Available</option>
                        </select>
                        @error('apar_keterangan') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>

                    <button type="submit" class="btn btn-primary float-right">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Insert WTP Modal -->
<div class="modal fade" id="addWtpModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah Tangki Air di <b>{{$desa->desa_nama}}</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="mapinsertwtp" style="height: 300px;"></div>
                <form action="{{route('pekerja.wtp.store')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label for="nama">Foto Tangki Air:</label>
                        <input type="file" accept="image/*"
                            class="form-control  @error('wtp_foto') is-invalid @enderror" placeholder="Foto Tangki Air"
                            name="wtp_foto" value="{{old('wtp_foto')}}"
                            oninvalid="this.setCustomValidity('Masukkan foto Tangki Air disini')"
                            oninput="this.setCustomValidity('')" required>
                        @error('wtp_foto')
                        <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="latitude-wtp">Latitude:</label>
                                <input type="text" id="latitude-wtp"
                                    class="form-control @error('wtp_latitude') is-invalid @enderror"
                                    placeholder="Latitude Tangki Air" name="wtp_latitude"
                                    value="{{old('wtp_latitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan latitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('wtp_latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="longitude-wtp">Longitude:</label>
                                <input type="text" id="longitude-wtp"
                                    class="form-control @error('wtp_longitude') is-invalid @enderror"
                                    placeholder="Longitude Tangki Air" name="wtp_longitude"
                                    value="{{old('wtp_longitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan longitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('wtp_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <div class="col-12">
                            <button id="detectlocationwtp" type="button" class="btn btn-primary btn-sm">Deteksi Lokasi
                                Sekarang</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nama">Keterangan Tangki Air:</label>
                        <select name="wtp_keterangan"
                            class="form-control select2Wtp @error('wtp_keterangan') is-invalid @enderror"
                            value="{{old('wtp_keterangan')}}"
                            oninvalid="this.setCustomValidity('Masukkan Keterangan Tangki Air disini')"
                            oninput="this.setCustomValidity('')" data-placeholder="Pilih Keterangan Tangki Air"
                            style="display: block !important; width: 100% !important;" required>
                            <option value=""></option>
                            <option value="Available">Available</option>
                            <option value="Not Available">Not Available</option>
                        </select>
                        @error('wtp_keterangan') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>

                    <button type="submit" class="btn btn-primary float-right">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Insert Vegetasi Modal -->
<div class="modal fade" id="addVegetasiModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah Vegetasi di <b>{{$desa->desa_nama}}</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="mapinsertvegetasi" style="height: 300px;"></div>
                <form action="{{route('pekerja.vegetasi.store')}}" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="latitude-vegetasi">Latitude:</label>
                                <input type="text" id="latitude-vegetasi"
                                    class="form-control @error('vegetasi_latitude') is-invalid @enderror"
                                    placeholder="Latitude Vegetasi" name="vegetasi_latitude"
                                    value="{{old('vegetasi_latitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan latitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('vegetasi_latitude') <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="longitude-vegetasi">Longitude:</label>
                                <input type="text" id="longitude-vegetasi"
                                    class="form-control @error('vegetasi_longitude') is-invalid @enderror"
                                    placeholder="Longitude Vegetasi" name="vegetasi_longitude"
                                    value="{{old('vegetasi_longitude')}}"
                                    oninvalid="this.setCustomValidity('Masukkan longitude disini')"
                                    oninput="this.setCustomValidity('')" required>
                                @error('vegetasi_longitude') <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col-12">
                            <button id="detectlocationvegetasi" type="button" class="btn btn-primary btn-sm">Deteksi
                                Lokasi
                                Sekarang</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="deskripsi">Deskripsi Vegetasi:</label>
                        <textarea name="vegetasi_deskripsi" id="" cols="30" rows="10"
                            class="form-control @error('vegetasi_deskripsi') is-invalid @enderror" id="deskripsi"
                            placeholder="Deskripsi Vegetasi"
                            oninvalid="this.setCustomValidity('Masukkan deskripsi vegetasi disini')"
                            oninput="this.setCustomValidity('')" required>{{old('vegetasi_deskripsi')}}</textarea>
                        @error('vegetasi_deskripsi') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>

                    <button type="submit" class="btn btn-primary float-right">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Insert Pekerja Modal -->
@if(Auth::user()->role == 'Supervisor')
<div class="modal fade" id="addPekerjaModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Tambah Pekerja di <b>{{$desa->desa_nama}}</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="{{route('supervisor.storeRsp')}}" method="post">
                    @csrf
                    <div class="form-group">
                        <label for="">NIK Pekerja:</label>
                        <input type="text" class="form-control @error('user_nik_pekerja') is-invalid @enderror"
                            placeholder="NIK Pekerja" name="user_nik_pekerja" value="{{old('user_nik_pekerja')}}"
                            oninvalid="this.setCustomValidity('Masukkan nik pekerja disini')"
                            oninput="this.setCustomValidity('')" required>
                        @error('user_nik_pekerja') <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>

                    <button type="submit" class="btn btn-primary float-right">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Show Kanal Modal -->
<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">
                <p id="kanal-deskripsi-modal"></p>
                <hr>
                @if(Auth::user()->role == 'Pekerja')
                <p class="font-weight-bold"><i class="fas fa-location-arrow mr-2"></i>Kirim Koordinat Kanal</p>
                <form method="post" id="storeKoordinat">
                    <div class="row">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" id="kanal-id-koordinat" name="kanal_id" value="">
                        <div class="form-group col-6">
                            <input type="text" name="kanal_latitude" class="form-control" id="latitude-kanal"
                                placeholder="Latitude..." required>
                        </div>
                        <div class="form-group col-6">
                            <input type="text" name="kanal_longitude" class="form-control" id="longitude-kanal"
                                aria-describedby="emailHelp" placeholder="Longitude..." required>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Kirim Koordinat</button>
                    <button id="detectlocationkanal" type="button" class="btn btn-primary btn-sm">Deteksi Lokasi
                        Sekarang</button>
                    <div id="loading-kanal" class="loader" style="display:none;"></div>
                    <h5 id="koordinat-sukses" class="text-success">Koordinat berhasil ditambah</h5>
                </form>
                <hr>
                @endif
                <p class="font-weight-bold"><i class="fas fa-map-marker-alt mr-2"></i>Lokasi Kanal</p>
                <div id="mapkanal" style="height: 300px;"></div>
                <hr>
                <p class="font-weight-bold"><i class="fas fa-thumbtack mr-2"></i>List Koordinat Kanal</p>
                <div class="accordion" id="kanalKoordinat"></div>
                @if(Auth::user()->role == 'Pekerja')
                <hr>
                <p class="font-weight-bold"><i class="fas fa-paper-plane mr-2"></i>Tambah Pesan Status Riwayat Kanal</p>
                <form action="{{route('pekerja.Kanalstore')}}" method="post" accept-charset="utf-8"
                    enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" id="kanal-id-riwayat" name="kanal_id" value="">
                    <div class="form-group">
                        <label for="riwayat-kanal-foto" class="font-weight-normal">Upload Foto Kanal: </label>
                        <input class="form-control @error('riwayat_kanal_foto') is-invalid @enderror"
                            name="riwayat_kanal_foto" id="riwayat-kanal-foto" type="file" accept="image/*"
                            value="{{old('riwayat_kanal_foto')}}"
                            oninvalid="this.setCustomValidity('Masukkan foto riwayat kanal disini')"
                            oninput="this.setCustomValidity('')" required>
                        @error('riwayat_kanal_foto')
                        <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="riwayat-kanal" class="font-weight-normal">Pesan Status Kanal: </label>
                        <textarea class="form-control" name="riwayat_kanal_deskripsi" id="riwayat-kanal" rows="5"
                            placeholder="Masukkan pesan status kanal..." required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Kirim Status</button>
                </form>
                @endif
                <hr>
                <p class="font-weight-bold"><i class="fas fa-bullhorn mr-2"></i>Pesan Status Riwayat Kanal</p>
                <div class="row" id="riwayatKanal">
                </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 di <b>{{$desa->desa_nama}}</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="tma-kedalaman"></div>
                <div id="tma-suhu"></div>
                <div class="mb-2" id="tma-kelembaban"></div>
                <hr>
                <p class="font-weight-bold"><i class="fas fa-map-marker-alt mr-2"></i>Lokasi TMA</p>
                <div id="maptma" style="height: 300px;"></div><br>
                <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 mb-2"></i> Unduh Data</button>
                    </form>
                </div>
                <canvas id="tma-chart"></canvas>
                <p style="text-align: center; color: #888;font-weight:bold;">Hari - Jam</p>
                <hr>
                @if(Auth::user()->role == 'Pekerja')
                <p class="font-weight-bold"><i class="fas fa-paper-plane mr-2"></i>Tambah Pesan Status TMA</p>
                <div>
                    <h6>Import Data TMA</h6>
                    <form action="{{ url('pekerja/importTma') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" id="tma-id-riwayat1" name="tma_id" value="">
                        <div class="row">
                            <div class="col-10"><input type="file" name="file" class="form-control"></div>
                            <div class="col-2"><button class="btn btn-success">Import Excel</button></div>
                        </div>
                    </form>
                </div>
                <br>
                <hr>
                <form action="{{route('pekerja.Tmastore')}}" method="post" accept-charset="utf-8"
                    enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" id="tma-id-riwayat2" name="tma_id" value="">
                    <div class="form-group">
                        <label for="riwayat-tma" class="font-weight-normal">Update Kedalaman TMA (Meter)</label>
                        <input class="form-control mb-2 @error('riwayat_tma_kedalaman') is-invalid @enderror"
                            name="riwayat_tma_kedalaman" id="riwayat-tma-kedalaman" type="number"
                            value="{{old('riwayat_tma_kedalaman')}}"
                            placeholder="Masukkan kedalaman tinggi muka air disini" step="any" required>
                    </div>
                    <div class="form-group">
                        <label for="riwayat-tma" class="font-weight-normal">Update Suhu TMA (Celcius)</label>
                        <input class="form-control mb-2 @error('riwayat_tma_suhu') is-invalid @enderror"
                            name="riwayat_tma_suhu" id="riwayat-tma-suhu" type="number"
                            value="{{old('riwayat_tma_suhu')}}"
                            placeholder="Masukkan suhu tinggi muka air disini" step="any" required>
                    </div>
                    <div class="form-group">
                        <label for="riwayat-tma" class="font-weight-normal">Update Kelembaban TMA (Percent)</label>
                        <input class="form-control mb-2 @error('riwayat_tma_kelembaban') is-invalid @enderror"
                            name="riwayat_tma_kelembaban" id="riwayat-tma-kelembaban" type="number"
                            value="{{old('riwayat_tma_kelembaban')}}"
                            placeholder="Masukkan kelembaban tinggi muka air disini" step="any" required>
                    </div>
                    <div class="form-group">
                        <label for="riwayat-tma" class="font-weight-normal"> Pesan Status TMA</label>
                        <textarea class="form-control" name="riwayat_tma_deskripsi" id="riwayat-tma" rows="5"
                            placeholder="Isi Pesan status" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Kirim Status</button>
                </form>
                <hr>
                @endif
                <p class="font-weight-bold"><i class="fas fa-bullhorn mr-2"></i>Pesan Status Riwayat TMA</p>
                <div class="row" id="riwayatTma"></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 di <b>{{$desa->desa_nama}}</b></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="vegetasi-luas"></p>
                <p class="font-weight-bold"><i class="fas fa-map-marker-alt mr-2"></i>Lokasi Vegetasi</p>
                <div id="mapvegetasi" style="height: 300px;"></div>
                <hr>
                <p class="font-weight-bold"><i class="fas fa-thumbtack mr-2"></i>Koordinat Vegetasi</p>
                <ul class="list-group mb-2">
                    <li class="list-group-item"><span id="vegetasi-longitude"></span>, <span
                            id="vegetasi-latitude"></span></li>
                </ul>
                <hr>
                @if(Auth::user()->role == 'Pekerja')
                <p class="font-weight-bold"><i class="fas fa-paper-plane mr-2"></i>Tambah Pesan Status Vegetasi</p>
                <form action="{{route('pekerja.Vegetasistore')}}" method="post" accept-charset="utf-8"
                    enctype="multipart/form-data">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <input type="hidden" id="vegetasi-id-riwayat" name="vegetasi_id" value="">
                    <div class="form-group">
                        <label for="riwayat-vegetasi-foto" class="font-weight-normal">Upload Foto vegetasi : </label>
                        <input class="form-control mb-2 @error('riwayat_vegetasi_foto') is-invalid @enderror"
                            name="riwayat_vegetasi_foto" id="riwayat-vegetasi-foto" type="file" accept="image/*"
                            value="{{old('riwayat_vegetasi_foto')}}"
                            oninvalid="this.setCustomValidity('Masukkan foto riwayat vegetasi disini')"
                            oninput="this.setCustomValidity('')" required>
                        @error('riwayat_vegetasi_foto')
                        <div class="invalid-feedback">{{$message}}</div> @enderror
                    </div>
                    <div class="form-group">
                        <label for="riwayat-vegetasi" class="font-weight-normal">Update luas vegetasi (Satuan Meter) :
                        </label>
                        <input class="form-control mb-2 @error('riwayat_vegetasi_luas') is-invalid @enderror"
                            name="riwayat_vegetasi_luas" id="riwayat-vegetasi-luas" type="number"
                            value="{{old('riwayat_vegetasi_luas')}}" step="any"
                            placeholder="Masukkan luas vegetasi disini" required>
                    </div>
                    <div class="form-group">
                        <label for="riwayat-vegetasi" class="font-weight-normal">Pesan Status Vegetasi : </label>
                        <textarea class="form-control" name="riwayat_vegetasi_deskripsi" id="riwayat-vegetasi" rows="5"
                            placeholder="Isi Pesan status" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-sm">Kirim Status</button>
                </form>
                <hr>
                @endif
                <p class="font-weight-bold"><i class="fas fa-bullhorn mr-2"></i>Pesan Status Riwayat vegetasi</p>
                <div class="row" id="riwayatvegetasi"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Content -->
<div class="container-fluid container-fluid-spacing">
    <div class="content-header">
        <div class="row">
            <div class="col-sm-6">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{url('/home')}}"><i class="fas fa-home mr-1"></i> Home</a>
                        </li>
                        @if(Auth::user()->role == 'Admin')
                        <li class="breadcrumb-item active"><a href="{{url('admin/desa')}}">Data Desa</a></li>
                        @elseif(Auth::user()->role == 'Supervisor')
                        <li class="breadcrumb-item active"><a href="{{url('supervisor/desa')}}">Data Desa</a></li>
                        @elseif(Auth::user()->role == 'Pekerja')
                        <li class="breadcrumb-item active"><a href="{{url('pekerja/desa')}}">Data Desa</a></li>
                        @endif
                        <li class="breadcrumb-item active">{{$desa->desa_nama}}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="content-body mt-3">
        <div class="col-md-8 single-content-spacing">
            <div class="col-md-12 single-content">
                <div class="single-description">
                    <p class="single-heading mt-3">{{$desa->desa_nama}}</p>
                    <small class="text-muted"><i
                            class="far fa-calendar-alt mr-2"></i>{{\Carbon\Carbon::parse($desa->created_at)->diffForHumans()}}</small>
                    <p class="my-4">{{$desa->desa_deskripsi}}</p>
                    <div id="mapid" class="mb-5" style="height: 400px;"></div>

                    <nav style="overflow-x: scroll;" id="desaMenu">
                        <div class="nav nav-tabs" id="nav-tab" role="tablist" style="width: 135vh;">
                            @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'Supervisor')
                            <a class="nav-item nav-link text-dark font-weight-bold @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'Supervisor') active @endif"
                                data-toggle="tab" href="#eksporData" role="tab" aria-selected="true">Ekspor Data</a>
                            @endif
                            <a class="nav-item nav-link text-dark font-weight-bold @if(Auth::user()->role == 'Pekerja') active @endif"
                                data-toggle="tab" href="#pekerja" role="tab" aria-selected="false">Pekerja</a>
                            <a class="nav-item nav-link text-dark font-weight-bold" data-toggle="tab" href="#kanal"
                                role="tab" aria-selected="false">Kanal</a>
                            <a class="nav-item nav-link text-dark font-weight-bold" data-toggle="tab" href="#tma"
                                role="tab" aria-selected="false">Tinggi Muka Air</a>
                            <a class="nav-item nav-link text-dark font-weight-bold" data-toggle="tab" href="#vegetasi"
                                role="tab" aria-selected="false">Vegetasi</a>
                            <a class="nav-item nav-link text-dark font-weight-bold" data-toggle="tab" href="#apar"
                                role="tab" aria-selected="false">Alat Pemadam Api Ringan</a>
                            <a class="nav-item nav-link text-dark font-weight-bold" data-toggle="tab" href="#tangkiAir"
                                role="tab" aria-selected="false">Tangki Air</a>
                        </div>
                    </nav>

                    <div class="tab-content" id="nav-tabContent">
                        <!-- TAMPILAN EXPORT DATA (EXCEL) -->
                        <div class="tab-pane fade @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'Supervisor') show active @endif"
                            id="eksporData" role="tabpanel">
                            @if(Auth::user()->role == 'Admin')
                            <p class="content-heading mt-3 mb-4">Export data di <b>{{$desa->desa_nama}}</b></p>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-xl-4 col-12 mb-2">
                                        <a class="btn btn-primary btn-sm col-12"
                                            href="{{ route('admin.exportKanal') }}"><i class="fas fa-download mr-2"></i>
                                            Unduh Riwayat Kanal</a>
                                    </div>
                                    <div class="col-xl-4 col-12 mb-2">
                                        <a class="btn btn-danger btn-sm col-12" href="{{ route('admin.exportTma') }}"><i
                                                class="fas fa-download mr-2"></i> Unduh Riwayat TMA</a>
                                    </div>
                                    <div class="col-xl-4 col-12 mb-2">
                                        <a class="btn btn-success btn-sm col-12"
                                            href="{{ route('admin.exportVegetasi') }}"><i
                                                class="fas fa-download mr-2"></i> Unduh Riwayat Vegetasi</a>
                                    </div>
                                </div>
                            </div>
                            @elseif(Auth::user()->role == 'Supervisor')
                            <p class="content-heading mt-3 mb-4">Export Data di <b>{{$desa->desa_nama}}</b></p>
                            <div class="mb-3">
                                <div class="row">
                                    <div class="col-xl-4 col-12 mb-2">
                                        <a class="btn btn-primary btn-sm col-12"
                                            href="{{ route('supervisor.exportKanal') }}"><i
                                                class="fas fa-download mr-2"></i> Unduh Riwayat Kanal</a>
                                    </div>
                                    <div class="col-xl-4 col-12 mb-2">
                                        <a class="btn btn-danger btn-sm col-12"
                                            href="{{ route('supervisor.exportTma') }}"><i
                                                class="fas fa-download mr-2"></i> Unduh Riwayat TMA</a>
                                    </div>
                                    <div class="col-xl-4 col-12 mb-2">
                                        <a class="btn btn-success btn-sm col-12"
                                            href="{{ route('supervisor.exportVegetasi') }}"><i
                                                class="fas fa-download mr-2"></i> Unduh Riwayat Vegetasi</a>
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>

                        <!-- TAMPILAN LIST PEKERJA -->
                        <div class="tab-pane fade @if(Auth::user()->role == 'Pekerja') show active @endif" id="pekerja"
                            role="tabpanel">
                            <p class="content-heading mt-3 mb-4">Pekerja di <b>{{$desa->desa_nama}}</b></p>
                            @if(Auth::user()->role == 'Supervisor')
                            <button type="button" class="btn btn-primary mb-3 btn-sm" data-toggle="modal"
                                data-target="#addPekerjaModal"><i class="fas fa-plus mr-2"></i>Tambah Pekerja</button>
                            @if(session('status_pekerja'))
                            <div class="alert alert-success"><i
                                    class="fas fa-check mr-2"></i>{{session('status_pekerja')}}</div>
                            @endif
                            @if(session('status_error_pekerja'))
                            <div class="alert alert-data-null"><i
                                    class="fas fa-exclamation-triangle mr-2"></i>{{session('status_error_pekerja')}}
                            </div>
                            @endif
                            @endif

                            @if($pekerja->count() == null)
                            <div class="alert alert-data-null"><i class="fas fa-info-circle mr-2"></i>Belum Ada Pekerja
                                di {{$desa->desa_nama}}</div>
                            @endif

                            <div class="row" id="list-pekerja">
                                @foreach($pekerja as $data)
                                <div class="col-xl-4 col-12 list-group-spacing mb-3">
                                    <div class="col-12 list-group-content px-3 py-2">
                                        <div class="list-group-description p-3">
                                            <a href="#" class="pekerja-list list-group-item-action mb-2"
                                                data-toggle="modal" data-target="#showpekerja">
                                                <p class="list-heading text-dark">{{$data->pekerja}} <span
                                                        class="badge badge-warning list-info">{{$data->nik_pekerja}}</span>
                                                </p>
                                                <small class="text-muted"><i
                                                        class="far fa-calendar-alt mr-2"></i>{{\Carbon\Carbon::parse($data->created_at)->diffForHumans()}}</small>
                                            </a>
                                            @if(Auth::user()->role == 'Supervisor')
                                            <div class="list-option mt-3">
                                                <a href="#" data-uri="{{route('supervisor.destroyRsp', $data->rsp_id)}}"
                                                    class="badge badge-danger" data-toggle="modal"
                                                    data-target="#confirmDeleteModal"><i
                                                        class="fas fa-trash-alt mr-2"></i>Hapus pekerja dari
                                                    {{$desa->desa_nama}}</a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- TAMPILAN KANAL -->
                        <div class="tab-pane fade" id="kanal" role="tabpanel">
                            <p class="content-heading mt-3 mb-4">Kanal di <b>{{$desa->desa_nama}}</b></p>
                            @if(Auth::user()->role == 'Pekerja')
                            <button type="button" class="btn btn-primary mb-3 btn-sm" data-toggle="modal"
                                data-target="#addKanalModal"><i class="fas fa-plus mr-2"></i>Tambah Kanal</button>
                            @endif
                            @if(session('status_kanal'))
                            <div class="alert alert-success"><i
                                    class="fas fa-check mr-2"></i>{{session('status_kanal')}}
                            </div>
                            @endif

                            @if($desa->kanal->count() == null)
                            <div class="alert alert-data-null"><i class="fas fa-info-circle mr-2"></i>Belum Ada Kanal di
                                {{$desa->desa_nama}}</div>
                            @endif

                            <div class="row" id="list-kanal">
                                @foreach($desa->kanal as $kanal)
                                <div class="col-12 list-group-spacing mb-3">
                                    <div class="col-12 list-group-content px-3 py-2">
                                        <div class="list-group-description p-3">
                                            <a href="#" class="kanal-list list-group-item-action mb-2"
                                                data-toggle="modal" data-target="#showkanal"
                                                data-id="{{$kanal->kanal_id}}">
                                                <p class="list-heading text-dark">{{$kanal->kanal_nama}}</p>
                                                <small class="text-muted"><i
                                                        class="far fa-calendar-alt mr-2"></i>{{\Carbon\Carbon::parse($kanal->created_at)->diffForHumans()}}</small>
                                                <p class="list-description text-dark mt-3">
                                                    {{Str::limit($kanal->kanal_deskripsi, 120)}}</p>
                                            </a>
                                            @if(Auth::user()->role == 'Pekerja')
                                            <div class="list-option mt-3">
                                                <a href="{{route('pekerja.kanal.edit', $kanal->kanal_id)}}"
                                                    class="badge badge-primary"><i class="fas fa-pencil-alt"></i></a>
                                                <a href="#"
                                                    data-uri="{{route('pekerja.kanal.destroy', $kanal->kanal_id)}}"
                                                    class="badge badge-danger" data-toggle="modal"
                                                    data-target="#confirmDeleteModal"><i
                                                        class="fas fa-trash-alt"></i></a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- TAMPILAN TMA -->
                        <div class="tab-pane fade" id="tma" role="tabpanel">
                            <p class="content-heading mt-3 mb-4">Tinggi Muka Air di <b>{{$desa->desa_nama}}</b></p>
                            @if(Auth::user()->role == 'Pekerja')
                            <button type="button" class="btn btn-primary mb-3 btn-sm" data-toggle="modal"
                                data-target="#addTmaModal"><i class="fas fa-plus mr-2"></i>Tambah TMA</button>
                            @endif
                            @if(session('status_tma'))
                            <div class="alert alert-success"><i class="fas fa-check mr-2"></i>{{session('status_tma')}}
                            </div>
                            @endif

                            @if($desa->tma->count() == null)
                            <div class="alert alert-data-null"><i class="fas fa-info-circle mr-2"></i>Belum Ada Tinggi
                                Muka Air di {{$desa->desa_nama}}</div>
                            @endif

                            <div class="row" id="list-tma">
                                @foreach($desa->tma as $tma)
                                <div class="col-xl-6 col-12 list-group-spacing mb-3">
                                    <div class="col-12 list-group-content px-3 py-2">
                                        <div class="list-group-description p-3">
                                            <a href="#" class="tma-list list-group-item-action mb-2" data-toggle="modal"
                                                data-target="#showtma" data-id="{{$tma->tma_id}}">
                                                <p class="list-heading text-dark">Long({{$tma->tma_longitude}}),
                                                    Lat({{$tma->tma_latitude}})</p>
                                                <small class="text-muted"><i
                                                        class="far fa-calendar-alt mr-2"></i>{{\Carbon\Carbon::parse($tma->created_at)->diffForHumans()}}</small>
                                            </a>
                                            @if(Auth::user()->role == 'Pekerja')
                                            <div class="list-option mt-3">
                                                <a href="{{route('pekerja.tma.edit', $tma->tma_id)}}"
                                                    class="badge badge-primary"><i class="fas fa-pencil-alt"></i></a>
                                                <a href="#" data-uri="{{route('pekerja.tma.destroy', $tma->tma_id)}}"
                                                    class="badge badge-danger" data-toggle="modal"
                                                    data-target="#confirmDeleteModal"><i
                                                        class="fas fa-trash-alt"></i></a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- TAMPILAN VEGETASI -->
                        <div class="tab-pane fade" id="vegetasi" role="tabpanel">
                            <p class="content-heading mt-3 mb-4">Vegetasi di <b>{{$desa->desa_nama}}</b></p>
                            @if(Auth::user()->role == 'Pekerja')
                            <button type="button" class="btn btn-primary mb-3 btn-sm" data-toggle="modal"
                                data-target="#addVegetasiModal"><i class="fas fa-plus mr-2"></i>Tambah Vegetasi</button>
                            @endif
                            @if(session('status_vegetasi'))
                            <div class="alert alert-success"><i
                                    class="fas fa-check mr-2"></i>{{session('status_vegetasi')}}
                            </div>
                            @endif

                            @if($desa->vegetasi->count() == null)
                            <div class="alert alert-data-null"><i class="fas fa-info-circle mr-2"></i>Belum Ada Vegetasi
                                di {{$desa->desa_nama}}</div>
                            @endif

                            <div class="row" id="list-vegetasi">
                                @foreach($desa->vegetasi as $vegetasi)
                                <div class="col-xl-6 col-12 list-group-spacing mb-3">
                                    <div class="col-12 list-group-content px-3 py-2">
                                        <div class="list-group-description p-3">
                                            <a href="#" class="vegetasi-list list-group-item-action mb-2"
                                                data-toggle="modal" data-target="#showvegetasi"
                                                data-id="{{$vegetasi->vegetasi_id}}">
                                                <p class="list-heading text-dark">
                                                    Long({{$vegetasi->vegetasi_longitude}}),
                                                    Lat({{$vegetasi->vegetasi_latitude}})</p>
                                                <small class="text-muted"><i
                                                        class="far fa-calendar-alt mr-2"></i>{{\Carbon\Carbon::parse($vegetasi->created_at)->diffForHumans()}}</small>
                                                <p class="list-description text-dark mt-3">
                                                    {{Str::limit($vegetasi->vegetasi_deskripsi, 120)}}</p>
                                            </a>
                                            @if(Auth::user()->role == 'Pekerja')
                                            <div class="list-option mt-3">
                                                <a href="{{route('pekerja.vegetasi.edit', $vegetasi->vegetasi_id)}}"
                                                    class="badge badge-primary"><i class="fas fa-pencil-alt"></i></a>
                                                <a href="#"
                                                    data-uri="{{route('pekerja.vegetasi.destroy', $vegetasi->vegetasi_id)}}"
                                                    class="badge badge-danger" data-toggle="modal"
                                                    data-target="#confirmDeleteModal"><i
                                                        class="fas fa-trash-alt"></i></a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- TAMPILAN APAR -->
                        <div class="tab-pane fade" id="apar" role="tabpanel">
                            <p class="content-heading mt-3 mb-4">Alat Pemadam Api Ringan di <b>{{$desa->desa_nama}}</b>
                            </p>
                            @if(Auth::user()->role == 'Pekerja')
                            <button type="button" class="btn btn-primary mb-3 btn-sm" data-toggle="modal"
                                data-target="#addAparModal"><i class="fas fa-plus mr-2"></i>Tambah APAR</button>
                            @endif
                            @if(session('status_apar'))
                            <div class="alert alert-success"><i class="fas fa-check mr-2"></i>{{session('status_apar')}}
                            </div>
                            @endif

                            @if($desa->apar->count() == null)
                            <div class="alert alert-data-null"><i class="fas fa-info-circle mr-2"></i>Belum Ada APAR di
                                {{$desa->desa_nama}}</div>
                            @endif

                            <div class="row" id="list-apar">
                                @foreach($desa->apar as $apar)
                                <div class="col-xl-4 col-12 list-group-spacing mb-3">
                                    <div class="col-12 list-group-content px-3 py-2">
                                        <img src="{{asset('storage/images/apar/'.$apar->apar_foto)}}"
                                            alt="{{$apar->apar_keterangan}}">
                                        <div class="list-group-description p-3">
                                            <a href="#" class="apar-list list-group-item-action mb-2"
                                                data-toggle="modal" data-target="#showApar"
                                                data-id="{{$apar->apar_id}}">
                                                <p class="list-heading text-dark">Long({{$apar->apar_longitude}}),
                                                    Lat({{$apar->apar_latitude}})</p>
                                                <small class="text-muted"><i
                                                        class="far fa-calendar-alt mr-2"></i>{{\Carbon\Carbon::parse($apar->created_at)->diffForHumans()}}</small><br>
                                                @if($apar->apar_keterangan == 'Available')
                                                <p class="badge badge-success  mt-3">{{$apar->apar_keterangan}}</p>
                                                @else
                                                <p class="badge badge-danger  mt-3">{{$apar->apar_keterangan}}</p>
                                                @endif
                                            </a>
                                            @if(Auth::user()->role == 'Pekerja')
                                            <div class="list-option mt-3">
                                                <a href="{{route('pekerja.apar.edit', $apar->apar_id)}}"
                                                    class="badge badge-primary"><i class="fas fa-pencil-alt"></i></a>
                                                <a href="#" data-uri="{{route('pekerja.apar.destroy', $apar->apar_id)}}"
                                                    class="badge badge-danger" data-toggle="modal"
                                                    data-target="#confirmDeleteModal"><i
                                                        class="fas fa-trash-alt"></i></a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>

                        <!-- TAMPILAN TANGKI AIR -->
                        <div class="tab-pane fade" id="tangkiAir" role="tabpanel">
                            <p class="content-heading mt-3 mb-4">Tangki Air di <b>{{$desa->desa_nama}}</b></p>
                            @if(Auth::user()->role == 'Pekerja')
                            <button type="button" class="btn btn-primary mb-3 btn-sm" data-toggle="modal"
                                data-target="#addWtpModal"><i class="fas fa-plus mr-2"></i>Tambah Tangki Air</button>
                            @endif
                            @if(session('status_wtp'))
                            <div class="alert alert-success"><i class="fas fa-check mr-2"></i>{{session('status_wtp')}}
                            </div>
                            @endif

                            @if($desa->wtp->count() == null)
                            <div class="alert alert-data-null"><i class="fas fa-info-circle mr-2"></i>Belum Ada Tangki
                                Air di {{$desa->desa_nama}}</div>
                            @endif

                            <div class="row" id="list-wtp">
                                @foreach($desa->wtp as $wtp)
                                <div class="col-xl-4 col-12 list-group-spacing mb-3">
                                    <div class="col-12 list-group-content px-3 py-2">
                                        <img src="{{asset('storage/images/wtp/'.$wtp->wtp_foto)}}"
                                            alt="{{$wtp->wtp_keterangan}}">
                                        <div class="list-group-description p-3">
                                            <a href="#" class="wtp-list list-group-item-action mb-2" data-toggle="modal"
                                                data-target="#showWtp" data-id="{{$wtp->wtp_id}}">
                                                <p class="list-heading text-dark">Long({{$wtp->wtp_longitude}}),
                                                    Lat({{$wtp->wtp_latitude}})</p>
                                                <small class="text-muted"><i
                                                        class="far fa-calendar-alt mr-2"></i>{{\Carbon\Carbon::parse($wtp->created_at)->diffForHumans()}}</small><br>
                                                @if($wtp->wtp_keterangan == 'Available')
                                                <p class="badge badge-success  mt-3">{{$wtp->wtp_keterangan}}</p>
                                                @else
                                                <p class="badge badge-danger  mt-3">{{$wtp->wtp_keterangan}}</p>
                                                @endif
                                            </a>
                                            @if(Auth::user()->role == 'Pekerja')
                                            <div class="list-option mt-3">
                                                <a href="{{route('pekerja.wtp.edit', $wtp->wtp_id)}}"
                                                    class="badge badge-primary"><i class="fas fa-pencil-alt"></i></a>
                                                <a href="#" data-uri="{{route('pekerja.wtp.destroy', $wtp->wtp_id)}}"
                                                    class="badge badge-danger" data-toggle="modal"
                                                    data-target="#confirmDeleteModal"><i
                                                        class="fas fa-trash-alt"></i></a>
                                            </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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