@extends('layouts.dashboard')
@section('title', 'RW '.$rw->rw_nomor.', '.$rw->lurah->lurah_nama.' | Monitoring Kelurahan')
@section('dashboard_content')

@if(Auth::user()->role == 'Admin' || Auth::user()->role == 'Camat' || Auth::user()->role == 'Lurah')
<!-- Modal Reset -->
<div class="modal fade" id="resetmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog confirm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Konfirmasi Reset Data</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Apakah anda yakin ingin mereset data?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <form id="confirm_reset" method="POST" action="">
                    @csrf
                    @method('patch')
                    <button type="submit" class="btn btn-danger">Reset Data</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Edit Sekretaris & Seksi Pemerintah RW Modal -->
<div class="modal fade" id="editpejabatrw" 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><i class="fas fa-user"></i> Edit Sekretaris & Seksi Pemerintah RW :
                </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.updatePejabatRw', $rw->rw_id)}}" method="post"
                    enctype="multipart/form-data">
                    @elseif(Auth::user()->role == 'RW')
                    <form action="{{route('admin.updatePejabatRw', $rw->rw_id)}}" method="post"
                        enctype="multipart/form-data">
                        @endif
                        @csrf
                        @method('patch')
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="rw_sekretaris">Nama Sekretaris RW :</label>
                                <input type="text" class="form-control @error('rw_sekretaris') is-invalid @enderror"
                                    id="rw_sekretaris" placeholder="Masukkan Nama Sekretaris RW" name="rw_sekretaris"
                                    value="{{$rw->rw_sekretaris}}" required>
                                @error('rw_sekretaris') <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="rw_bendahara">Nama Bendahara RW :</label>
                                <input type="text" class="form-control @error('rw_bendahara') is-invalid @enderror"
                                    id="rw_bendahara" placeholder="Masukkan Nama Bendahara RW" name="rw_bendahara"
                                    value="{{$rw->rw_bendahara}}" required>
                                @error('rw_bendahara') <div class="invalid-feedback">{{$message}}</div> @enderror
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary px-5">Simpan</button>
                    </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Kantor RW Modal -->
