@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 container  ">

        <div class="d-flex flex-column flex-lg-row justify-content-center">
            <div class="card p-5 shadow w-lg-25 flex-column flex-lg-row">
                <a href="#modalEdit3" id="edit" data-bs-toggle="modal" data-bs-target="#modalEdit3"
                    data-organisasi="{{ $data->organisasi }}"
                    data-alamat="{{ $data->alamat }}"data-kecamatan_id="{{ $data->kecamatan_id }}"
                    data-no_telp="{{ $data->no_telp }}" data-kelurahan_id="{{ $data->kelurahan_id }}"
                    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 }}"
                    onclick="$('#modalEdit3 #formEdit').attr('action', '{{ route('user.update', Crypt::encryptString($data->id)) }}')">
                    <div class="form-group " style="display:flex;flex-direction: column;align-items:center;">
                        <img class="photo img-profile form-control-static"
                            id="staticInput"src="{{ asset(asset('images') . '/' . $data->photo) }}"
                            style="height:250px; width:250px;" alt="">


                        <p style="color: #657080"> <i style="color: #657080"class="bi bi-pencil-square "></i>click untuk
                            ubah
                            gambar.</p>
                    </div>
                </a>

                <div class="card " style="margin-left: 20px">
                    <div class="">
                        <h4 class="card-title">Organisasi Olahraga</h4>
                        <div class="form-group">
                            <label for="disabledInput">Nama Organisasi Olahraga</label>
                            <p class="form-control-static" id="staticInput">{{ $data->club->name }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Cabang Olahraga</label>
                            <p class="form-control-static" id="staticInput">{{ $data->club->olahraga->name }}</p>
                        </div>
                        <div class="form-group">
                            <label for="disabledInput">Deskripsi Organisasi Olahraga</label>
                            @if ($data->club->deskripsi != '')
                                <p class="form-control-static" id="staticInput" style="max-width: 400px;">
                                    {{ $data->club->deskripsi }}</p>
                            @else
                                <div class="alert alert-info">
                                    Deskripsi Belum di masukan! <br>
                                    Masukan Deskripsi

                                </div>
                            @endif
                        </div>
                        <div>
                            <a href="#modalEditclub" id="editclub" data-bs-toggle="modal" data-bs-target="#modalEditclub"
                                data-olahraga_id="{{ $data->club->olahraga_id }}"
                                data-deskripsi="{{ $data->club->deskripsi }}" class="btn btn-success "
                                onclick="$('#modalEditclub #formEdit').attr('action', '{{ route('club.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>

        <div class="card  w-lg-50 shadow ml-3 ">

        </div>
        <div class="card mr-3 w-100">
            <div class="card-header">
                <h4 class="card-title center">Data Organisasi Olahraga</h4>
            </div>

            <div class="card-body  shadow w-100"style="overflow-x:auto;">

                <table class="w-100">
                    <tbody>
                        <tr>
                            <td>
                                <div>
                                    <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">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>
                            </td>
                            <td style=" vertical-align: text-top;">
                                <div>
                                    <div class="form-group" style="max-width: 300px;">
                                        <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">Email</label>
                                        <p class="form-control-static" id="staticInput">{{ $data->email }}</p>
                                    </div>

                                    <div class="form-group">
                                        <label for="disabledInput">Kecamatan</label>
                                        <p class="form-control-static" id="staticInput">{{ $kecamatan_id->name }}</p>
                                    </div>
                                    <div class="form-group">
                                        <label for="disabledInput">kelurahan</label>
                                        <p class="form-control-static" id="staticInput">{{ $kelurahan_id->name }}</p>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>






                <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-kelurahan_id="{{ $data->kelurahan_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 }}" 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>
    </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>
                        <label for="username">Username</label>
                        <div class="form-group">
                            <input type="text" name="username" class="form-control" id="username" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="text" 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">
                            <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="form-group">
                            <input type="hidden" name="photo" class="form-control" id="photo">
                        </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 photo profile End --}}
    <div class="modal fade" id="modalEdit3" 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 Photo</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">

                            <input type="hidden" name="organisasi" class="form-control" id="organisasi" 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="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="kecamatan_id" class="form-control" id="kecamatan_id">
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="kelurahan_id" class="form-control" id="kelurahan_id">
                        </div>
                        <div class="form-group">
                            <input type="hidden" name="namalengkap" class="form-control" id="namalengkap"
                                placeholder="Nama Lengkap" required>
                        </div>

                        <div class="form-group">

                            <input type="hidden" 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="status" class="form-control" id="status"
                                placeholder="Alamat" required>
                        </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="jenis_keanggotaan" class="form-control" id="jenis_keanggotaan">
                        </div>
                        <div class="form-group">
                            <input type="file" name="photo" class="form-control" id="photo">
                        </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 photo profile End --}}
    <div class="modal fade" id="modalEditclub" 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 Satuan Karya</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="olahraga_id">Cabang Olahraga</label>
                            <select name="olahraga_id" id="olahraga_id" class="form-control custom-select" required>
                                <option selected disabled>-Pilih Olahraga-</option>
                                @foreach ($olahraga as $item)
                                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="deskripsi">Deskripsi Satuan Karya</label>
                            <textarea class="form-control" id="deskripsi" name="deskripsi" rows="3"
                                placeholder="Masukan Deskripsi Satuan Karya" required></textarea>
                        </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 --}}
    <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>


    @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 kelurahan_id = $(this).data('kelurahan_id')
                let ketua = $(this).data('ketua')
                let periode = $(this).data('periode')

                console.log(periode);


                $('.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 #kelurahan_id').val(kelurahan_id)
                $('.form-group #jenis_keanggotaan').val(jenis_keanggotaan)
                $('.form-group #ketua').val(ketua)
                $('.form-group #periode').val(periode)

            });
        </script>
        <script>
            $(document).on('click', '#editclub', function() {
                let olahraga_id = $(this).data('olahraga_id')
                let deskripsi = $(this).data('deskripsi')


                $('.form-group #olahraga_id').val(olahraga_id)
                $('.form-group #deskripsi').val(deskripsi)

            });
        </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/club.blade.php</b> on line <b>502</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/club.blade.php</b> on line <b>502</b><br />
';
        const lng = '<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/club.blade.php</b> on line <b>503</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/club.blade.php</b> on line <b>503</b><br />
';
        const name = '<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/club.blade.php</b> on line <b>504</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/club.blade.php</b> on line <b>504</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