@extends('layouts.landing.index')
@section('content')
<!-- Navigation Bar -->
@include('layouts.landing.nav')

<!-- Content -->
@if($site->banners->count() > 0)
  <div id="header">
    <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        @foreach($site->banners as $b)
          <button type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->index == 0 ? 'active':'' }}" {{ $loop->index == 0 ? 'aria-current="true"':'' }} aria-label="Slide {{ $loop->index+1 }}"></button>
        @endforeach
      </div>
      <div class="carousel-inner">
        @foreach($site->banners as $b)
          <div class="carousel-item {{ $loop->index == 0 ? 'active':'' }}">
            <div
              class="d-flex flex-column justify-content-center"
              @style([
                "background-image: url('".asset('storage/site/banners/'.$b->filename)."')",
                "background-size: cover",
                "background-position: center",
                "background-repeat: no-repeat",
                "height: inherit"
              ])
            >
              <div class="container-xl">
                <div class="d-flex flex-column gap-3 w-50">
                  <h1 class="fw-600 text-white">{{ $site?->slogan ?? '-' }}</h1>
                  <h4 class="text-white">{{ $site?->description ?? '-' }}</h4>
                  <div class="mt-4">
                    <a href="{{ route('about') }}" class="btn btn-lg btn-primary rounded-pill px-4 py-3 fw-600">
                      Tentang Kami
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
    <img src="{{ asset('assets/images/separator-header.svg') }}" width="100%" />
  </div>
@endif

<div id="info" class="mt-4">
  <div class="container-xl">
    <div class="row g-4">
      @if($newUserJoin)
        <div class="col-12 col-md-6">
          <div class="card rounded-4 p-4">
            <p><img src="{{ asset('assets/icons/teacher-red.svg') }}" class="img-fluid me-2"/>Aktor Pembangunan Terbaru</p>
            <div id="carouselActor" class="carousel slide carousel-dark" data-bs-ride="carousel">
              <ol class="carousel-indicators mb-n3 " style="list-style: none">
                @foreach($newUserJoin as $d)
                  <li data-bs-target="#carouselActor" data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->index == 0 ? 'active': '' }}"></li>
                @endforeach
              </ol>
              <div class="carousel-inner">
                @foreach($newUserJoin as $d)
                  <div class="carousel-item {{ $loop->index == 0 ? 'active': '' }}">
                    <div class="d-flex gap-2">
                      <img src="{{ asset('storage/institution/'.$d->institution->logo) }}" class="img-thumbnail" style="width: 150px;height: 103px !important;object-fit: cover"/>
                      <div class="d-flex flex-column gap-2">
                        <a href="{{ route('actor-directory.detail',$d->institution->id) }}" class="fw-bold fs-5 text-decoration-none text-dark">{{ \Illuminate\Support\Str::words($d->institution ? $d->institution->name : '',50) }}</a>
                        <span class="text-primary">{{ \Illuminate\Support\Str::words($d->institution->actor_element_type ? $d->institution->actor_element_type->name : '',50) }}</span>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      @endif
      @if($newGoodPractices)
        <div class="col-12 col-md-6">
          <div class="card rounded-4 p-4">
            <p><img src="{{ asset('assets/icons/teacher-blue.svg') }}" class="img-fluid me-2"/>Praktik Baik Terbaru</p>
            <div id="carouselGoodPractice" class="carousel slide carousel-dark" data-bs-ride="carousel">
              <ol class="carousel-indicators mb-n3 " style="list-style: none">
                @foreach($newGoodPractices as $d)
                  <li data-bs-target="#carouselGoodPractice" data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->index == 0 ? 'active': '' }}"></li>
                @endforeach
              </ol>
              <div class="carousel-inner">
                @foreach($newGoodPractices as $d)
                  <div class="carousel-item {{ $loop->index == 0 ? 'active': '' }}">
                    <div class="d-flex gap-2">
                      <img src="{{ asset('storage/good-practice/'.$d->image) }}" class="img-thumbnail" style="width: 150px;height: 103px !important;object-fit: cover"/>
                      <div class="d-flex flex-column gap-2">
                        <a href="{{ route('good-practices.detail',$d->id) }}" class="fw-bold fs-5 text-decoration-none text-dark">{{ \Illuminate\Support\Str::words($d->title,50) }}</a>
                        <span class="text-primary">{{ \Illuminate\Support\Str::words($d->institution ? $d->institution->name : 'Admin Sekretariat SDGs',50) }}</span>
                      </div>
                    </div>
                  </div>
                @endforeach
              </div>
            </div>
          </div>
        </div>
      @endif
    </div>
  </div>
