@extends('user/template')

@push('style')
<link rel="stylesheet" href="/map/leaflet.css" integrity="" crossorigin=""/>
<link rel="stylesheet" href="/map/leaflet-search.css" />
<style>
body {
    background-color: #D9D9D9;
    
}
.section-1 {
    font-family: "Poppins", sans-serif;
    color: black;
}
.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 .img-height {
    object-fit: cover;
}

/* responsive */
@media (max-width: 560px) {
    .section-1 .fs-header {
        font-size: 14px;
    }
    .section-1 .fs-text {
        font-size: 12px;
    }
    .section-1 .img-height {
        height: 150px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 20px;
    }
}

@media (min-width: 561px) and (max-width: 992px) {
    .section-1 .fs-header {
        font-size: 16px;
    }
    .section-1 .fs-text {
        font-size: 14px;
    }
    .section-1 .img-height {
        height: 200px;
        margin-bottom: 10px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 30px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .section-1 .fs-header {
        font-size: 18px;
    }
    .section-1 .fs-text {
        font-size: 16px;
    }
    .section-1 .img-height {
        height: 250px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 50px;
    }
}

@media (min-width: 1201px) {
    .section-1 .fs-header {
        font-size: 18px;
    }
    .section-1 .fs-text {
        font-size: 16px;
    }
    .section-1 .img-height {
        height: 250px;
    }
    .section-1 .galeri-2 {
        padding-bottom: 50px;
    }
}

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 .text-header {
    font-weight: 300;
    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: 280;
    color: #17a659;
}
.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;
}
/* responsive */
@media (max-width: 560px) {
    .card .text-header, .card .text-sedang {
        font-size: 10px;
    }
    .mt-map {
        margin-top: 10px;
    }
    .card .judul-card {
        font-size: 12px;
    }
    .card .text-bold {
        font-size: 10px;
    }
    .card .text-small, .card .alamat-card {
        font-size: 8px;
    }
    .card .map { height: 350px; z-index: 0;}
    .section-1 .text-header {
        font-size: 14px;
    }
    .section-1 .btn-submit {
        font-size: 11px;
    }
    .img-fluid {
        object-fit: cover;
        width: 100%;
        height: 300px;
    }
    .text-top {
        font-size: 12px;
    }

    .text-bottom {
        font-size: 12px;
    }
}