<div class="modal fade" id="editkantorrw" 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><i class="fas fa-user"></i> Edit Kantor ketua RW :</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.updateKantorRw', $rw->rw_id)}}" method="post"
                    enctype="multipart/form-data">
                    @elseif(Auth::user()->role == 'RW')
                    <form action="{{route('rw.updateKantorRw', $rw->rw_id)}}" method="post"
                        enctype="multipart/form-data">
                        @endif
                        @csrf
                        @method('patch')
                        <div id="mapHome" class="mb-5" style="height: 225px;"></div>
                        <div class="row">
                            <div class="form-group col-md-6">
                                <label for="input_latitude">Latitude Kantor RW :</label>
                                <input type="text"
                                    class="form-control @error('kantor_rw_latitude') is-invalid @enderror"
                                    id="input_latitude" placeholder="Masukkan Latitude" name="kantor_rw_latitude"
                                    value="{{$rw->kantor_rw_latitude}}" required>
                                @error('kantor_rw_latitude') <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>
                            <div class="form-group col-md-6">
                                <label for="input_longitude">Longitude Kantor RW :</label>
                                <input type="text"
                                    class="form-control @error('kantor_rw_longitude') is-invalid @enderror"
                                    id="input_longitude" placeholder="Masukkan Longitude" name="kantor_rw_longitude"
                                    value="{{$rw->kantor_rw_longitude}}" required>
                                @error('kantor_rw_longitude') <div class="invalid-feedback">{{$message}}</div>
                                @enderror
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary px-5">Simpan</button>
                    </form>
            </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">
                        @if(Auth::user()->role == 'Admin')
                        <li class="breadcrumb-item"><a href="{{url('/admin/home')}}"><i class="fas fa-home mr-1"></i>
                                Home</a></li>
                        <li class="breadcrumb-item"><a href="{{url('/admin/rw')}}"> Data RW</a></li>
                        @elseif(Auth::user()->role == 'Camat')
                        <li class="breadcrumb-item"><a href="{{url('/camat/home')}}"><i class="fas fa-home mr-1"></i>
                                Home</a></li>
                        <li class="breadcrumb-item"><a href="{{url('/camat/rw')}}"> Data RW</a></li>
                        @elseif(Auth::user()->role == 'Lurah')
                        <li class="breadcrumb-item"><a href="{{url('/lurah/home')}}"><i class="fas fa-home mr-1"></i>
                                Home</a></li>
                        <li class="breadcrumb-item"><a href="{{url('/lurah/rw')}}"> Data RW</a></li>
                        @endif
                        <li class="breadcrumb-item active">RW {{$rw->rw_nomor}}, {{$rw->lurah->lurah_nama}}</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    @if(session('status'))
    <div class="alert alert-success"><i class="fas fa-check mr-2"></i>{{session('status')}}</div>
    @endif

    <div class="content-body mt-3">
        <p class="show-heading"><b>RW {{$rw->rw_nomor}}, {{$rw->lurah->lurah_nama}}</b></p>
        <div class="row">
            <!-- TAMPILAN KANTOR RW -->
            <div class="col-xl-7 col-12">
                @if($rw->kantor_rw_latitude == 0 || $rw->kantor_rw_longitude == 0)
                <div class="alert alert-warning"><i class="fas fa-exclamation-circle mr-2"></i>Kantor Lurah Belum
                    Ditambahkan</div>
                @else
                <div id="mapRw" class="mb-3" style="height: 300px;"></div>
                @endif
            </div>

            <div class="col-xl-5 col-12">
                <div class="col-md-12 home-card card-border px-4 py-4 mb-3 shadow-sm">
                    <p class="mx-0 my-0 card-heading"><i class="fas fa-user mr-2"></i> Profil RW</b></p>
                    <div class="home-card-line mt-2 mb-3" style="width: 80px;"></div>
                    <div class="avatar-upload mb-3">
                        <div class="avatar-preview shadow">
                            <div id="imagePreview" @if($rw->user->user_foto == null)
                                style="background-image: url({{asset('/images/dashboard/avatar-null.png')}});
                                background-size: 125px;
                                background-position: center 50px;
                                background-repeat: no-repeat;"
                                @else
                                style="background:
                                url({{asset('storage/images/users/'.$rw->user->user_foto)}});background-size:
                                cover;
                                background-position: center;
                                background-repeat: no-repeat;"
                                @endif>
                            </div>
                        </div>
                    </div>
                    <p class="mx-0 my-2"><b>Username:</b> <span
                            class="badge badge-primary">{{$rw->user->username}}</span></p>
                    <p class="mx-0 my-2"><b>NIK:</b> <span class="badge badge-primary">{{$rw->user->nik}}</span>
                        @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'RW')
                        <a href="{{route('admin.rw.edit', $rw->rw_id)}}" class="text-sm text-primary"><i
                                class="fas fa-pencil-alt ml-1"></i></a>
                        @endif
                    </p>
                    <p class="mx-0 my-2"><b>Ketua RW:</b> <span class="badge badge-primary">{{$rw->user->name}}</span>
                        @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'RW')
                        <a href="{{route('admin.rw.edit', $rw->rw_id)}}" class="text-sm text-primary"><i
                                class="fas fa-pencil-alt ml-1"></i></a>
                        @endif
                    </p>
                    <p class="mx-0 my-2">
                        <b>Sekretaris RW:</b> <span class="badge badge-primary">{{$rw->rw_sekretaris}}</span>
                        @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'RW')
                        @if($rw->rw_sekretaris == null)
                        <span class="badge badge-warning">Sekretaris Belum Ditambahkan</span>
                        <a href="#" class="text-sm text-primary" data-toggle="modal" data-target="#editpejabatrw"><i
                                class="fas fa-plus ml-1"></i></a>
                        @else
                        <a href="#" class="text-sm text-primary" data-toggle="modal" data-target="#editpejabatrw"><i
                                class="fas fa-pencil-alt ml-1"></i></a>
                        @endif
                        @endif
                    </p>
                    <p class="mx-0 my-2">
                        <b>Bendahara RW:</b> <span class="badge badge-primary">{{$rw->rw_bendahara}}</span>
                        @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'RW')
                        @if($rw->rw_bendahara == null)
                        <span class="badge badge-warning">Bendahara Belum Ditambahkan</span>
                        <a href="#" class="text-sm text-primary" data-toggle="modal" data-target="#editpejabatrw"><i
                                class="fas fa-plus ml-1"></i></a>
                        @else
                        <a href="#" class="text-sm text-primary" data-toggle="modal" data-target="#editpejabatrw"><i
                                class="fas fa-pencil-alt ml-1"></i></a>
                        @endif
                        @endif
                    </p>
                    <p class="mx-0 my-2">
                        <b>Kantor RW:</b> <span class="badge badge-primary">{{$rw->kantor_rw_latitude}} /
                            {{$rw->kantor_rw_longitude}} </span>
                        @if(Auth::user()->role == 'Admin' || Auth::user()->role == 'RW')
                        <a href="#" class="text-sm text-primary" data-toggle="modal" data-target="#editkantorrw"><i
                                class="fas fa-pencil-alt ml-1"></i></a>
                        @endif
                    </p>
                    <p class="mx-0 my-2"><b>Email:</b>
                        @if($rw->user->email == null || $rw->user->email_status == 'Null')
                        <span class="badge badge-warning">Email Belum Ditambahkan</span>
                        @elseif($rw->user->email_status == 'Not Verified')
                        <span>{{$rw->user->email}} <i class="fas fa-times px-1 py-1 text-danger"></i></span>
                        @else
                        <span>{{$rw->user->email}} <i class="fas fa-check px-1 py-1 text-success"></i></span>
                        @endif
                    </p>
                </div>
            </div>

            <div class="col-xl-3 col-12">
                @if(Auth::user()->role == 'Admin')
                <a href="{{url('admin/rt')}}">
                    @elseif(Auth::user()->role == 'Camat')
                    <a href="{{url('camat/rt')}}">
                        @elseif(Auth::user()->role == 'Lurah')
                        <a href="{{url('lurah/rt')}}">
                            @endif
                            <div class="col-md-12 home-card list-rw px-4 py-4 mb-3 shadow">
                                <p class="mx-0 my-0 card-heading">Total RT <span
                                        class="ml-2 px-3 py-2 card-icon shadow-sm">{{$rw->rt->count()}}</span></p>
                            </div>
                        </a>
            </div>

            <div class="col-xl-3 col-12">
                <a href="{{ route('exportRw', $rw->rw_id) }}">
                    <div class="col-md-12 home-card list-download px-4 py-4 mb-3 shadow">
                        <p class="mx-0 my-0 card-heading"><i class="fas fa-download shadow-sm mr-2"></i>
                            Unduh Data RW</p>
                    </div>
                </a>
            </div>

            <div class="col-xl-3 col-12">
                @if(Auth::user()->role == 'Admin')
                <a href="#" data-uri="{{route('admin.rw.reset', $rw->rw_id)}}" class="text-sm text-danger"
                    data-toggle="modal" data-target="#resetmodal">
                    @elseif(Auth::user()->role == 'Camat')
                    <a href="#" data-uri="{{route('camat.rw.reset', $rw->rw_id)}}" class="text-sm text-danger"
                        data-toggle="modal" data-target="#resetmodal">
                        @elseif(Auth::user()->role == 'Lurah')
                        <a href="#" data-uri="{{route('lurah.rw.reset', $rw->rw_id)}}" class="text-sm text-danger"
                            data-toggle="modal" data-target="#resetmodal">
                            @endif
                            <div class="col-md-12 home-card list-reset px-4 py-4 mb-3 shadow">
                                <p class="mx-0 my-0 text-center card-heading">Reset RW</p>
                            </div>
                        </a>
            </div>
        </div>
    </div>
