@extends('layouts.master')

@section('title', $page->title . ' | ' . setting('site.title'))

@push('custom-css')
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link href="{{ asset('css/programs.css') }}" rel="stylesheet">
@endpush

@section('content')
    <!--begin::Content-->

    <div class="main-container">
        <section class="banner-container ">
            <div class="banner-title ">
                <div style="line-height: 1.1;">
                    <span style="background-color: #86A34D;font-weight: bold; margin-bottom: 8px;font-size: 64px;">{!! $page->title !!}</span>
                </div>
            </div>
            <div style="height: 400px;" class="banner-image">
                <img src="{{ Voyager::image($page->image) }}" decoding="async" loading="lazy" alt="" style="width: 100%; height: 100%; object-fit: cover; object-position: center;" rel="preload" as="image">
            </div>
        </section>

        <section class="container-fluid" style="background-color: #F0F9DC;padding-top: 50px">
            <div class="row">
                <div class="col-md-10 m-auto ">
                    <div class="row align-items-stretch">
                        <div class="col-md-12 d-flex flex-column justify-content-center text-center">
                            <div style="color: #BA744A;font-size: 34px;text-align: center;font-weight: bold;">{!! $page->title !!}</div>

                        </div>
                        <!-- Rigt column with text + image -->
                        <div class="col-md-12 d-flex">
                            <div class="mt-3">
                                <div style="color:#FF5757;line-height: 1.3;" class="mb-3">
                                    <div style="font-size: 20px;color: #232323 ;text-align: center;"> {!! $page->body !!}</div>
                                </div>

                            </div>
                        </div>
                        <!-- Right column with long text -->
                    </div>
                </div>
            </div>
        </section>

        <!-- Our programs Start -->
        <div class="our-pricing-silver">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <!-- Pricing Item Start -->
                        <div class="pricing-item-silver wow fadeInUp">
                            <!-- Pricing Item Box Start -->
                            <div class="pricing-item-box-silver">
                                {{-- Map Code --}}
                                <div class="main-container" id="render-page">
                                    <div class="body-container">
                                        <section class="container-fluid " style="background-color: #FFF7E6; padding-bottom:50px;">
                                            <div class="row">
                                                <div class="col-md-11 col-lg-9 col-xl-9 m-auto">
                                                    <div style="background: white;border-radius: 15px;border:2px solid #BA744A">
                                                        <div class="row">
                                                            <div class="col-md-12 col-lg-9 d-flex">
                                                                <div class="map_2" id="map_2" style="
                                                                    width: 100%;
                                                                    border-top-left-radius: 15px;
                                                                    border-bottom-left-radius: 15px;
                                                                    display: flex;
                                                                    align-items: center;
                                                                    justify-content: center;
                                                                    min-height: 450px;
                                                                    background:white !important;
                                                                ">
                                                                    <!-- Map will be loaded here -->
                                                                    <div class="map-loader" id="loader1"></div>
                                                                </div>
                                                            </div>
                                                            <div class="col-md-12 col-lg-3 d-flex ">
                                                                <div class="w-100">
                                                                    <div class="m-3 d-flex justify-content-between" style="font-size: 24px;font-weight: bold;color: #86A34D;line-height: 1.2;">
                                                                        <div>
                                                                            Our
                                                                            <div>Programs</div>
                                                                        </div>
                                                                        <i onclick="loadDatabyProgram('Agroforestry')" class="fa fa-close pointer" id="close-icon" style="display: none;"></i>
                                                                    </div>
                                                                    <div class="m-3 py-1 d-flex align-items-center pointer" style="border-bottom:2px solid #BA744A;" onclick="renderDistrictMarkersByProgramChanges('Agroforestry')">
                                                                        <div class="icon">
                                                                            <img src="{{ asset('storage/programs/ICON_1.png') }}" alt="" width="35" height="35">
                                                                        </div>
                                                                        <div class="text-label w-100 ml-1 tw-xs:fs-14 tw-md:fs-18" style="color: #09383A;font-weight: bolder;">Agroforestry</div>
                                                                    </div>
                                                                    <div class="m-3 py-1 d-flex align-items-center pointer" style="border-bottom:2px solid #BA744A;" onclick="renderDistrictMarkersByProgramChanges('Forest Protection and Restoration')">
                                                                        <img src="{{ asset('storage/programs/ICON_2.png') }}" width="35" height="35">
                                                                        <div class="text-label w-100 ml-1 tw-xs:fs-14 tw-md:fs-18" style="color: #09383A;font-weight: bolder;">Forest Protection <div>and Restoration</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="m-3 py-1 d-flex align-items-center pointer" style="border-bottom:2px solid #BA744A;" onclick="renderDistrictMarkersByProgramChanges('Human-Elephant Conflict Prevention')">
                                                                        <img src="{{ asset('storage/programs/ICON_3.png') }}" width="35" height="35">
                                                                        <div class="text-label w-100 ml-1 tw-xs:fs-14 tw-md:fs-18" style="color: #09383A;font-weight: bolder;">Human-Elephant <div>Conflict Prevention</div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="m-3 py-1 d-flex align-items-center pointer" style="border-bottom:2px solid #BA744A;" onclick="renderDistrictMarkersByProgramChanges('Biodiversity Hub')">
                                                                        <img src="{{ asset('storage/programs/ICON_4.png') }}" width="35" height="35">
                                                                        <div class="text-label w-100 ml-1 tw-xs:fs-14 tw-md:fs-18" style="color: #09383A;font-weight: bolder;">Urban Biodiversity</div>
                                                                    </div>
                                                                    <div class="m-3 py-1 d-flex align-items-center pointer" style="border-bottom:2px solid #BA744A;" onclick="renderDistrictMarkersByProgramChanges('Climate Change and Ecology Education')">
                                                                        <img src="{{ asset('storage/programs/ICON_5.png') }}" width="35" height="35">
                                                                        <div class="text-label w-100 ml-1 tw-xs:fs-14 tw-md:fs-18" style="color: #09383A;font-weight: bolder;">Climate Change <div>and Ecology Education</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </section>
                                    </div>
                                </div>

                            </div>
                            <!-- Pricing Item Box End -->
                        </div>
                        <!-- Pricing Item End -->
                    </div>
                </div>
            </div>
        </div>
        <!-- Our programs End -->

    </div>
    <!--end::Content-->
@endsection

@push('custom-js-scripts')
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/shpjs@6.2.0/dist/shp.min.js"></script>
<script src="https://unpkg.com/@turf/turf@6.5.0/turf.min.js"></script>

@include('partials.programs-map-script')
@endpush