@extends('layouts.main')

@section('container')
    
    <div class="site-preloader-wrap">
        <div class="spinner"></div>
    </div><!-- Preloader -->
    
    <header id="header" class="header-section transparent">
        <div class="container">
            <nav class="navbar ">
                <a href="{{ url('/') }}" class="navbar-brand">
                    <img class="logo-light" src="{{ asset('saaskit/logo/logo_sikompas_light.png') }}" alt="Sikompas" height="50">
                    <img class="logo-dark" src="{{ asset('saaskit/logo/logo_sikompas_dark.png') }}" alt="Sikompas" height="50">
                </a>
                <div class="d-flex menu-wrap">
                   <div id="mainmenu" class="mainmenu">
                       @include('menu')
                   </div>
                    <div class="header-right">
                         <a class="menu-btn default-btn btn-white" href="{{ url('/login') }}">Login <span></span></a>
                    </div>
                </div>
            </nav>
        </div>
    </header><!--.header-section -->
    
    <section class="hero-section d-flex align-items-center">
       <div class="anim-elements">
            <div class="anim-element"></div>
            <div class="anim-element"></div>
            <div class="anim-element"></div>
            <div class="anim-element"></div>
            <div class="anim-element"></div>
        </div>
        <div class="container">
            <div class="hero-wrap row">
                <div class="col-md-6">
                    <div class="hero-content">
                        <span>Selamat datang di Sikompas</span>
                        <h2>Sistem Informasi Kelompok Pengelola Sampah Kulon Progo</h2>
                        {{-- <p>Save time while using the fastest theme builder in WordPress. Use inspirelite<br>  beautiful intuitive interface to create any type of form</p> --}}
                        <a href="#mulai" class="default-btn">Get Started Now <span></span></a>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="hero-content d-none d-md-block">
                        {{-- <img src="{{ asset('saaskit/img/mekanisme bs.png') }}" alt="sikompas"> --}}
                         <div class="kotak">
                            <span style="--i:1;"><img src="{{ optional($gambar_header)->gbr1 ? asset('storage/' . $gambar_header->gbr1) : asset('noImage/noImage.png') }}"></span>
                            <span style="--i:2;"><img src="{{ optional($gambar_header)->gbr2 ? asset('storage/' . $gambar_header->gbr2) : asset('noImage/noImage.png') }}"></span>
                            <span style="--i:3;"><img src="{{ optional($gambar_header)->gbr3 ? asset('storage/' . $gambar_header->gbr3) : asset('noImage/noImage.png') }}"></span>
                            <span style="--i:4;"><img src="{{ optional($gambar_header)->gbr4 ? asset('storage/' . $gambar_header->gbr4) : asset('noImage/noImage.png') }}"></span>
                            <span style="--i:5;"><img src="{{ optional($gambar_header)->gbr5 ? asset('storage/' . $gambar_header->gbr5) : asset('noImage/noImage.png') }}"></span>
                            <span style="--i:6;"><img src="{{ optional($gambar_header)->gbr6 ? asset('storage/' . $gambar_header->gbr6) : asset('noImage/noImage.png') }}"></span>
                            <span style="--i:7;"><img src="{{ optional($gambar_header)->gbr7 ? asset('storage/' . $gambar_header->gbr7) : asset('noImage/noImage.png') }}"></span>
                            <span style="--i:8;"><img src="{{ optional($gambar_header)->gbr8 ? asset('storage/' . $gambar_header->gbr8) : asset('noImage/noImage.png') }}"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- /.hero-section -->
    
    <section class="promo-section padding bd-bottom" id="mulai" >
        <div class="container">
            <div class="promo-wrap row">
                <div class="col-md-4 xs-padding">
                    <a href="{{ route('lokasi') }}" class="{{ request()->routeIs('lokasi') ? 'active' : '' }}">
                        <div class="feature-content bg-green">
                            <i class="icon_building_alt color-green"></i>
                            <h3>Lokasi Bank Sampah</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 xs-padding">
                    <a href="{{ route('mendirikan_bank') }}" class="{{ request()->routeIs('mendirikan_bank') ? 'active' : '' }}">
                        <div class="feature-content bg-red">
                            <i class="icon_documents color-red"></i>
                            <h3>Mendirikan Bank Sampah</h3>
                        </div>
                    </a>
                </div>
                <div class="col-md-4 xs-padding">
                    <a href="{{ route('mendaftar_nasabah') }}" class="{{ request()->routeIs('mendaftar_nasabah') ? 'active' : '' }}">
                        <div class="feature-content bg-yellow">
                            <i class="icon_id-2 color-yellow"></i>
                            <h3>Mendaftar Nasabah</h3>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section><!-- /.promo section -->
    <section class="content-section padding bg-grey bd-bottom" >
        <div class="container"> 
            <div class="content-wrap row">
                <div class="col-lg-6 sm-padding">
                    <div class="content-img">
                        <img src="{{ asset('saaskit/img/diet-sampah-removebg.png') }}" alt="content">
                    </div>
                </div>
                <div class="col-lg-6 sm-padding">
                    <div class="section-heading mb-40">
                        <h2>Mengapa perlu Bank Sampah ?</h2>
                       
                    </div>
                    <ul class="content-info">
                        <li>
                            <h3><span class="bg-red color-red">1</span> Mendorong Masyarakat</h3>
                            <p>Sistem pengelolaan sampah kering secara kolektif yang mendorong masyarakat untuk berperan serta aktif di dalamnya.</p>
                        </li>
                        <li>
                            <h3><span class="bg-purple color-purple">2</span> Mengurangi Volume Sampah</h3>
                            <p>Bank sampah penting karena membantu mengurangi volume sampah yang dibuang ke Tempat Pembuangan Akhir (TPA)</p>
                        </li>
                        <li>
                            <h3><span class="bg-blue color-blue">3</span> Meningkatkan Ekonomi</h3>
                            <p>Meningkatkan nilai ekonomi sampah melalui daur ulang</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section><!-- /.content-section -->
  
    <section class="blog-section padding bd-bottom" id="grafik">
        <div class="container">
            <div class="section-heading mb-40 text-center">
              <span>Grafik</span>
               <h2>Grafik Rekapitulasi Sampah - Tahun {{ $tahun }}</h2>
               {{-- <p>Unlike team chat apps, Flow is designed to help your team stay focused <br>by keeping relevant and actionable</p> --}}
            </div>
            <div class="row blog-wrap">
                 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">

                   <form method="GET" action="?#grafik" class="flex items-center gap-4 mb-6">
                        <div class="flex items-center bg-white border border-gray-300 rounded-lg shadow-sm overflow-hidden">
                            <select name="tahun"
                                onchange="this.form.submit()"
                                class="bg-white px-4 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                @foreach ($list_tahun as $t)
                                    <option value="{{ $t }}" {{ $t == $tahun ? 'selected' : '' }}>{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                    </form>
                </div>

                <div class="col-lg-12" style="background-color: #f4f9f4; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 40px;">
                    <canvas id="grafikGabungan"></canvas>
                </div>

                
            </div>
        </div>
    </section><!--/.blog-section-->

    <section class="blog-section padding bd-bottom" id="grafik">
        <div class="container">
            <div class="section-heading mb-40 text-center">
               <h2>Grafik Jumlah Bank Sampah Per Kapanewon</h2>
               {{-- <p>Unlike team chat apps, Flow is designed to help your team stay focused <br>by keeping relevant and actionable</p> --}}
            </div>
            <div class="row blog-wrap">
                 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">

                   {{-- <form method="GET" action="?#grafik" class="flex items-center gap-4 mb-6">
                        <div class="flex items-center bg-white border border-gray-300 rounded-lg shadow-sm overflow-hidden">
                            <select name="tahun"
                                onchange="this.form.submit()"
                                class="bg-white px-4 py-2 text-sm text-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                @foreach ($list_tahun as $t)
                                    <option value="{{ $t }}" {{ $t == $tahun ? 'selected' : '' }}>{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                    </form> --}}
                </div>

                <div class="col-lg-12" style="background-color: #f4f9f4; padding: 20px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); margin-bottom: 40px;">
                    <canvas id="grafikJumlahBank"></canvas>
                </div>

                
            </div>
        </div>
    </section><!--/.blog-section-->
    
    <section class="cta-section padding">
       <div class="overlay"></div>
        <div class="container">
            <div class="cta-wrap row">
                <div class="col-md-8">
                    <div class="cta-content">
                        {{-- <h2><b>SIBAKU</b> <br>Siaga Berjibaku Melawan Sampah Kulon Progo</h2> --}}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="cta-btn">
                    {{-- <a href="#mulai" class="default-btn">Get Started <span></span></a> --}}
                    </div>
                </div>
            </div>
        </div>
    </section><!--/.cta-section-->


    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const labels = {!! json_encode($data->pluck('nama')) !!};
        const dataMasuk = {!! json_encode($data->pluck('masuk')) !!};
        const dataTerkelola = {!! json_encode($data->pluck('terkelola')) !!};
        const dataTidakTerkelola = {!! json_encode($data->pluck('tidak_terkelola')) !!};

        new Chart(document.getElementById('grafikGabungan'), {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Sampah Masuk',
                        data: dataMasuk,
                        backgroundColor: '#169AD1',
                        borderColor: '#0f648f',
                        borderWidth: 1,
                        hoverBorderWidth: 2,
                        hoverBackgroundColor: '#555'

                    },
                    {
                        label: 'Sampah Terkelola',
                        data: dataTerkelola,
                        backgroundColor: '#4CAF50',
                        borderColor: '#388E3C',
                        borderWidth: 1,
                        hoverBorderWidth: 2,
                        hoverBackgroundColor: '#555'
                    },
                    {
                        label: 'Sampah Tidak Terkelola',
                        data: dataTidakTerkelola,
                        backgroundColor: '#E91E63',
                        borderColor: '#AD1457',
                        borderWidth: 1,
                        hoverBorderWidth: 2,
                        hoverBackgroundColor: '#555'
                    }
                ]

            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            color: '#000000', // warna tulisan label legend
                            font: {
                                size: 14,
                                weight: 'bold'
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Jumlah Sampah (kg)',
                            color: '#000000',
                            font: {
                                family: 'Arial',
                                size: 15,
                                weight: 'bold'
                            },
                        },
                        ticks: {
                            color: '#000000',
                            font: {
                                size: 13
                            }
                        }
                    },
                    x: {
                        title: {
                            display: true,
                            text: 'Jenis Sampah',
                            color: '#000000',
                            font: {
                                family: 'Arial',
                                size: 15,
                                weight: 'bold'
                            },
                        },
                        ticks: {
                            color: '#000000',
                            font: {
                                size: 13
                            }
                        }
                    }
                }
            }

        });
    </script>

    {{-- grafik jumlah bank --}}
        <script>
            const ctx = document.getElementById('grafikJumlahBank').getContext('2d');

            const bankChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($labelBank) !!},
                    datasets: [{
                        label: 'Jumlah Bank',
                        data: {!! json_encode($jumlahBank) !!},
                        backgroundColor: '#169AD1',
                        borderColor: '#0f648f',
                        borderWidth: 1,
                        borderRadius: 5,
                        hoverBorderWidth: 2,
                        hoverBackgroundColor: '#555'
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                color: '#000000',
                                precision: 0,
                                font: {
                                    size: 13
                                }
                            },
                            title: {
                                display: true,
                                color: '#000000',
                                text: 'Jumlah Bank',
                                font: {
                                    family: 'Arial',
                                    size: 15,
                                    weight: 'bold'
                                },
                            }
                        },
                        x: {
                            title: {
                                color: '#000000',
                                display: true,
                                text: 'Kapanewon',
                                font: {
                                    family: 'Arial',
                                    size: 15,
                                    weight: 'bold'
                                },
                            },
                            ticks: {
                                color: '#000000',
                                font: {
                                    size: 13
                                }
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    }
                }
            });
        </script>
@endsection