@extends('admin/template')

@push('style')
<link rel="stylesheet" href="/map/leaflet.css"
integrity=""
crossorigin=""/>
<script src="/map/leaflet.js"
integrity=""
crossorigin=""></script>
<script src="https://unpkg.com/leaflet-kmz@1.0.9/dist/leaflet-kmz-src.js"></script>
<style>
.card .text-header {
    font-weight: 280;
    color: #055e2f;
    margin: 0;
}
.card .text-bold {
    font-weight: bold;
    color: #055e2f;
    margin: 0;
}
.card .garis {
    border-top: 1px solid #8b8a8a;
    margin: 0 auto;
    width: 90%;
}
.card .text-sedang {
    font-weight: 290;
    color: #055e2f;
}
.card .text-small {
    font-weight: 270;
    color: #17a659;
    margin: 0;
}
.card .alamat-card {
    font-weight: 270;
    color: #17a659;
}
.card .judul-card {
    font-weight: bold;
    margin: 0;
    color: #055e2f;
}
.card .card-img-top {
    object-fit: cover;
}
/* responsive */
@media (max-width: 560px) {
    .card .text-header, .card .text-sedang {
        font-size: 10px;
    }
    .card .judul-card {
        font-size: 10px;
    }
    .card .text-bold {
        font-size: 12px;
    }
    .card .text-small, .card .alamat-card {
        font-size: 10px;
    }
    .card .map { height: 250px; z-index: 0;}
    .card .card-img-top {
        height: 150px;
    }
}

@media (min-width: 561px) and (max-width: 992px) {
    .card .text-header, .card .text-sedang {
        font-size: 12px;
    }
    .card .judul-card {
        font-size: 14px;
    }
    .card .text-bold {
        font-size: 14px;
    }
    .card .text-small, .card .alamat-card {
        font-size: 12px;
    }
    .card .map { height: 250px; z-index: 0;}
    .card .card-img-top {
        height: 200px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .card .text-header, .card .text-sedang {
        font-size: 14px;
    }
    .card .judul-card {
        font-size: 16px;
    }
    .card .text-bold {
        font-size: 14px;
    }
    .card .text-small, .card .alamat-card {
        font-size: 12px;
    }
    .card .map { height: 250px; z-index: 0;}
    .card .card-img-top {
        height: 200px;
    }
}

@media (min-width: 1201px) {
    .card .text-header, .card .text-sedang {
        font-size: 14px;
    }
    .card .judul-card {
        font-size: 16px;
    }
    .card .text-bold {
        font-size: 14px;
    }
    .card .text-small, .card .alamat-card {
        font-size: 12px;
    }
    .card .map { height: 300px; z-index: 0;}
    .card .card-img-top {
        height: 200px;
    }
}
</style>
@endpush

@section('content')
    <!-- Hoverable rows start -->
<section class="container">
    <div class="page-heading">
        <h5>Data KMZ</h5>
        <a href="/kmz/create" class="btn btn-primary btn-sm" title="Tambah">
            <i class="fas fa-plus"></i> Tambah Data
        </a>
    </div> 

    <div class="row">
        @foreach ($kmzs as $kmz)
        <div class="col-sm-12 col-md-6">
            <div class="card mb-3">
                <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <p class="text-header">Pengelola :</p>
                            <p class="text-bold">{{ $kmz->pengelola->nama }}</p>
                        </div>
                    </div>
                </div>
                <div class="garis mb-3"></div>
                <div class="card-body">
                    <div id="map_{{ $kmz->id }}" class="mb-3 map"></div>
                    <script>
                        // Di dalam script JavaScript untuk setiap Data Pohon
                        // const map_{{ $kmz->id }} = L.map('map_{{ $kmz->id }}').setView(new L.LatLng(-0.5014662,117.0911324), 10);
                        const map_{{ $kmz->id }} = L.map('map_{{ $kmz->id }}').setView(new L.LatLng(43.5978, 12.7059), 5);
                        
                        // Menambahkan peta
                        L.tileLayer('https://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}',{
                            maxZoom: 20,
                            subdomains:['mt0','mt1','mt2','mt3']
                        }).addTo(map_{{ $kmz->id }});

                        var OpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
                            maxZoom: 20,
                            opacity: 0.90
                            });
                            OpenTopoMap.addTo(map_{{ $kmz->id }});

                        var kmz = L.kmzLayer().addTo(map_{{ $kmz->id }});
                        // kmz.on('load', function(e) {
                        //     control.addOverlay(e.layer, e.name);
                        //     // e.layer.addTo(map);
                        // });
                        
                        // kmz.load({{ $kmz->kmz}});
                        kmz.load("{{ asset('storage/' . $kmz->kmz) }}");

                        var control = L.control.layers(null, null, { collapsed:false }).addTo(map_{{ $kmz->id }});
                    </script>
                    <div class="text-end">
                        <a href="/kmz/{{ $kmz->id }}/edit"
                            class="btn btn-warning btn-sm">
                            <i class="fas fa-edit" title="Edit"></i>
                        </a>
                        <form action="/kmz/{{ $kmz->id }}" method="POST"
                            class="d-inline">
                            @method('delete')
                            @csrf
                            <button type="submit" class="btn border-0 btn-danger btn-sm"
                                title="Hapus" id="btn-delete">
                                <i class="fas fa-trash"></i>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
    <div class="mt-2 p-2">{{ $kmzs->links() }}</div>
</section>

@endsection