@extends('layouts.app')
@section('content')
    <section>
        <div class="gift-head">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-4">
                        <div class="box-flower active">
                            <p> <img src="{{ asset('app-assets/images/investment.svg') }}" alt=""> Contribute with our
                                ongoing project</p>
                        </div>
                    </div>
                    <div class="col-md-3 my-2 my-sm-0">
                        <a href="individual-gift.html">
                            <div class="box-flower">
                                <p> <img src="{{ asset('app-assets/images/flower.svg') }}" alt=""> Gift a tree </p>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-5 text-sm-right text-center mb-3 mb-sm-0">
                        <a href="howitworks-individual.html">
                            <button type="button" class="btn work-btn ">How it works?</button>
                        </a>

                        <a href="{{ url('projects/visit/' . $project->slug) }}">
                            <button type="button" class="btn visit-btn new-visit ml-2">Visit / Start Planting</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="position-relative">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 pl-0 pr-0">
                    <div class="map" id="map"></div>

                    <div class="Filled-box">
                        <div class="d-flex">
                            <p><img src="{{ asset('app-assets/images/check.svg') }}" class="check-img" alt=""></p>
                            <p> 70% Plantation already finished </p>
                        </div>
                        <div class="d-flex mt-3">
                            <p><img src="{{ asset('app-assets/images/check.svg') }}" class="check-img" alt=""></p>
                            <p>3.5 out of 5 M Planted successfully </p>
                        </div>

                        <div class="d-flex justify-content-between mt-2">
                            <div class="d-flex align-items-center ">
                                <img src="{{ asset('app-assets/images/green-img.svg') }}" class="tree-small" alt="">
                                <p>Filled</p>
                            </div>

                            <div class="d-flex align-items-center ">
                                <img src="{{ asset('app-assets/images/white-img.svg') }}" class="tree-small" alt="">
                                <p>Vacant</p>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between mt-2">
                            <div class="d-flex align-items-center ">
                                <img src="{{ asset('app-assets/images/orange-img.svg') }}" class="tree-small"
                                    alt="">
                                <p>Maintenance</p>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="py-4 py-sm-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="top-text d-block d-sm-flex text-center justify-content-center align-items-center">
                        <h1>{{ $project->name }}</h1>
                        <span
                            class="badge badge-pill badge-primary project-btn ml-4 mt-2 mt-sm-0">{{ $project->status ? ucfirst($project->status) : '' }}</span>
                    </div>
                    <div class="text-center location-text mt-2">
                        <p>Trees planted: 670/{{ $project->capacity }} | Project location:
                            <span>{{ isset($project->country) ? $project->country->name : '' }}</span>
                        </p>
                    </div>
                </div>
            </div>

            <div class="row mt-3 mt-3 mt-sm-5 align-items-center">
                <div class="col-md-6 mb-3 mb-sm-0">
                    <div class="over-viewbox">
                        <h4>{{ $project->title1 }}</h4>
                        <p>{!! $project->description1 ? $project->description1 : '' !!}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    @if ($project->right_image)
                        <img src="{{ $project->right_image }}" alt="">
                    @else
                        <img src="{{ asset('app-assets/images/over-tree.png') }}" alt="">
                    @endif
                </div>
            </div>

            <div class="row align-items-center mt-3">
                <div class="col-md-6 mb-3 mb-sm-0">
                    @if ($project->left_image)
                        <img src="{{ $project->left_image }}" alt="">
                    @else
                        <img src="{{ asset('app-assets/images/site-left.png') }}" alt="">
                    @endif
                </div>
                <div class="col-md-6">
                    <div class="over-viewbox">
                        <h3>{{ $project->title2 }}</h3>
                        <p>{!! $project->description2 ? $project->description2 : '' !!}</p>

                        <div class="text-right">
                            <img src="{{ asset('app-assets/images/seeds.png') }}" alt="">
                        </div>
                    </div>
                </div>
            </div>

            <div class="row align-items-center mt-4">
                <div class="col-md-6 mb-3 mb-sm-0">
                    <div class="over-viewbox">
                        <h3>{{ $project->title3 }}</h3>
                        <p>{!! $project->description3 ? $project->description3 : '' !!}</p>

                    </div>
                </div>

                <div class="col-md-6">
                    @if ($project->back_image)
                        <img src="{{ $project->back_image }}" alt="">
                    @else
                        <img src="{{ asset('app-assets/images/challanges.png') }}" alt="">
                    @endif
                </div>

            </div>

        </div>
    </section>
    @include('partials.subscribe-news-letter')
@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