@media (min-width: 561px) and (max-width: 992px) {
    .card .text-header, .card .text-sedang {
        font-size: 12px;
    }
    .mt-map {
        margin-top: 20px;
    }
    .card .judul-card {
        font-size: 14px;
    }
    .card .text-bold {
        font-size: 12px;
    }
    .card .text-small, .card .alamat-card {
        font-size: 10px;
    }
    .card .map { height: 350px; z-index: 0;}
    .section-1 .text-header {
        font-size: 16px;
    }
    .section-1 .btn-submit {
        font-size: 14px;
    }
    .img-fluid {
        object-fit: cover;
        width: 100%;
        height: 400px;
    }
    .text-top {
        font-size: 14px;
    }

    .text-bottom {
        font-size: 14px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .card .card-body {padding-left: 5%; padding-right: 5%}
    .section-1 .card {
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .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: 100%; z-index: 0;}
    .section-1 .text-header {
        font-size: 18px;
    }
    .section-1 .btn-submit {
        font-size: 16px;
    }
    .img-fluid {
        object-fit: cover;
        width: 100%;
        height: 400px;
    }
    .text-top {
        font-size: 16px;
    }

    .text-bottom {
        font-size: 16px;
    }
}

@media (min-width: 1201px) {
    .card .card-body {padding-left: 5%; padding-right: 5%}
    .section-1 .card {
        margin-top: 10px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .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: 100%; z-index: 0; object-fit: cover;}
    .section-1 .text-header {
        font-size: 18px;
    }
    .section-1 .btn-submit {
        font-size: 18px;
    }
    .img-fluid {
        object-fit: cover;
        width: 100%;
        height: 400px;
    }
    .text-top {
        font-size: 16px;
    }

    .text-bottom {
        font-size: 16px;
    }
}

.text-top {
    color: #055e2f;
}

.text-bottom {
    margin-top: -20px;
}
</style>
<link rel="stylesheet" href="/assets/css/dashboard/footer.css">
@endpush

@section('content')

@push('header')
<div class="clearfix">
    <div class="float-start media d-flex align-items-center" onclick="showSidebar()">
        <!-- burger-btn d-block d-xl-none -->
        <div class="burger-btn d-block d-xl-none avatar me-3">
            <img src="{{ asset('storage/' . Auth::user()->image) }}" alt="" srcset="">
            <span class="avatar-status bg-success"></span>
        </div>
        <div class="burger-btn d-block d-xl-none name flex-grow-1">
            <h6 class="">{{ Auth::user()->nama }}</h6>
            <span class="text-xs">{{ Auth::user()->role == '1' ? 'Manajemen User' : 'User' }}</span>
        </div>
    </div>
    <div class="float-end">
        @include('user.notif.index')
        
    </div>
</div>
@endpush

<section class="section-1">
    <a href="javascript:void(0);" onclick="redirectBack()" style="color: black">
        <i class="bi bi-chevron-left"></i> back
    </a>
    <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-bold">Jenis Pohon</p>
                            <p class="text-header">
                                @foreach ($pohon->jenis_pohon as $key => $pohon_jenis_pohon)
                                {{ $pohon_jenis_pohon->nama }}  : {{ $pohon->getJumlahPohon($pohon_jenis_pohon->id) }}
                                @if ($key < count($pohon->jenis_pohon) - 1), <!-- Tambahkan koma jika bukan item terakhir -->
                                @endif
                            @endforeach
                            </p>
                        </div>
                        <div class="float-end">
                            <p class="text-bold">Kawasan</p>
                            <p class="text-header">{{ $pohon->kawasan->nama }}</p>
                        </div>
                    </div>
                </div>
                <div class="garis mb-3"></div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12 col-lg-6 rounded ">
                            <!-- Add the img-fluid class to make the image fill the column -->
                            {{-- @foreach ($dok_images as $dok_image)
                            <img src="{{ asset('storage/' . $dok_image->image) }}" alt="" class="img-fluid rounded">
                            @endforeach --}}
                            <div id="carouselExampleCaptions" class="carousel slide d-flex justify-content-center" data-bs-ride="carousel">
                                <div class="carousel-inner">
                                  @foreach ($dok_images as $key => $dok_image)
                                  <div class="carousel-item {{ $key == 0 ? 'active' : '' }}">
                                      <img src="{{ asset('storage/' . $dok_image->image) }}" class="d-block img-fluid" alt="...">
                                  </div>
                                  @endforeach
                                  
                                </div>
                                <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev">
                                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                  <span class="visually-hidden">Previous</span>
                                </a>
                                <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next">
                                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                  <span class="visually-hidden">Next</span>
                                </a>
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-6 mt-md-3 mt-map">
                            <!-- Set the height of the map container to 100% -->
                            <div id="map" class="mb-3 map" style="min-height: 400px;"></div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6" class="mt-2">
                            <!-- Set the height of the map container to 100% -->
                            <p class="text-top mt-3">Pelaksana :</p>
                            <div style="text-align: justify" class="text-bottom">{{ $pohon->user->nama }}</div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6" class="mt-2">
                            <!-- Set the height of the map container to 100% -->
                            <p class="text-top mt-3">Pengelola :</p>
                            <div style="text-align: justify" class="text-bottom">{{ $pohon->pengelola->nama }}</div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6" class="mt-2">
                            <!-- Set the height of the map container to 100% -->
                            <p class="text-top mt-3">Status Kawasan :</p>
                            <div style="text-align: justify" class="text-bottom">{{ $pohon->status_kawasan->nama }}</div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6" class="mt-2">
                            <!-- Set the height of the map container to 100% -->
                            <p class="text-top mt-3">Luas Kawasan :</p>
                            <div style="text-align: justify" class="text-bottom">{{ $pohon->luas }} Hektar</div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6">
                            <!-- Set the height of the map container to 100% -->
                            <p class="text-top mt-3">Umur Pohon :</p>
                            <div style="text-align: justify" class="text-bottom">{{ $pohon->umur_pohon }} Tahun</div>
                        </div>
                        <div class="col-lg-4 col-md-6 col-sm-6" class="mt-2">
                            <!-- Set the height of the map container to 100% -->
                            <p class="text-top mt-3">Koordinat :</p>
                            <div style="text-align: justify" class="text-bottom">{{ $pohon->koordinat }}</div>
                        </div>
                        <div class="d-grid gap-2 col-lg-4 col-md-6 col-sm-12 text-end mt-3">
                            <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>
    
</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

{{-- @include('user/master_data.pohon.form.tambah') --}}
@include('user.penanaman.edit')
@endsection

@push('script')
<script src="/map/leaflet.js" integrity="" crossorigin=""></script>
<script src="/map/leaflet-search.src.js"></script>

<script>
    function redirectBack() {
        window.history.back();
    }

    $('#jenis_pohon_id_edit').on('change', function() {
        var jenisPohonId = $(this).val();
        var listJumlahPohon = '';
        $.each(jenisPohonId, function(index, value) {
            var label = $('#jenis_pohon_id_edit option[value="'+value+'"]').text();
            //cek if input with name jumlah_pohon['+value+'] exist
            if ($('input[name="jumlah_pohon['+value+']"]').length) {
                listJumlahPohon += '<div class="form-group">'+
                                    '<label for="" class="label-jumlah-pohon">Jumlah Pohon '+label+'</label>'+
                                    '<input type="number" class="form-control input-jumlah-pohon" name="jumlah_pohon['+value+']" placeholder="Jumlah Pohon..." value="'+$('input[name="jumlah_pohon['+value+']"]').val()+'">'+
                                '</div>';
            } else {
                listJumlahPohon += '<div class="form-group">'+
                                    '<label for="" class="label-jumlah-pohon">Jumlah Pohon '+label+'</label>'+
                                    '<input type="number" class="form-control input-jumlah-pohon" name="jumlah_pohon['+value+']" placeholder="Jumlah Pohon..." value="1">'+
                                '</div>';
            }
            
        });
        if(listJumlahPohon == ""){
            listJumlahPohon = '<p>Silahkan Pilih Jenis Pohon</p>';
        }
        $('#list-jumlah-pohon').html(listJumlahPohon);
    });
</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