@extends('layouts.app')
@section('content')
    @include('partials.gift-head')
    <section class="pb-sm-5 pb-4 gift-sec ">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item active" aria-current="page">Home</li>
                            <li class="breadcrumb-item" aria-current="page"> <a href="##">Individual</a></li>
                        </ol>
                    </nav>
                </div>
            </div>

            <div class="row align-items-center">
                <div class="col-md-6 col-9">
                    <div class="top-text">
                        <h1>Individual project</h1>
                        <h6>Take an overview of a project and start planing</h6>
                    </div>
                </div>
                <div class="col-md-6 col-3">
                    <div class="border-tab">
                        <div class="active"></div>
                        <div class="active"></div>
                    </div>
                    <p class="pages-number">02/02</p>
                </div>
            </div>
        </div>
    </section>
    <section class="position-relative">
        <div class="map" id="map"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    <div class="position-selection">
                        <div class="position-contentbox">
                            <p>Where do you want to plant your tree(s). Please select position:</p>
                            <div class="mt-2 mt-sm-3">
                                <div class="selction-tree">
                                    <div class="selction-treeimg">
                                        <img src="{{ asset('app-assets/images/gray-tree.svg') }}" alt="">
                                    </div>
                                    <p>Filled</p>
                                </div>

                                <div class="selction-tree">
                                    <div class="selction-treeimg">
                                        <img src="{{ asset('app-assets/images/orange-img.svg') }}" alt="">
                                    </div>
                                    <p>Maintenance</p>
                                </div>

                                <div class="selction-tree">
                                    <div class="selction-treeimg">
                                    </div>
                                    <p>Vacant</p>
                                </div>

                                <div class="selction-tree">
                                    <div class="selction-treeimg">
                                        <img src="{{ asset('app-assets/images/green-img.svg') }}" alt="">
                                    </div>
                                    <p>Selected</p>
                                </div>
                            </div>
                        </div>

                        <a href="individual-cart.html">
                            <button type="button" class="btn btn-login mt-3 px-4">
                                Click to Start Planting <br>
                                <span>You have {{ $cart->quantity }} trees in your cart</span>
                            </button>
                        </a>

                        <button type="button" class="btn continue-btn btn-block mt-3"
                            onclick="window.history.back();">Back</button>

                    </div>


                </div>
            </div>
        </div>

    </section>
@endsection
@section('scripts')
    @include('partials.map-scripts')
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
    </script>
    <script>
        function initMap() {
            // map options
            var options = {
                center: {
                    lng: 50.0787,
                    lat: 26.1767,
                },
                zoom: 18,
                mapTypeId: "satellite",
            };

            var map = new google.maps.Map(document.getElementById("map"), options);

            //Add marker
            var markers = ;

            // Loop through markers
            var gmarkers = [];
            for (var i = 0; i < markers.length; i++) {
                gmarkers.push(addMarker(markers[i]));
            }

            //Add MArker function
            function addMarker(props) {
                var marker = new google.maps.Marker({
                    position: props,
                    map: map,
                });

                if (props.image) {
                    marker.setIcon(props.image);
                }

                //Check content
                var infoWindow = new google.maps.InfoWindow({
                    content: props.content,
                    maxWidth: 400,
                });
                marker.addListener("click", function() {
                    infoWindow.open(map, marker);
                });

                const projectBorderCoordinates = ;

                // Construct the Polyline.
                const linePath = new google.maps.Polyline({
                    path: projectBorderCoordinates,
                    geodesic: true,
                    strokeColor: "white",
                    strokeOpacity: 2.0,
                    strokeWeight: 2,
                });

                linePath.setMap(map);

                return marker;
            }
        }
        google.maps.event.addDomListener(window, "load", initMap);
    </script>
@endsection