</div>

<div id="news" class="mt-4 py-5">
  <div class="container-xl">
    <div class="d-flex flex-column align-items-center justify-content-center">
      <h1 class="text-center fw-700">Berita Terbaru</h1>
      <div class="w-75">
        <p class="subtitle my-4 text-center">
          Dapatkan informasi terkini seputar perkembangan, pencapaian, dan inisiatif terbaru terkait Tujuan Pembangunan Berkelanjutan (SDGs)
        </p>
      </div>
    </div>
    <div class="row g-4 mt-2">
      @foreach ($actionNews as $d)
        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
          <div class="card border-0 p-2 bg-transparent">
            <a href="{{ route('news.detail', [$d->id]) }}" class="text-decoration-none"><img src="{{ asset('storage/action-news/'.$d->image) }}" class="img-thumb-card rounded-4" /></a>
            <div class="card-body p-0 mt-2">
              <a href="{{ route('news.detail', [$d->id]) }}" class="text-decoration-none"><h5 class="card-title">{{ $d->title }}</h5></a>
              <span class="date">{{ date('F d, Y',strtotime($d->published_at)) }}</span>
              <p class="card-text mt-2">{!! substr($d->description, 0, 95)."..." !!}</p>
              <a href="{{ route('news.detail', [$d->id]) }}" class="read">Baca selengkapnya</a>
            </div>
          </div>
        </div>
      @endforeach
    </div>
    <div class="text-center mt-5">
      <a href="{{ route('news') }}" class="btn btn-outline-secondary rounded-pill py-2 px-5">Lihat Lebih Banyak</a>
    </div>
  </div>
</div>

<div id="info-actor" class="mt-5">
  <div class="container-sm">
    <h1 class="mb-4 text-center">Statistik Aktor Pembangunan dan Aksi SDGs</h1>
    <div class="row g-4">
      <div class="col-12 col-md-6 col-lg-3 position-relative overflow-hidden">
        <div class="card rounded-4 p-4 bg-info border-0">
          <img src="{{ asset('assets/images/sdgs-white-right.svg') }}" class="position-absolute" style="bottom: 0; right: 0" alt="Logo-Dark" />
          <div class="d-flex">
            <img src="{{ asset('assets/icons/users.svg') }}" class="img-fluid me-2"/>
            <span class="text-white">Jumlah Aktor Pemerintah</span>
          </div>
          <h3 class="text-white">{{ $govActors }}</h3>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 position-relative overflow-hidden">
        <div class="card rounded-4 p-4 bg-danger-darker border-0">
          <img src="{{ asset('assets/images/sdgs-white-right.svg') }}" class="position-absolute" style="bottom: 0; right: 0" alt="Logo-Dark" />
          <div class="d-flex">
            <img src="{{ asset('assets/icons/user.svg') }}" class="img-fluid me-2"/>
            <span class="text-white">Jumlah Aktor non Pemerintah</span>
          </div>
          <h3 class="text-white">{{ $nonGovActors }}</h3>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 position-relative overflow-hidden">
        <div class="card rounded-4 p-4 bg-warning border-0">
          <img src="{{ asset('assets/images/sdgs-white-right.svg') }}" class="position-absolute" style="bottom: 0; right: 0" alt="Logo-Dark" />
          <div class="d-flex">
            <img src="{{ asset('assets/icons/pencil-paper.svg') }}" class="img-fluid me-2"/>
            <span class="text-white">Program Kegiatan</span>
          </div>
          <h3 class="text-white">{{ $allProgramsCount }}</h3>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-3 position-relative overflow-hidden">
        <div class="card rounded-4 p-4 bg-danger border-0">
          <img src="{{ asset('assets/images/sdgs-white-right.svg') }}" class="position-absolute" style="bottom: 0; right: 0" alt="Logo-Dark" />
          <div class="d-flex">
            <img src="{{ asset('assets/icons/deal.svg') }}" class="img-fluid me-2"/>
            <span class="text-white">Kemitraan Multipihak</span>
          </div>
          <h3 class="text-white">{{ $mspCount }}</h3>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="sdgs-chart" class="mt-5">
  <div class="container-xl">
    <h1 class="mb-4 text-center">Rekapitulasi Kontribusi Lembaga Sesuai SDGs</h1>
    <div x-data="chartData()" class="card rounded-4 p-5">
      <div id="sdgs-contribution-chart" style="width: 100%; height: 450px;"></div>
    </div>
  </div>
