@extends('user/template')

@push('style')
<link rel="stylesheet" href="/map/leaflet.css" integrity="" crossorigin=""/>
<link rel="stylesheet" href="/map/leaflet-search.css" />
<script src="/map/leaflet.js" integrity="" crossorigin=""></script>
<script src="/map/leaflet-search.src.js"></script>
<link rel="stylesheet" href="/assets/css/dashboard/footer.css">
<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;
}
.text-sedang {}
/* 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: 250px; z-index: 0;}
    .card .card-img-top {
        height: 200px;
    }
}
</style>
@endpush

@section('content')
    <!-- Hoverable rows start -->
<section class="container">
    <div class="row">
        @forelse ($data_pohons as $data_pohon)
        <div class="col-sm-12 col-md-6">
            <div class="card mb-3">
                {{-- <img src="{{ asset('storage/' . $data_pohon->jenis_pohon->image) }}" class="card-img-top"> --}}
                <div class="card-header">
                    <div class="row">
                        <div class="col">
                            <p class="text-header">Pelaksana</p>
                            <p class="text-bold">{{ $data_pohon->user->nama }} ({{ $data_pohon->user->email }})</p>
                        </div>
                        <div class="col text-end">
                            <p class="text-header">Pengelola</p>
                            <p class="text-bold">{{ $data_pohon->pengelola->nama }}</p>
                        </div>
                        {{-- <div class="col text-end">
                            <p class="text-header">Luas Kawasan</p>
                            <p class="text-bold">{{ $data_pohon->luas }} Hektar</p>
                        </div> --}}
                    </div>
                </div>
                <div class="garis mb-3"></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 mb-2">
                            <p class="card-text text-small">Kawasan :</p>
                            <p class="card-text text-sedang">{{ $data_pohon->kawasan->nama }}</p>
                            <p class="card-text text-small">Status Kawasan :</p>
                            <p class="card-text text-sedang">{{ $data_pohon->status_kawasan->nama }}</p>
                            <p class="card-text text-small">Luas Kawasan :</p>
                            <p class="card-text text-sedang">{{ $data_pohon->luas }} Hektar</p>
                        </div>
                        <div class="col-6 mb-2 text-end">
                            {{-- <p class="card-text text-small">Pengelola :</p>
                            <p class="card-text text-sedang">{{ $data_pohon->pengelola->nama }}</p> --}}
                            <p class="card-text text-small">Pohon :</p>
                            <p class="card-text text-sedang">
                                @foreach ($data_pohon->jenis_pohon as $jenis_pohon)
                                -{{ $jenis_pohon->nama }} : {{ $data_pohon->getJumlahPohon($jenis_pohon->id) }} <br>
                                @endforeach
                            </p>
                            <p class="card-text text-small">Umur Pohon :</p>
                            <p class="card-text text-sedang">{{ $data_pohon->umur_pohon }} Tahun</p>
                        </div>
                    </div>
                    <div id="map_{{ $data_pohon->id }}" class="mb-3 map"></div>
                    <script>
                        // // Di dalam script JavaScript untuk setiap Data Pohon
                        // const map_{{ $data_pohon->id }} = L.map('map_{{ $data_pohon->id }}').setView([{{ $data_pohon->koordinat }}], 12);
                        
                        // // 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_{{ $data_pohon->id }});
                        
                        // // custom marker
                        // var greenIcon = L.icon({
                        //     iconUrl: '/map/marker.png',
                        //     iconSize:     [32, 50], // size of the icon
                        //     shadowSize:   [50, 64], // size of the shadow
                        //     iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
                        //     shadowAnchor: [4, 62],  // the same for the shadow
                        //     popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
                        // });

                        // // Menambahkan marker
                        // let marker_{{ $data_pohon->id }} = L.marker([{{ $data_pohon->koordinat }}], {icon: greenIcon}).addTo(map_{{ $data_pohon->id }});

                        // marker_{{ $data_pohon->id }}.bindPopup("Koordinat : {{ $data_pohon->koordinat }}").openPopup();

                        var data = {"lokasi":[{{ $data_pohon->koordinat }}]};

                        var mapindex = new L.Map('map_{{ $data_pohon->id }}', {zoom: 15, center: new L.latLng(data.lokasi) });	//set center from first location

                        mapindex.addLayer(new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));	//base layer

                        var markersLayer = new L.LayerGroup();	//layer contain searched elements

                        mapindex.addLayer(markersLayer);

                        var controlSearch = new L.Control.Search({
                        position:'topright',		
                        layer: markersLayer,
                        initial: false,
                        zoom: 19,
                        marker: false
                        });

                        mapindex.addControl( controlSearch );

                        var lokasi = data.lokasi;		//position found
                        var marker_index = new L.Marker(new L.latLng(lokasi), {title: lokasi} );//se property searched
                        marker_index.bindPopup('Koordinat : '+ lokasi );
                        markersLayer.addLayer(marker_index);
                    </script>
                    <div class="text-end">
                        <a href="/penanaman/{{ $data_pohon->id }}"
                            class="btn btn-light btn-sm">
                            <i class="fas fa-eye" title="Detail"></i>
                        </a>
                        <form action="/penanaman/hapus/{{ $data_pohon->id }}" method="POST"
                            class="d-inline">
                            @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>
        @empty
            <center><h3>Belum ada data...</h3></center>
        @endforelse
    </div>
    <div class="mt-2 p-2">{{ $data_pohons->links() }}</div>
</section>

@push('footer')
<footer class="bg-white text-white">
    <div class="container">
        <div class="row">
            <a href="/dashboard-user" class="col-4 text-center">
                <i class="icon bi bi-house"></i>
                <p>Home</p>
            </a>
            <div class="col-4 text-center">
                <div class="footer-circle-content">
                    <a href="/user-dashboard">
                        <i class="circle-icon bi bi-plus"></i>
                    </a>
                </div>
            </div>
            <a href="/pilih-profil-pohon" class="col-4 text-center">
                <i class="icon bi bi-tree"></i> 
                <p>Profil Pohon</p>
            </a>
        </div>
    </div>
</footer>
@endpush

@endsection