@extends('layouts.landing.index')
@vite([
  // 'resources/less/home.less',
  // 'resources/js/test.js'
])
@section('content')
<!-- Navigation Bar -->
@include('layouts.landing.nav')

<!-- Content -->
<div id="practice-details" class="mt-2">
  <div class="container-xl">
    <x-landing-breadcrumbs :breadcrumbs="$breadcrumbs"></x-landing-breadcrumbs>
    <h1 class="mb-2">{{ $practice->title }}</h1>
    <span class="d-block mb-4">
      <i class="far fa-calendar-check"></i> {{ date('F d, Y',strtotime($practice->published_at)) }} | {{ $practice->institution ? $practice->institution->name : 'Admin Sekertariat SDGs' }} | {{ 'By: '.$practice->user->name }}
    </span>
    <div class="row d-flex justify-content-center">
      <div class="col-12 col-lg-12">
        <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="{{ asset('storage/good-practice/'.$practice->image) }}" class="d-block w-100 rounded-5 object-fit-cover" style="height: 600px" alt="{{ $practice->image }}">
            </div>
            @foreach($practice->galleries as $g)
              <div class="carousel-item">
                <img src="{{ asset('storage/good-practice/galleries/'.$g->filename) }}" class="d-block w-100 rounded-5 object-fit-cover" style="height: 600px" alt="{{ $g->filename }}">
              </div>
            @endforeach
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </div>
    <div class="d-flex justify-content-between mb-5 mt-4 w-100">
      <div>
        <div class="d-flex justify-content-start align-items-center gap-2 flex-wrap">
          <div class="goal-text d-flex align-items-center">
            Tujuan SDGs
          </div>
          @foreach($practice->good_practices_goals as $goal)
            <div class="goal d-flex align-items-center" data-bs-toggle="tooltip" data-bs-title="{{ 'Tujuan '.$goal->goal->code.'. '.$goal->goal->name }}">
              <img src="{{ asset('assets/icons/goals/goal-icon-'.$goal->goal->code.'.svg') }}" class="img-fluid" />
            </div>
          @endforeach
        </div>
      </div>
      <div>
        <span>Bagikan</span>
        <div class="mb-5 mt-2" style="height: 24px;">
          <a href="https://www.facebook.com/sharer/sharer.php?u={{ url()->current() }}&t={{ $practice->title }}" class="share-btn text-decoration-none"><i class="fab fa-facebook-f fa-lg me-2"></i></a>
          <a href="https://wa.me?text={{ url()->current() }}" class="share-btn text-decoration-none"><i class="fab fa-whatsapp fa-lg me-2"></i></a>
          <a href="https://x.com/intent/tweet?text={{ url()->current() }}" class="share-btn text-decoration-none"><i class="fab fa-twitter fa-lg me-2"></i></a>
          <a href="https://telegram.me/share/url?url={{ url()->current() }}&text={{ $practice->title }}" class="share-btn text-decoration-none"><i class="fab fa-telegram-plane fa-lg"></i></a>
        </div>
      </div>
    </div>
    <p class="mt-5">{{ $practice->summary }}</p>
    <h5 class="mt-5 fs-4">Latar Belakang</h5>
    <p class="mt-2">{{ $practice->background }}</p>
    <h5 class="mt-5 fs-4">Lokasi Pelaksanaan</h5>
    <p class="mt-2">{{ $practice->implementation_location }} {{ '('.($practice?->village?->name ?? '-').', '.($practice?->subdistrict?->name ?? '-').', '.$practice->city->type.' '.$practice->city->name.', '.$practice->province->name.')' }}</p>
    <h5 class="mt-5 fs-4">Proses/Tahapan Pelaksanaan</h5>
    <p class="mt-2">{{ $practice->implementation_process }}</p>
    <h5 class="mt-5 fs-4">Hasil & Dampak</h5>
    <p class="mt-2">{{ $practice->result }}</p>
    <h5 class="mt-5 fs-4">Rekomendasi & Pembelajaran</h5>
    <p class="mt-2">{{ $practice->recommendation }}</p>
    <h5 class="mt-5 fs-4">Potensi & Kebutuhan Kerjasama</h5>
    <p class="mt-2 mb-5">{{ $practice->potential_partnership }}</p>
    <div class="container-xl my-5">
      <div class="row">
        <div class="col-12 col-sm-12 col-xs-12 col-md-3 col-lg-3 px-4 py-5 bg-one">
          <span class="details">Waktu Pelaksanaan</span>
          <h4 class="details mt-4">{{ date_format(date_create($practice->implementation_start_date), 'd F Y') }} s/d {{ date_format(date_create($practice->implementation_end_date), 'd F Y') }}</h4>
        </div>
        <div class="col-12 col-sm-12 col-xs-12 col-md-5 col-lg-5 px-4 py-5 bg-two">
          <span class="details">Sumber Informasi</span>
          <h4 class="details mt-4">{{ $practice->sources }}</h4>
        </div>
        <div class="col-12 col-sm-12 col-xs-12 col-md-4 col-lg-4 px-4 py-5 bg-three">
          <span class="details">Kontak Sumber Pengetahuan</span>
          <h4 class="details mt-4">{{ $practice->learning_source_contact }}</h4>
        </div>
        <div class="col-12 col-sm-12 col-xs-12 col-md-12 col-lg-12 px-4 py-5 bg-primary">
          <span class="details">Aktor yang Terlibat</span>
          <ul class="mt-4 details">
            @foreach($practice->good_practices_actors as $act)
              <li>{{ $act->actor->name }}</li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
    <hr />
  </div>
</div>
<div id="news" class="bg-white pb-5">
  <div class="container-xl">
    <h2 class="mt-5 mb-4">Praktik Baik Lainnya</h2>
      <div class="row g-5">
        @foreach ($practices 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="d-flex justify-content-center align-items-center mt-5">
        <div>
          <a href="{{ route('good-practices') }}" class="btn btn-primary rounded-pill py-2 px-5">Lihat Lebih Banyak</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Footer -->
@include('layouts.landing.footer')
@endsection
@push('scripts')
    <script type="module">
      $(document).ready(function(){
        $('.share-btn').click(function(event){
          event.preventDefault();
          window.open($(this).attr('href'), '_blank','popup,width=450,height=450');
        })
      })
    </script>
@endpush