</div>

<div id="info" class="mt-5">
  <div class="container-xl">
    <div class="d-flex flex-column align-items-center justify-content-center mb-4">
      <h1 class="text-center fw-700">Fitur Platform</h1>
      <div class="w-75">
        <p class="subtitle my-4 text-center">
          Berbagai fitur yang tersedia di dalam platform kolaborasi SDGs.
        </p>
      </div>
    </div>
    <div class="row g-4">
      <div class="col-12 col-sm-6 col-md-6 col-lg-4 ">
        <a href="{{ route('news') }}" class="text-decoration-none text-dark"><h3><img src="{{ asset('assets/icons/teacher 01.svg') }}" class="img-fluid me-4"/>Berita Aksi SDGs</h3></a>
        <p>Kabar/berita pelaksanaan aksi TPB/SDGs oleh berbagai aktor pembangunan di daerah.</p>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4 ">
        <a href="{{ route('digital-libraries') }}" class="text-decoration-none text-dark"><h3><img src="{{ asset('assets/icons/book 01.svg') }}" class="img-fluid me-4"/>Pustaka SDGs</h3></a>
        <p>Berbagai referensi kebijakan dan panduan TPB/SDGs yang diterbitkan oleh Bappenas sebagai rujukan pelaksanaan TPB/SDGs.</p>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4 ">
        <a href="{{ route('actor-directory') }}" class="text-decoration-none text-dark"><h3><img src="{{ asset('assets/icons/teacher 3.svg') }}" class="img-fluid me-4"/>Direktori Aktor</h3></a>
        <p>Berkenalan dengan aktor pembangunan dari unsur pemerintah dan non pemerintah yang mendukung pencapaian SDGs di daerah.</p>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4 ">
        <a href="{{ route('goals') }}" class="text-decoration-none text-dark"><h3><img src="{{ asset('assets/icons/teacher 6.svg') }}" class="img-fluid me-4"/>Dashboard SDGs</h3></a>
        <p>Pantau kontribusi dan pencapaian SDGs dari berbagai aktor pembangunan.</p>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4 ">
        <a href="{{ route('good-practices') }}" class="text-decoration-none text-dark"><h3><img src="{{ asset('assets/icons/teacher 5.svg') }}" class="img-fluid me-4"/>Praktik Baik SDGs</h3></a>
        <p>Belajar dari hasil pelaksanaan TPB/SDGs dari para aktor pembangunan yang dilaksanakan secara mandiri maupun dalam kerangka kemitraan multi-pihak.</p>
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-4 ">
        <a href="{{ route('kmp') }}" class="text-decoration-none text-dark"><h3><img src="{{ asset('assets/icons/notebook.svg') }}" class="img-fluid me-4"/>Kemitraan Multi Pihak</h3></a>
        <p>Berbagai Kemitraan Multi Pihak yang dilaksanakan untuk percepatan pencapaian TPB/SDGs daerah.</p>
      </div>
    </div>
  </div>
</div>