</div>
@endsection

@section('jsExternalAdd')
<script>
    $(document).ready(function(){
    $('#resetmodal').on('show.bs.modal', function(e) {
        $(this).find('#confirm_reset').attr('action', $(e.relatedTarget).data('uri'));
    });

    var mapRw = L.map("mapRw").setView([{{$rw->kantor_rw_latitude}}, {{$rw->kantor_rw_longitude}}], 17);

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
    {
    id: 'mapbox/streets-v11',
    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(mapRw);

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(mapRw);

var KantorRw = L.marker([{{$rw->kantor_rw_latitude}}, {{$rw->kantor_rw_longitude}}], {icon: kantorRwIcon})
.addTo(mapRw)
.bindPopup(`
<h6><i class="fas fa-home"></i> Kantor RW {{$rw->rw_nomor}} {{$rw->lurah->lurah_nama}}</h6>
<hr>
<p><i class="fas fa-map-marker-alt"></i> Lokasi Kantor ketua RW :
    <br>
    Lat({{$rw->kantor_rw_latitude}}), Long({{$rw->kantor_rw_longitude}})
    </p>
<hr>
<div><i class="fas fa-user-clock"></i> Diperbarui pada :{{$rw->updated_at->diffForHumans()}}</div>
`, {maxWidth : 210});
    });
</script>
@if(Auth::user()->role == 'Admin' || Auth::user()->role == 'Camat')
<script>
    $(document).ready(function(){
        
    var mapHome = L.map("mapHome").setView([-6.182966, 106.856847], 14);
    
    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(mapHome);
    
    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(mapHome);
    
    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(mapHome);

            $("#salinLongLat").click(function(){
                $('#input_latitude').val(e.latlng.lat);
                $('#input_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>");
            });
    }
    
    mapHome.on("click", onMapClick);

        $('#editkantorrw').on('shown.bs.modal', function(){
            setTimeout(function() {
                mapHome.invalidateSize();
            }, 10);
        });
    });
</script>
@endif
@endsection