@extends('user/template')

@push('style')
<link rel="stylesheet" href="/map/leaflet.css"
integrity=""
crossorigin=""/>
<script src="/map/leaflet.js"
integrity=""
crossorigin=""></script>

<link rel="stylesheet" href="/map/leaflet-search.css" />
<style>
body {
    background-color: #D9D9D9;
}
.section-1 {
    font-family: "Poppins", sans-serif;
}
.humberger-line {
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  display: block;
  height: 2px;
  width: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
}
.section-1 .btn-submit {
    font-weight: 300;
    border-radius: 20px;
    height: 90%;
}
.section-1 ::placeholder {
    font-family: "Poppins", sans-serif;
    font-weight: 280;
    color: black;
}
.section-1 .input-group input {
    border-radius: 10px
}
.section-1 .input-group button {
    border-radius: 10px
}

.card .clearfix {margin-left: 3%; margin-right: 3%}
.card .card-body {padding-left: 5%; padding-right: 5%}
.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: 300;
    color: #055e2f;
}
.card .text-small {
    font-weight: 300;
    color: #17a659;
    margin: 0;
}
.card .alamat-card {
    font-weight: 300;
    color: #17a659;
}
.card .judul-card {
    font-weight: bold;
    margin: 0;
    color: #055e2f;
}
/* responsive */
@media (max-width: 560px) {
    .card .text-header, .card .text-sedang {
        font-size: 10px;
    }
    .card .judul-card {
        font-size: 12px;
    }
    .card .text-bold {
        font-size: 10px;
    }
    .card .text-small, .card .alamat-card {
        font-size: 8px;
    }
    .card .map-index { height: 250px; z-index: 0;}
    .section-1 .text-header {
        font-size: 14px;
    }
    .section-1 .btn-submit {
        font-size: 11px;
    }
}

@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: 12px;
    }
    .card .text-small, .card .alamat-card {
        font-size: 10px;
    }
    .card .map-index { height: 300px; z-index: 0;}
    .section-1 .text-header {
        font-size: 16px;
    }
    .section-1 .btn-submit {
        font-size: 14px;
    }
}

@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-index { height: 250px; z-index: 0;}
    .section-1 .text-header {
        font-size: 18px;
    }
    .section-1 .btn-submit {
        font-size: 16px;
    }
}

@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-index { height: 250px; z-index: 0;}
    .section-1 .text-header {
        font-size: 18px;
    }
    .section-1 .btn-submit {
        font-size: 18px;
    }
}
</style>
<link rel="stylesheet" href="/assets/css/dashboard/footer.css">

@endpush


@section('content')


<section class="section-1 mb-3">
    <div class="clearfix mb-0">
        <div class="float-start">
            <a href="/user-dashboard">
                <i class="bi bi-chevron-left" style="color: black"></i>
            </a>
        </div>
        <div class="float-end d-xl-none">
            <span class="humberger-line"></span>
            <span class="humberger-line"></span>
            <span class="humberger-line"></span>
        </div>
    </div>
</section>

<div class="row">
    
    <div class="col-12">
        <div class="card mb-3">
            <div class="card-header">
                <div class="clearfix">
                    <div class="float-start">
                        <p class="text-header">Jenis Pohon</p>
                        <p class="text-bold">
                            @foreach ($pohon->jenis_pohon as $key => $pohon_jenis_pohon)
                                {{ $pohon_jenis_pohon->nama }}
                                @if ($key < count($pohon->jenis_pohon) - 1), <!-- Tambahkan koma jika bukan item terakhir -->
                                @endif
                            @endforeach
                        </p>
                    </div>
                    <div class="float-end">
                        <p class="text-header">Kawasan</p>
                        <p class="text-bold">{{ $pohon->kawasan->nama }}</p>
                    </div>
                </div>
            </div>
            <div class="garis mb-3"></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 col-sm-12">
                        <p class="card-text text-small">Umur Pohon :</p>
                        <p class="card-text text-sedang">{{ $pohon->umur_pohon }} Tahun</p>
                        <p class="card-text text-small">Luas Kawasan :</p>
                        <p class="card-text text-sedang">{{ $pohon->luas }} Hektar</p>
                        <p class="card-text text-small">Status Kawasan :</p>
                        <p class="card-text text-sedang">{{ $pohon->status_kawasan->nama }}</p>
                        <p class="card-text text-small">Pelaksana :</p>
                        <p class="card-text text-sedang">{{ $pohon->user->nama }}</p>
                        <p class="card-text text-small">Pengelola :</p>
                        <p class="card-text text-sedang">{{ $pohon->pengelola->nama }}</p>
                        <p class="card-text text-small">Koordinat :</p>
                        <p class="card-text text-sedang">{{ $pohon->koordinat }}</p>
                    </div>
                    <div class="col-md-8 col-sm-12">
                        <div id="map" class="mb-3 map-index"></div>
                        <div class="d-grid gap-2 mt-3">
                            <button class="btn btn-success btn-submit" type="button" data-bs-toggle="modal" data-bs-target="#tambah-pohon">Tambah Data</button>
                            <button class="btn btn-warning btn-submit" type="button" data-bs-toggle="modal" data-bs-target="#edit-pohon">Edit Data</button>
                        </div>
                    </div>
                </div>
               
            </div>
        </div>
    </div>
</div>

@include('user/master_data.pohon.form.tambah')
@include('user/master_data.pohon.form.edit')
@endsection

@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="/scan">
                        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
                            <rect width="1" height="7" rx="0.5" fill="white"/>
                            <rect x="7" width="1" height="7" rx="0.5" transform="rotate(90 7 0)" fill="white"/>
                            <rect x="36" width="1" height="7" rx="0.5" transform="rotate(90 36 0)" fill="white"/>
                            <rect x="36" y="7" width="1" height="7" rx="0.5" transform="rotate(-180 36 7)" fill="white"/>
                            <rect x="36" y="36" width="1" height="7" rx="0.5" transform="rotate(-180 36 36)" fill="white"/>
                            <rect x="29" y="36" width="1" height="7" rx="0.5" transform="rotate(-90 29 36)" fill="white"/>
                            <rect y="36" width="1" height="7" rx="0.5" transform="rotate(-90 0 36)" fill="white"/>
                            <rect y="29" width="1" height="7" rx="0.5" fill="white"/>
                        </svg>
                    </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

@push('script')
<script src="/map/leaflet-search.src.js"></script>
<script>
    function redirectBack() {
        window.history.back();
    }
</script>


<script>
var data = {"lokasi":[{{ $pohon->koordinat }}]};

var mapindex = new L.Map('map', {zoom: 16, 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>


@endpush