<div id="about-us">
  <div class="container-fluid mt-4">
    <div class="row">
      <div class="col-12 col-sm-6 col-md-6 col-lg-4 ps-0">
        <img src="{{ $site->bg_auth ? asset('storage/site/bg/'.$site->bg_auth) : asset('assets/images/Frame 10.png') }}" class="img-fluid" style="object-fit: cover;min-height: 550px;" />
      </div>
      <div class="col-12 col-sm-6 col-md-6 col-lg-8 position-relative overflow-hidden">
        <div class="d-flex align-items-center p-5 h-100">
          <img src="{{ asset('assets/images/default-icon.svg') }}" class="position-absolute w-25" style="top: -15%; right: -10%;" alt="Logo-Dark" />
          <div>
            <h2 class="mb-4">Tentang Kami</h2>
            <p class="pt-4 fs-5">
              {{ $site->about_us }}
            </p>
            <a href="{{ route('about') }}" class="btn btn-lg btn-primary rounded-pill px-4 py-3 fw-600 mt-4">Lebih Lanjut</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="news" class="pt-4 pb-5">
  <div class="container">
    <div class="d-flex flex-column align-items-center justify-content-center">
      <h1 class="text-center fw-700">Praktik Baik Terbaru</h1>
      <div class="w-75">
        <p class="subtitle my-4 text-center">
          Belajar dari pengalaman dan hasil pelaksanaan TPB/SDGs dari para aktor pembangunan yang dilaksanakan secara mandiri maupun dalam kerangka kemitraan multi-pihak.
        </p>
      </div>
    </div>
    <div class="row g-4 mt-2">
      @foreach ($goodPractices as $d)
        <div class="col-12 col-sm-6 col-md-6 col-lg-4">
          <div class="card border-0 p-2 bg-transparent">
            <a href="{{ route('good-practices.detail', [$d->id]) }}" class="text-decoration-none"><img src="{{ asset('storage/good-practice/'.$d->image) }}" class="img-thumb-card rounded-4" /></a>
            <div class="card-body p-0 mt-2">
              <a href="{{ route('good-practices.detail', [$d->id]) }}" class="text-decoration-none"><h5 class="card-title">{{ $d->title }}</h5></a>
              <span class="date">{{ date('F d, Y',strtotime($d->published_at)) }}</span>
              <p class="card-text mt-2">{{ substr($d->summary, 0, 95)."..." }}</p>
              <a href="{{ route('good-practices.detail', [$d->id]) }}" class="read">Baca selengkapnya</a>
            </div>
          </div>
        </div>
      @endforeach
    </div>
    <div class="text-center mt-5">
      <a href="{{ route('good-practices') }}" class="btn btn-outline-secondary rounded-pill py-2 px-5">Lihat Lebih Banyak</a>
    </div>
  </div>
</div>

<!-- Footer -->
@include('layouts.landing.footer')
@endsection
@push('scripts')
<script>
  function chartData() {
    return {
      chart: [],

      init() {
        console.log('test')
        this.getData();
      },

      getData() {
        fetch(`/api/get-sdgs-contribution-chart`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': @json(csrf_token())
          },
          body: JSON.stringify({
            version: '{{ $selectedRad?->metadata_version ?? '' }}'
          })
        })
          .then(response => response.json())
          .then(res => {
            const dummyArray = Array.from(Array(17).keys());
            const colors = [
              '#EA1D2D',
              '#D19F2A',
              '#2D9A47',
              '#C22033',
              '#EF412A',
              '#00ADD8',
              '#FDB714',
              '#8F1838',
              '#F36E24',
              '#E01A83',
              '#F99D25',
              '#CD8B2A',
              '#48773C',
              '#007DBB',
              '#40AE49',
              '#00558A',
              '#1A3668',
            ];

            Highcharts.chart('sdgs-contribution-chart', {
              chart: {
                type: 'column'
              },
              title: {
                text: 'SDGs',
                align: 'center',
                verticalAlign: 'bottom',
                style: {
                  marginTop: '50px',
                  fontWeight: '600',
                  fontSize: '26px'
                },
              },
              xAxis: {
                categories: res.categories.map(i => i),
                allowDecimals: false
              },
              yAxis: {
                title: {
                  text: ''
                },
                allowDecimals:false
              },
              plotOptions: {
                series: {
                  borderWidth: 0,
                  dataLabels: {
                    enabled: true,
                    align: 'left',
                    format: '{point.y}',
                    // format: '{point.y}<br />({point.p}%)',
                  },
                  borderRadius: {
                    radius: 10
                  },
                }
              },
              tooltip: {
                headerFormat: '',
                // pointFormat: '<b style="font-size:11px">{point.name}</b><br /> ' +
                // '<span>{point.y} ({point.p}%)</span>',
                pointFormat: '<b style="font-size:11px">{point.name}: ' + '<span>{point.y}</span>'
              },
              legend: {
                enabled: false
              },
              series: [
                {
                  pointWidth: 20,
                  color: colors[0],
                  data: res.data.map((e) => {
                    return {
                      y: e.y,
                      name: e.name,
                      color: e.color,
                    }
                  })
                },
              ]
            });
          })
          .catch(error => console.error('Error fetching target and indicator:', error));
      },
    }
  }
</script>
@endpush