@extends('template')

@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
    <div class="container p-lg-5 p-1 pt-5 h-screen ">
        <div class="card mt-5  center p-3 box">

            <h1 class="m-lg-3 m-0 text-center  text-green-dark w-100 mb-5">DATA ORGANISASI</h1>
            <div class="display-row align-items-center align-items-lg-start column-sm">

                <table class="card box p-3 p-2 m-lg-3 shadow w-100 table table-striped">
                    <tbody>
                        <tr class="m-lg-3">
                            <td>
                                <h6 class="text-green mr-lg-5">Nama Organisasi</h6>
                            </td>
                            <td>
                                <h6 class="text-green mr-lg-3">:</h6>
                            </td>
                            <td>
                                <h6 class="text-green-dark">{{ $data->organisasi }}</h6>
                            </td>
                        </tr>
                        <tr class="m-lg-3">
                            <td>
                                <h6 class="text-green mr-lg-5">Ketua Organisasi</h6>
                            </td>
                            <td>
                                <h6 class="text-green mr-lg-3">:</h6>
                            </td>
                            <td>
                                <h6 class="text-green-dark">{{ $data->ketua }}</h6>
                            </td>
                        </tr>
                        <tr class="m-lg-3">
                            <td>
                                <h6 class="text-green mr-lg-5">Alamat</h6>
                            </td>
                            <td>
                                <h6 class="text-green mr-lg-3">:</h6>
                            </td>
                            <td>
                                <h6 class="text-green-dark">{{ $data->alamat }}</h6>
                            </td>
                        </tr>
                        <tr class="m-lg-3">
                            <td>
                                <h6 class="text-green mr-5">Kontak</h6>
                            </td>
                            <td>
                                <h6 class="text-green mr-lg-3">:</h6>
                            </td>
                            <td>
                                <h6 class="text-green-dark">{{ $data->no_telp }}</h6>
                            </td>
                        </tr>
                        <tr class="m-lg-3">
                            <td>
                                <h6 class="text-green mr-5">Jenis Organisasi</h6>
                            </td>
                            <td>
                                <h6 class="text-green mr-3">:</h6>
                            </td>
                            <td>
                                <h6 class="text-green-dark">{{ $data->jenis_keanggotaan }}</h6>
                            </td>
                        </tr>
                    </tbody>
                </table>

                <div>
                    <div class="card  m-3 p-3 shadow box" style="display:flex;flex-direction: column;align-items:center;">
                        <h4 class="text-green-dark">Profile Picture</h4>
                        <img class="photo form-control-static" id="staticInput"
                            src="{{ asset(asset('images') . '/' . $data->photo) }}" alt="">
                    </div>
                    <div class="card  m-3 p-3 shadow box">
                        <div id="map" style="width: 200px; height: 200px;"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <script>
        var lat = '<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/detail.blade.php</b> on line <b>92</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/detail.blade.php</b> on line <b>92</b><br />
';
        var lng = '<br />
<b>Warning</b>:  Undefined variable $data in <b>/home/aplikasiposinfo/public_html/dispora.samarinda.app/resources/views/organisasi/detail.blade.php</b> on line <b>93</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/detail.blade.php</b> on line <b>93</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);

        } else {
            const map = L.map('map').setView([lat, lng], 17);
            var newMarker = L.marker([lat, lng]).addTo(map);
            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);
        }
    </script>
@endsection