@extends('layouts.dashboard')
@section('title', 'Data Desa | Monitoring Gambut')
@section('dashboard_content')
<!-- Insert Data Modal -->
<div class="modal fade" id="addDataModal" 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 class="modal-title" id="exampleModalLabel"><i class="fas fa-gopuram mr-2"></i>Tambah 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">
                @if(Auth::user()->role == 'Admin')
                <form action="{{route('admin.desa.store')}}" method="post" enctype="multipart/form-data">
                    @elseif(Auth::user()->role == 'Supervisor')
                    <form action="{{route('supervisor.desa.store')}}" method="post" enctype="multipart/form-data">
                        @endif
                        @csrf
                        <div id="mapid" class="mb-5" style="height: 275px;"></div>
                        <div class="form-group">
                            <label for="nama">Nama Desa:</label>
                            <input type="text" class="form-control @error('desa_nama') is-invalid @enderror" id="nama"
                                placeholder="Nama Desa" name="desa_nama" value="{{old('desa_nama')}}"
                                oninvalid="this.setCustomValidity('Masukkan nama desa disini')"
                                oninput="this.setCustomValidity('')" required>
                            @error('desa_nama') <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="latitude">Latitude:</label>
                                    <input type="text" class="form-control @error('desa_latitude') is-invalid @enderror"
                                        id="latitude" placeholder="Latitude" name="desa_latitude"
                                        value="{{old('desa_latitude')}}"
                                        oninvalid="this.setCustomValidity('Masukkan latitude desa disini')"
                                        oninput="this.setCustomValidity('')" required>
                                    @error('desa_latitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="longitude">Longitude:</label>
                                    <input type="text"
                                        class="form-control @error('desa_longitude') is-invalid @enderror"
                                        id="longitude" placeholder="Longitude" name="desa_longitude"
                                        value="{{old('desa_longitude')}}"
                                        oninvalid="this.setCustomValidity('Masukkan longitude desa disini')"
                                        oninput="this.setCustomValidity('')" required>
                                    @error('desa_longitude') <div class="invalid-feedback">{{$message}}</div> @enderror
                                </div>
                            </div>
                        </div>
                        @if(Auth::user()->role == 'Admin')
                        <div class="form-group">
                            <label for="supervisor_nik">Supervisor:</label>
                            <select name="supervisor_nik" data-placeholder="Pilih Supervisor"
                                class="form-control select2InModal @error('supervisor_nik') is-invalid @enderror"
                                id="supervisor_nik" value="{{old('supervisor_nik')}}"
                                style="display: block !important; width: 100% !important;">
                                <option value=""></option>
                                @foreach($supervisor as $data)
                                <option value="{{$data->nik}}">{{$data->name}}</option>
                                @endforeach
                            </select>
                            @error('supervisor_nik') <div class="invalid-feedback">{{$message}}</div> @enderror
                        </div>
                        @endif
                        <div class="form-group">
                            <label for="deskripsi">Deskripsi Desa:</label>
                            <textarea name="desa_deskripsi" id="" cols="30" rows="10"
                                class="form-control @error('desa_deskripsi') is-invalid @enderror" id="deskripsi"
                                placeholder="Deskripsi Desa"
                                oninvalid="this.setCustomValidity('Masukkan deskripsi desa disini')"
                                oninput="this.setCustomValidity('')" required>{{old('desa_deskripsi')}}</textarea>
                            @error('desa_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>

<!-- 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>
                        <li class="breadcrumb-item active">Data Desa</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="content-body">
        @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'Supervisor')
        <button type="button" class="btn btn-primary my-3 btn-sm" data-toggle="modal" data-target="#addDataModal"><i
                class="fas fa-plus mr-2"></i>Tambah Desa</button>
        @endif

        @if($desa->count() == null)
        <div class="alert alert-data-null"><i class="fas fa-info-circle mr-2"></i>Belum Ada Data Desa</div>
        @elseif($desa->count() != null)
        <form action="" class="search-wrapper col-xl-5 col-12 @if(Auth::user()->role == 'Pekerja') mt-3 @endif">
            @csrf
            <div class="form-group">
                <div class="input-group">
                    <input type="text" id="desa-search" class="form-control" placeholder="Cari desa disini...">
                    <div class="input-group-append">
                        <div class="input-group-text"><i class="fas fa-search"></i></div>
                    </div>
                </div>
            </div>
            <div id="loading-data" class="loader mt-2" style="display:none;"></div>
        </form>
        @endif

        @if(session('status'))
        <div class="alert alert-success"><i class="fas fa-check mr-2"></i>{{session('status')}}</div>
        @endif

        <div class="row" id="desa-container">
            @foreach($desa as $data)
            @if(Auth::user()->role == 'Admin')
            <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="{{route('admin.desa.show', $data->desa_id)}}">
                            <p class="list-heading text-dark font-weight-bold">{{$data->desa_nama}}</p>
                            <small class="text-muted"><i class="far fa-user mr-1"></i>Supervisor :</small>
                            @if($data->supervisor_nik == '')
                            <p class="badge badge-danger list-info">Unknown</p>
                            @else
                            @foreach($data->supervisor as $supervisor)
                            <p class="badge badge-warning list-info">{{$supervisor->name}}</p>
                            @endforeach
                            @endif
                            <p class="list-description text-dark">{{Str::limit($data->desa_deskripsi, 120)}}</p>
                        </a>
                        <div class="list-option mt-3">
                            <a href="{{route('admin.desa.edit', $data->desa_id)}}" class="badge badge-primary"><i
                                    class="fas fa-pencil-alt"></i></a>
                            <a href="#" data-uri="{{route('admin.desa.destroy', $data->desa_id)}}"
                                class="badge badge-danger" data-toggle="modal" data-target="#confirmDeleteModal"><i
                                    class="fas fa-trash-alt"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            @elseif(Auth::user()->role == 'Pekerja')
            <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="{{route('pekerja.desa.show', $data->desa_id)}}">
                            <p class="list-heading text-dark font-weight-bold">{{$data->desa_nama}}</p>
                            <small class="text-muted"><i class="far fa-user mr-1"></i>Supervisor :</small>
                            <p class="badge badge-warning list-info">{{$data->supervisor}}</p>
                            <p class="list-description text-dark">{{Str::limit($data->desa_deskripsi, 120)}}</p>
                        </a>
                    </div>
                </div>
            </div>
            @elseif(Auth::user()->role == 'Supervisor')
            <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="{{route('supervisor.desa.show', $data->desa_id)}}">
                            <p class="list-heading text-dark font-weight-bold">{{$data->desa_nama}}</p>
                            <small class="text-muted"><i class="far fa-user mr-1"></i>Supervisor :</small>
                            <p class="badge badge-warning list-info">Kamu</p>
                            <p class="list-description text-dark">{{Str::limit($data->desa_deskripsi, 120)}}</p>
                        </a>
                        <div class="list-option mt-3">
                            <a href="{{route('supervisor.desa.edit', $data->desa_id)}}" class="badge badge-primary"><i
                                    class="fas fa-pencil-alt"></i></a>
                            <a href="#" data-uri="{{route('supervisor.desa.destroy', $data->desa_id)}}"
                                class="badge badge-danger" data-toggle="modal" data-target="#confirmDeleteModal"><i
                                    class="fas fa-trash-alt"></i></a>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @endforeach
        </div>
        {{ $desa->links() }}
    </div>
</div>
@endsection

@section('jsExternalAdd')
@include('layouts/searchAjax')
<script>
    $(document).ready(function(){
    var mymap = L.map("mapid").setView([1.383731, 102.071469], 10);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
{
    id: 'mapbox/streets-v11',
    minZoom: 3,
    maxZoom: 23,
    tileSize: 512,
    zoomOffset: -1,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>'})
.addTo(mymap);

var arcgisOnline = L.esri.Geocoding.arcgisOnlineProvider();

L.esri.Geocoding.geosearch({
    providers: [
    arcgisOnline,
    L.esri.Geocoding.featureLayerProvider({
        url: 'https://services.arcgis.com/uCXeTVveQzP4IIcx/arcgis/rest/services/gisday/FeatureServer/0/',
        searchFields: ['Name', 'Organization'],
        label: 'GIS Day Events',
        bufferRadius: 5000,
        formatSuggestion: function (feature) {
        return feature.properties.Name + ' - ' + feature.properties.Organization;
        }
    })
    ]
}).addTo(mymap);

$('#addDataModal').on('shown.bs.modal', function(){
    setTimeout(function() {
        mymap.invalidateSize();
    }, 10);
});

var popup = L.popup();
        
function onMapClick(e) {
        popup
        .setLatLng(e.latlng)
        .setContent("Lokasi (Lat, Long) : " + e.latlng.toString()+
        "<div class='mt-2' id='salinLongLat'><button type='button' class='btn btn-primary btn-sm d-block w-100'><i class='fas fa-copy mr-2'></i>Salin</button></div>"
        )
        .openOn(mymap);

        $("#salinLongLat").click(function(){
            $('#latitude').val(e.latlng.lat);
            $('#longitude').val(e.latlng.lng);
            $(this).html("<button type='button' class='btn btn-success btn-sm d-block w-100'><i class='fas fa-check mr-2'></i>Berhasil disalin</button>");
        });
    }
            mymap.on("click", onMapClick);
    });
</script>
@endsection