@extends('sidebar')
@section('content')
    @push('map')
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
            integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
        <!-- Make sure you put this AFTER Leaflet's CSS -->
        <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
    @endpush
    @include('message')
    <section class="section d-flex flex-column flex-lg-row ">
        <div class="card wrapper-bg mr-3 w-100">
            <div class="card-header">
                <h4 class="card-title center">Data Organisasi</h4>
            </div>

            <div class="card-body shadow w-100">
                <div class="row">
                    <div class="col-md-6" style="width:100%!important;">


                        <div class="form-group">
                            <label for="disabledInput">Nama Organisasi</label>
                            <p class="form-control-static" id="staticInput">{{ $data->organisasi }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Ketua Organisasi</label>
                            <p class="form-control-static" id="staticInput">{{ $data->ketua }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Periode Jabatan</label>
                            <p class="form-control-static" id="staticInput">{{ $data->periode }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Nama Organisasi</label>
                            <p class="form-control-static" id="staticInput">{{ $data->ketua }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Jumlah Gedung Yang Aktif</label>
                            <p class="form-control-static" id="staticInput">{{ $data->gedung }}</p>
                        </div>


                        <div class="form-group">
                            <label for="disabledInput">Alamat</label>
                            <p class="form-control-static" id="staticInput">{{ $data->alamat }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Kontak</label>
                            <p class="form-control-static" id="staticInput">{{ $data->no_telp }}</p>
                        </div>

                        <div class="form-group">
                            <label for="disabledInput">Kecamatan</label>
                            <p class="form-control-static" id="staticInput">{{ $data->kecamatan->name }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">kelurahan</label>
                            <p class="form-control-static" id="staticInput">{{ $data->kelurahan->name }}</p>
                        </div>

                        <div class="form-group">
                            <label for="disabledInput">Status</label>
                            <p class="form-control-static" id="staticInput">
                                {{ $data->status == 1 ? 'aktif' : 'tidak aktif' }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Jenis Organisasi</label>
                            <p class="form-control-static" id="staticInput">{{ $data->jenis_keanggotaan }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">No.Legalitas</label>
                            <p class="form-control-static" id="staticInput">{{ $data->legalitas }}</p>
                        </div>
                        <div>
                            <a href="#modalEdit" id="edit" data-bs-toggle="modal" data-bs-target="#modalEdit"
                                data-organisasi="{{ $data->organisasi }}" data-alamat="{{ $data->alamat }}"
                                data-kecamatan_id="{{ $data->kecamatan_id }}" data-no_telp="{{ $data->no_telp }}"
                                data-username="{{ $data->username }}" data-ketua="{{ $data->ketua }}"
                                data-periode="{{ $data->periode }}" data-email="{{ $data->email }}"
                                data-jenis_keanggotaan="{{ $data->jenis_keanggotaan }}" data-status="{{ $data->status }}"
                                data-legalitas="{{ $data->legalitas }}" data-namalengkap="{{ $data->namalengkap }}"
                                data-kelurahan_id="{{ $data->kelurahan_id }}" data-gedung="{{ $data->gedung }}"
                                class="btn btn-success"
                                onclick="$('#modalEdit #formEdit').attr('action', '{{ route('user.update', Crypt::encryptString($data->id)) }}')">
                                <i class="bi bi-pencil-square"></i>
                                Edit</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>

            <div class="card center shadow w-100 ml0" style="width: 40%; height:fit-content!important; margin-left:20px;">
                <div class="card-header">
                    <h4 class="card-title">Data Akun</h4>

                </div>

                <div class="card-body">
                    <div class="row center">

                        <div class="form-group " style="display:flex;flex-direction: column;align-items:center;">
                            <img class="photo form-control-static" id="staticInput"
                                src="{{ asset(asset('images') . '/' . $data->photo) }}" alt="">
                            <label for="disabledInput">Photo Profile</label>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Nama Penanggung Jawab</label>
                            <p class="form-control-static" id="staticInput">{{ $data->namalengkap }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Email</label>
                            <p class="form-control-static" id="staticInput">{{ $data->email }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Kontak</label>
                            <p class="form-control-static" id="staticInput">{{ $data->no_telp }}</p>
                        </div>
                        <div>
                            <a href="#modalEdit2" id="edit" data-bs-toggle="modal" data-bs-target="#modalEdit2"
                                data-organisasi="{{ $data->organisasi }}"
                                data-alamat="{{ $data->alamat }}"data-kecamatan_id="{{ $data->kecamatan_id }}"
                                data-no_telp="{{ $data->no_telp }}"
                                data-username="{{ $data->username }}"data-ketua="{{ $data->ketua }}"
                                data-periode="{{ $data->periode }}" data-email="{{ $data->email }}"
                                data-jenis_keanggotaan="{{ $data->jenis_keanggotaan }}"
                                data-status="{{ $data->status }}" data-legalitas="{{ $data->legalitas }}"
                                data-namalengkap="{{ $data->namalengkap }}"
                                data-kelurahan_id="{{ $data->kelurahan_id }}" data-gedung="{{ $data->gedung }}"
                                class="btn btn-success"
                                onclick="$('#modalEdit2 #formEdit').attr('action', '{{ route('user.update', Crypt::encryptString($data->id)) }}')">
                                <i class="bi bi-pencil-square m-1"></i>Edit
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card shadow center p-5 ml0" style="margin-left:20px;">
                <div class="card-header">
                    <h4 class="card-title">Lokasi Spesifik </h4>
                </div>
                <div id="map" style="width: 300px; height: 300px;"></div>
                <a href="#modalMap" id="edit" data-bs-toggle="modal" data-bs-target="#modalMap"
                    class="btn btn-success m-3  "
                    onclick="$('#modalMap #formMap').attr('action', '{{ route('editmap', Crypt::encryptString($data->id)) }}')">
                    <i class="bi bi-pencil-square m-1"></i>Edit
                </a>
            </div>
        </div>
    </section>
    {{-- Modal Edit --}}
    {{-- Modal Update Organisasi --}}
    <div class="modal fade" id="modalEdit" tabindex="-1" role="dialog" aria-labelledby="modalEditLabel" Add
        user="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditLabel">Edit Data Organisasi</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <form action="" method="post" id="formEdit" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        @method('put')

                        <div class="form-group">
                            <label for="organisasi">Nama Organisasi</label>
                            <input type="text" name="organisasi" class="form-control" id="organisasi" required>
                        </div>
                        <div class="form-group">
                            <label for="ketua">Ketua</label>
                            <input type="text" name="ketua" class="form-control" id="ketua" required>
                        </div>
                        <div class="form-group">
                            <label for="periode">Periode</label>
                            <input type="text" name="periode" class="form-control" id="periode" required>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="username" class="form-control" id="username" required>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="email" class="form-control" id="email" required>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="password" class="form-control" id="password"
                                placeholder="Biarkan kosong bila tidak ingin mengganti password!">
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="namalengkap" class="form-control" id="namalengkap"
                                placeholder="Nama Lengkap" required>
                        </div>
                        <div class="form-group">
                            <label for="kecamatan_id">Kecamatan</label>
                            <select name="kecamatan_id" id="kecamatan_id" class="form-control custom-select" required>
                                @foreach ($kecamatan as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="kelurahan_id">kelurahan</label>
                            <select name="kelurahan_id" id="kelurahan_id" class="form-control custom-select" required>
                                @foreach ($kelurahan as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="no_telp">No Telp</label>
                            <input type="number" name="no_telp" class="form-control" id="no_telp" required>
                        </div>
                        <div class="form-group">
                            <label for="alamat">Alamat</label>
                            <input type="text" name="alamat" class="form-control" id="alamat"
                                placeholder="Alamat" required>
                        </div>


                        <div class="form-group">
                            <label for="status">Status</label>
                            <select name="status" id="status" class="form-control custom-select" required>
                                <option value="1">Aktif</option>
                                <option value="2">Tidak Aktif</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="legalitas">Legalitas</label>
                            <input type="text" name="legalitas" class="form-control" id="legalitas"
                                placeholder="Alamat" required>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="photo" class="form-control" id="photo">
                        </div>
                        <div class="form-group">
                            <label for="jenis_keanggotaan">Jenis Organisasi</label>
                            <input type="text" name="jenis_keanggotaan" class="form-control" id="jenis_keanggotaan"
                                placeholder="Jenis Keanggotaan" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-warning"> <i class="bi bi-pencil-square"></i></button>
                        </div>
                </form>
            </div>
        </div>
    </div>
    </div>
    {{-- modal edit organisasi end --}}
    {{-- modal edit Profile --}}
    <div class="modal fade" id="modalEdit2" tabindex="-1" role="dialog" aria-labelledby="modalEditLabel" Add
        user="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEditLabel">Edit Data Akun</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="material-icons">x</i>
                    </button>
                </div>
                <form action="" method="post" id="formEdit" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        @method('put')

                        <div class="form-group">
                            <input type="hidden" name="organisasi" class="form-control" id="organisasi" required>
                        </div>
                        <div class="form-group">
                            <label for="username">Username</label>
                            <input type="text" name="username" class="form-control" id="username" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" name="email" class="form-control" id="email" required>
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" name="password" class="form-control" id="password"
                                placeholder="Biarkan kosong bila tidak ingin mengganti password!">
                        </div>
                        <div class="form-group">
                            <label for="namalengkap">Nama Lengkap</label>
                            <input type="text" name="namalengkap" class="form-control" id="namalengkap"
                                placeholder="Nama Lengkap" required>
                        </div>
                        <div class="form-group">
                            <label for="no_telp">No Telp</label>
                            <input type="number" name="no_telp" class="form-control" id="no_telp" required>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="alamat" class="form-control" id="alamat"
                                placeholder="Alamat" required>
                        </div>

                        <div class="form-group">
                            <input type="hidden" name="kecamatan_id" class="form-control" id="kecamatan_id" required>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="periode" class="form-control" id="periode" required>
                        </div>

                        <div class="form-group">
                            <input type="hidden" name="ketua" class="form-control" id="ketua" required>
                        </div>

                        <div class="form-group">
                            <input type="hidden"name="status"id="status">
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="legalitas" class="form-control" id="legalitas"
                                placeholder="Alamat" required>
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="kelurahan_id" class="form-control" id="kelurahan_id" required>
                            <input type="hidden" name="gedung" class="form-control" id="gedung" required>
                        </div>

                        <div class="form-group">
                            <label for="photo">Photo</label>
                            <input type="file" name="photo" class="form-control" id="photo">
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="jenis_keanggotaan" class="form-control" id="jenis_keanggotaan"
                                placeholder="Jenis Keanggotaan" required>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-warning">
                                <i class="bi bi-pencil-square m-1"></i>Edit</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
    </div>
    <div class="modal fade" id="modalMap" tabindex="-1" role="dialog" aria-labelledby="modalEditLabel" Add
        user="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Lokasi Spesifik</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="material-icons">x</i>
                    </button>
                </div>
                <form action="" method="post" id="formMap" enctype="multipart/form-data">
                    <div class="modal-body">
                        @csrf
                        <div id="maps">
                            <input id="lat" type="hidden"name="lat">
                            <input id="lng" type="hidden" name="lng">

                        </div>

                        <div class="form-group">
                            <h5>Apakah Anda ingin megubah lokasi dari Organisasi {{ $data->organisasi }} ?</h5>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-warning">
                                <i class="bi bi-pencil-square m-1"></i>Edit</button>
                        </div>
                </form>
            </div>
        </div>
    </div>
    </div>


    {{-- Modal Edit profile End --}}
    @push('script-modal')
        <script>
            $(document).on('click', '#edit', function() {
                let organisasi = $(this).data('organisasi')
                let alamat = $(this).data('alamat')
                let namalengkap = $(this).data('namalengkap')
                let no_telp = $(this).data('no_telp')
                let username = $(this).data('username')
                let email = $(this).data('email')
                let status = $(this).data('status')
                let legalitas = $(this).data('legalitas')
                let jenis_keanggotaan = $(this).data('jenis_keanggotaan')
                let kecamatan_id = $(this).data('kecamatan_id')
                let ketua = $(this).data('ketua')
                let periode = $(this).data('periode')
                let kelurahan_id = $(this).data('kelurahan_id')
                let gedung = $(this).data('gedung')




                $('.form-group #organisasi').val(organisasi)
                $('.form-group #alamat').val(alamat)
                $('.form-group #namalengkap').val(namalengkap)
                $('.form-group #no_telp').val(no_telp)
                $('.form-group #username').val(username)
                $('.form-group #email').val(email)
                $('.form-group #status').val(status)
                $('.form-group #legalitas').val(legalitas)
                $('.form-group #kecamatan_id').val(kecamatan_id)
                $('.form-group #jenis_keanggotaan').val(jenis_keanggotaan)
                $('.form-group #ketua').val(ketua)
                $('.form-group #periode').val(periode)
                $('.form-group #gedung').val(gedung)
                $('.form-group #kelurahan_id').val(kelurahan_id)

            });
        </script>
    @endpush

    {{-- Script map --}}
    <script>
        const lat = '<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/index.blade.php</b> on line <b>417</b><br />
<br />
<b>Warning</b>:  Attempt to read property "lat" on null in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/index.blade.php</b> on line <b>417</b><br />
';
        const lng = '<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/index.blade.php</b> on line <b>418</b><br />
<br />
<b>Warning</b>:  Attempt to read property "lng" on null in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/index.blade.php</b> on line <b>418</b><br />
';
        const name = '<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/index.blade.php</b> on line <b>419</b><br />
<br />
<b>Warning</b>:  Attempt to read property "organisasi" on null in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/index.blade.php</b> on line <b>419</b><br />
';


        if (lat == "") {
            const map = L.map('map').setView([-0.49539065097711565, 117.14380502709459], 13);
            const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);


            var markers = [];

            function onMapClick(e) {
                for (var i = 0; i < markers.length; i++) {
                    map.removeLayer(markers[i]);
                }

                // Membuat marker baru dan menambahkannya ke peta
                var newMarker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map).bindPopup('lokasi baru').openPopup();;

                // Menyimpan marker baru ke dalam array markers
                markers.push(newMarker);
                const lat = document.getElementById('lat');
                const lng = document.getElementById('lng');

                lat.value = `${e.latlng.lat}`;
                lng.value = `${e.latlng.lng}`;



            }

            map.on('click', onMapClick);

        } else {

            const map = L.map('map').setView([lat, lng], 17);
            var newMarker = L.marker([lat, lng]).addTo(map).bindPopup('lokasi ' + name).openPopup();
            const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);


            var markers = [];

            function onMapClick(e) {
                for (var i = 0; i < markers.length; i++) {
                    map.removeLayer(markers[i]);
                }

                // Membuat marker baru dan menambahkannya ke peta
                var newMarker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map).bindPopup('lokasi baru').openPopup();;

                // Menyimpan marker baru ke dalam array markers
                markers.push(newMarker);
                const lat = document.getElementById('lat');
                const lng = document.getElementById('lng');

                lat.value = `${e.latlng.lat}`;
                lng.value = `${e.latlng.lng}`;



            }

            map.on('click', onMapClick);
        }
    </script>
@endsection