@extends('frontend.layouts.app')

@section('title')
News & Events | Philippine Green Building Initiative (PGBI)
@endsection

@section('seo')
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Media Center | Philippine Green Building Initiative (PGBI)" />
<meta property="og:url" content="{{ url('media-center') }}" />
<meta property="og:site_name" content="Media Center | Philippine Green Building Initiative (PGBI)" />
<meta property="og:image" content="{{ asset('images/meta-thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/meta-thumbnail.jpg') }}" />
@endsection

@section('content')
{{-- BANNER --}}
<div class="container-fluid px-0 mb-5 text-center">
  @if ($type == null)
    <img src="{{ asset('images/banner-media.jpg') }}" class="img-fluid" alt="">
  @elseif ($type == 'News')
    <img src="{{ asset('images/banner-news.jpg') }}" class="img-fluid" alt="">
  @elseif ($type == 'Events')
    <img src="{{ asset('images/banner-events.jpg') }}" class="img-fluid" alt="">
  @elseif ($type == 'Publications')
    <img src="{{ asset('images/banner-publications.jpg') }}" class="img-fluid" alt="">
  @elseif ($type == 'Blogs')
    <img src="{{ asset('images/banner-blogs.jpg') }}" class="img-fluid" alt="">
  @elseif ($type == 'Awards')
    <img src="{{ asset('images/banner-awards.jpg') }}" class="img-fluid" alt="">
  @elseif ($type == 'Activities')
    <img src="{{ asset('images/banner-activities.jpg') }}" class="img-fluid" alt="">
  @elseif ($type == 'Resources')
    <img src="{{ asset('images/banner-resources.jpg') }}" class="img-fluid" alt="">
  @endif
</div>

<div class="container overflow-hidden">
  <h2 class="fw-bold mb-5" data-aos="fade-up" data-aos-duration="1500">Media Center</h2>

  <div class="row gy-4 mb-5">
    <div class="col-12 col-md-4" data-aos="fade-right" data-aos-duration="1500">

      {{-- FITLER PANEL --}}
      <form action="{{ url('filter-blog') }}" class="mb-4" method="GET">
        <div class="input-group mb-3">
          <span class="input-group-text border-0 border-bottom bg-white rounded-0" id="basic-addon1">
            <i class="fa-solid fa-magnifying-glass fa-flip-horizontal"></i>
          </span>
          <input type="text" name="query" class="form-control form-search border-0 border-bottom rounded-0" placeholder="Search" aria-describedby="basic-addon1">
        </div>
  
        <div class="row">
          <div class="col-12">
            <a href="{{ url('news-and-events') }}" class="btn bold-hover rounded-0 btn-primary btn-panel text-white p-3 border-0 border-bottom border-white mb-0 w-100 text-start">All Posts</a>
          </div>
          <div class="col-12">
            <input type="radio" class="btn-check" name="post_type" value="News" id="btn-check2" autocomplete="off">
            <label class="btn rounded-0 btn-primary btn-panel text-white p-3 border-0 border-bottom border-white mb-0 w-100 text-start" for="btn-check2">News</label>
          </div>
          <div class="col-12">
            <input type="radio" class="btn-check" name="post_type" value="Events" id="btn-check3" autocomplete="off">
            <label class="btn rounded-0 btn-primary btn-panel text-white p-3 border-0 border-bottom border-white mb-0 w-100 text-start" for="btn-check3">Events</label>
          </div>
          <div class="col-12">
            <input type="radio" class="btn-check" name="post_type" value="Publications" id="btn-check4" autocomplete="off">
            <label class="btn rounded-0 btn-primary btn-panel text-white p-3 border-0 border-bottom border-white mb-0 w-100 text-start" for="btn-check4">Publications</label>
          </div>
          <div class="col-12">
            <input type="radio" class="btn-check" name="post_type" value="Blogs" id="btn-check5" autocomplete="off">
            <label class="btn rounded-0 btn-primary btn-panel text-white p-3 border-0 border-bottom border-white mb-0 w-100 text-start" for="btn-check5">Blogs</label>
          </div>
          <div class="col-12">
            <input type="radio" class="btn-check" name="post_type" value="Awards" id="btn-check6" autocomplete="off">
            <label class="btn rounded-0 btn-primary btn-panel text-white p-3 border-0 border-bottom border-white mb-0 w-100 text-start" for="btn-check6">Awards</label>
          </div>
          <div class="col-12">
            <input type="radio" class="btn-check" name="post_type" value="Activities" id="btn-check7" autocomplete="off">
            <label class="btn rounded-0 btn-primary btn-panel text-white p-3 border-0 border-bottom border-white mb-0 w-100 text-start" for="btn-check7">Activities</label>
          </div>
          <div class="col-12">
            <input type="radio" class="btn-check" name="post_type" value="Resources" id="btn-check8" autocomplete="off">
            <label class="btn rounded-0 btn-primary btn-panel text-white p-3 border-0 border-bottom border-white mb-0 w-100 text-start" for="btn-check8">Resources</label>
          </div>
        </div>
      </form>

      {{-- ADS --}}
      <div class="w-100 bg-green d-flex justify-content-center align-items-center mb-4" style="height: 14rem">
        <h4 class="text-white">Place ad here</h4>
      </div>
      
      <div class="w-100 bg-green d-flex justify-content-center align-items-center mb-4" style="height: 14rem">
        <h4 class="text-white">Place ad here</h4>
      </div>

    </div>
    <div class="col-12 col-md">
      {{-- BLOG FEED --}}
      <div class="d-md-block d-none" style="padding-top: 6.8rem"></div>

      @if ($type == null)
        <div div class="row gy-4">
          @foreach ($blogs as $items)
          <div class="col-12 border-bottom border-2" data-aos="flip-left" data-aos-duration="1500">
            <div class="mb-2 overflow-hidden">
              @if ($items->image != null)
                <a href="{{ url('blog-single/' . $items->title) }}">
                  <img src="{{ asset('blogs/' . $items->image) }}" class="media-big" alt="">
                </a>
              @else
                <iframe width="845" height="410" src="{{ $items->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
              @endif
            </div>

            @php
              $createdAt = $items->created_at;

              if ($createdAt->isToday()) {
                  $formattedDate = 'Today';
              } else {
                  $formattedDate = $createdAt->format('M j');
              }
            @endphp
            <div class="mb-4">
              <span>{{ $formattedDate }}</span>
            </div>

            <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
              <h5 class="fw-bold">{{ Str::limit(strip_tags($items->title), 50, '...') }}</h5>
            </a>

            {{ Str::limit(html_entity_decode(strip_tags($items->description)), 80, '...') }}

            <div class="d-md-block d-none" style="padding-bottom: 2rem"></div>
          </div>
          @endforeach
        </div>
      @elseif ($type == 'News')
        @if (count($blogs) > 0)
          @php
            $firstBlog = $blogs[0];

            $createdAt = $firstBlog->created_at;

            if ($createdAt->isToday()) {
                $formattedDate = 'Today';
            } else {
                $formattedDate = $createdAt->format('M j');
            }
          @endphp

          <div class="d-flex flex-nowrap align-items-start gap-3 mb-5">
            @if ($firstBlog->image != null)
              <a href="{{ url('blog-single/' . $firstBlog->title) }}" class="hover-media">
                <img src="{{ asset('blogs/' . $firstBlog->image) }}" class="news-latest-img rounded-3" alt="">
              </a>
            @else
              <iframe width="400" height="400" src="{{ $firstBlog->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            @endif

            <div class="p-2 w-100">                
                <div class="d-flex justify-content-between mb-4">
                  <div>
                      <span>{{ $formattedDate }}</span>
                  </div>
                  <div>
                    <div class="input-group">
                      <input type="text" class="opacity-0" value="{{ url('blog-single/' . $firstBlog->title) }}" id="copyText{{ $firstBlog->id }}" readonly>
                      <div class="input-group-append">
                        <button class="border-0 bg-transparent p-2" data-clipboard-target="#copyText{{ $firstBlog->id }}" id="copyButton" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to Clipboard">
                          <i class="fa-solid fa-ellipsis-vertical"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>

                <a href="{{ url('blog-single/' . $firstBlog->title) }}" class="hover-media">
                  <h3 class="fw-bold mb-5">{{ Str::limit(strip_tags($firstBlog->title), 40, '...') }}</h3>

                  <p>{{ Str::limit(html_entity_decode(strip_tags($firstBlog->description)), 80, '...') }}</p>
                </a>
            </div>
          </div>
        @endif

        @foreach ($blogs->skip(1) as $blog)
          @php
          $createdAt = $blog->created_at;

          if ($createdAt->isToday()) {
              $formattedDate = 'Today';
          } else {
              $formattedDate = $createdAt->format('M j');
          }
        @endphp
          <div class="row">
              <div class="col-12 col-md-6 col-xl-4">
                @if ($blog->image != null)
                  <img src="{{ asset('blogs/' . $blog->image) }}" class="news-img rounded-3 mb-3" alt="">
                @else
                  <iframe width="269" height="400" src="{{ $blog->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                @endif

                <div class="d-flex justify-content-between mb-3">
                    <div>
                        <span>{{ $formattedDate }}</span>
                    </div>
                    <div>
                      <div class="input-group">
                        <input type="text" class="opacity-0" value="{{ url('blog-single/' . $blog->title) }}" id="copyText{{ $blog->id }}" readonly>
                        <div class="input-group-append">
                          <button class="border-0 bg-transparent p-2" data-clipboard-target="#copyText{{ $blog->id }}" id="copyButton" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to Clipboard">
                            <i class="fa-solid fa-ellipsis-vertical"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                </div>

                <a href="{{ url('blog-single/' . $blog->title) }}" class="hover-media">
                  <h4 class="fw-bold mb-3">{{ Str::limit(strip_tags($blog->title), 30, '...') }}</h4>

                  <p>{{ Str::limit(html_entity_decode(strip_tags($blog->description)), 50, '...') }}</p>
                </a>
              </div>
          </div>
        @endforeach
      @elseif ($type == 'Events')
        @if (count($blogs) > 0)
          @php
            $firstBlog = $blogs[0];

            $createdAt = $firstBlog->created_at;

            if ($createdAt->isToday()) {
                $formattedDate = 'Today';
            } else {
                $formattedDate = $createdAt->format('M j');
            }
          @endphp
          <div class="mb-5">
            @if ($firstBlog->image != null)
              <a href="{{ url('blog-single/' . $firstBlog->title) }}" class="hover-media">
                <img src="{{ asset('blogs/' . $firstBlog->image) }}" class="event-latest-img" alt="">
              </a>
            @else
              <iframe width="856" height="437" src="{{ $firstBlog->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
            @endif
            <div class="d-flex flex-row gap-0">
              <div class="bg-green date-label py-3 text-white d-flex align-items-center justify-content-center">
                @if ($formattedDate == 'Today')
                  <div class="lh-sm text-center py-3">
                    <span class="fs-4 fw-bold">{{ $formattedDate }}</span>
                  </div>
                @else
                  <div class="lh-sm text-center">
                    <span class="fs-3">{{ $createdAt->format('M') }}</span><br>
                    <span class="fs-3 fw-bold">{{ $createdAt->format('d') }}</span>
                  </div>
                @endif
              </div>
              <div class="bg-gray py-3 px-4 w-100">
                <a href="{{ url('blog-single/' . $firstBlog->title) }}" class="hover-media">
                  <h4 class="fw-bold">{{ Str::limit(strip_tags($firstBlog->title), 40, '...') }}</h4>
                </a>
              </div>
            </div>
          </div>
        @endif

        <div class="row gy-4">
          @foreach ($blogs->skip(1) as $blog)
            @php
              $createdAt = $blog->created_at;

              if ($createdAt->isToday()) {
                  $formattedDate = 'Today';
              } else {
                  $formattedDate = $createdAt->format('M j');
              }
            @endphp

            <div class="col-12 col-xl-6">
              <div>
                @if ($blog->image != null)
                  <a href="{{ url('blog-single/' . $blog->title) }}" class="hover-media">
                    <img src="{{ asset('blogs/' . $blog->image) }}" class="event-img" alt="">
                  </a>
                @else
                  <iframe width="416" height="212" src="{{ $blog->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                @endif
                <div class="d-flex flex-row gap-0">
                  <div class="bg-green date-label py-3 text-white d-flex align-items-center justify-content-center">
                    @if ($formattedDate == 'Today')
                      <div class="lh-sm text-center">
                        <span class="fs-4 fw-bold">{{ $formattedDate }}</span>
                      </div>
                    @else
                      <div class="lh-sm text-center">
                        <span class="fs-3">{{ $createdAt->format('M') }}</span><br>
                        <span class="fs-3 fw-bold">{{ $createdAt->format('d') }}</span>
                      </div>
                    @endif
                  </div>
                  <div class="bg-gray py-3 px-4 w-100">
                    <a href="{{ url('blog-single/' . $blog->title) }}" class="hover-media">
                      <h5 class="fw-bold">{{ Str::limit(strip_tags($blog->title), 35, '...') }}</h5>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      @elseif ($type == 'Publications')
        <div class="row">
          @foreach ($blogs as $items)
            @php
              $createdAt = $items->created_at;

              if ($createdAt->isToday()) {
                  $formattedDate = 'Today';
              } else {
                  $formattedDate = $createdAt->format('M j');
              }
            @endphp
              <div class="col-12 mb-4">
                <div class="row">
                  <div class="col-12 col-md">
                    @if ($items->image != null)
                      <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                        <img src="{{ asset('blogs/' . $items->image) }}" class="publication-image" alt="">
                      </a>
                    @else
                      <iframe width="416" height="263" src="{{ $items->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                    @endif
                  </div>
                  <div class="col-12 col-md">
                    <div class="d-flex justify-content-between mb-4">
                      <div>
                        <span>{{ $formattedDate }}</span>
                      </div>
                      <div>
                        <div class="input-group">
                          <input type="text" class="opacity-0" value="{{ url('blog-single/' . $items->title) }}" id="copyText{{ $items->id }}" readonly>
                          <div class="input-group-append">
                            <button class="border-0 bg-transparent p-2" data-clipboard-target="#copyText{{ $items->id }}" id="copyButton" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to Clipboard">
                              <i class="fa-solid fa-ellipsis-vertical"></i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
        
                    <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                      <h4 class="fw-bold mb-4">{{ Str::limit(strip_tags($items->title), 40, '...') }}</h4>
        
                      <div>
                        {{ Str::limit(html_entity_decode(strip_tags($items->description)), 80, '...') }}
                      </div>
                    </a>
                  </div>
                </div>
              </div>
          @endforeach
        </div>
      @elseif ($type == 'Blogs')
      <div class="row">
        @foreach ($blogs as $items)
          @php
            $createdAt = $items->created_at;

            if ($createdAt->isToday()) {
                $formattedDate = 'Today';
            } else {
                $formattedDate = $createdAt->format('M j');
            }
          @endphp
            <div class="col-12 mb-4">
              <div class="row">
                <div class="col-12 col-md">
                  @if ($items->image != null)
                    <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                      <img src="{{ asset('blogs/' . $items->image) }}" class="publication-image" alt="">
                    </a>
                  @else
                    <iframe width="416" height="263" src="{{ $items->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                  @endif
                </div>
                <div class="col-12 col-md">
                  <div class="d-flex justify-content-between mb-4">
                    <div>
                      <span>{{ $formattedDate }}</span>
                    </div>
                    <div>
                      <div class="input-group">
                        <input type="text" class="opacity-0" value="{{ url('blog-single/' . $items->title) }}" id="copyText{{ $items->id }}" readonly>
                        <div class="input-group-append">
                          <button class="border-0 bg-transparent p-2" data-clipboard-target="#copyText{{ $items->id }}" id="copyButton" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to Clipboard">
                            <i class="fa-solid fa-ellipsis-vertical"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
      
                  <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                    <h4 class="fw-bold mb-4">{{ Str::limit(strip_tags($items->title), 40, '...') }}</h4>
      
                    <div>
                      {{ Str::limit(html_entity_decode(strip_tags($items->description)), 80, '...') }}
                    </div>
                  </a>
                </div>
              </div>
            </div>
        @endforeach
      </div>
      @elseif ($type == 'Awards')
      <div class="row">
        @foreach ($blogs as $items)
          @php
            $createdAt = $items->created_at;

            if ($createdAt->isToday()) {
                $formattedDate = 'Today';
            } else {
                $formattedDate = $createdAt->format('M j');
            }
          @endphp
            <div class="col-12 mb-4">
              <div class="row">
                <div class="col-12 col-md">
                  @if ($items->image != null)
                    <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                      <img src="{{ asset('blogs/' . $items->image) }}" class="publication-image" alt="">
                    </a>
                  @else
                    <iframe width="416" height="263" src="{{ $items->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                  @endif
                </div>
                <div class="col-12 col-md">
                  <div class="d-flex justify-content-between mb-4">
                    <div>
                      <span>{{ $formattedDate }}</span>
                    </div>
                    <div>
                      <div class="input-group">
                        <input type="text" class="opacity-0" value="{{ url('blog-single/' . $items->title) }}" id="copyText{{ $items->id }}" readonly>
                        <div class="input-group-append">
                          <button class="border-0 bg-transparent p-2" data-clipboard-target="#copyText{{ $items->id }}" id="copyButton" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to Clipboard">
                            <i class="fa-solid fa-ellipsis-vertical"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
      
                  <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                    <h4 class="fw-bold mb-4">{{ Str::limit(strip_tags($items->title), 40, '...') }}</h4>
      
                    <div>
                      {{ Str::limit(html_entity_decode(strip_tags($items->description)), 80, '...') }}
                    </div>
                  </a>
                </div>
              </div>
            </div>
        @endforeach
      </div>
      @elseif ($type == 'Activities')
      <div class="row">
        @foreach ($blogs as $items)
          @php
            $createdAt = $items->created_at;

            if ($createdAt->isToday()) {
                $formattedDate = 'Today';
            } else {
                $formattedDate = $createdAt->format('M j');
            }
          @endphp
            <div class="col-12 mb-4">
              <div class="row">
                <div class="col-12 col-md">
                  @if ($items->image != null)
                    <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                      <img src="{{ asset('blogs/' . $items->image) }}" class="publication-image" alt="">
                    </a>
                  @else
                    <iframe width="416" height="263" src="{{ $items->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                  @endif
                </div>
                <div class="col-12 col-md">
                  <div class="d-flex justify-content-between mb-4">
                    <div>
                      <span>{{ $formattedDate }}</span>
                    </div>
                    <div>
                      <div class="input-group">
                        <input type="text" class="opacity-0" value="{{ url('blog-single/' . $items->title) }}" id="copyText{{ $items->id }}" readonly>
                        <div class="input-group-append">
                          <button class="border-0 bg-transparent p-2" data-clipboard-target="#copyText{{ $items->id }}" id="copyButton" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to Clipboard">
                            <i class="fa-solid fa-ellipsis-vertical"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
      
                  <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                    <h4 class="fw-bold mb-4">{{ Str::limit(strip_tags($items->title), 40, '...') }}</h4>
      
                    <div>
                      {{ Str::limit(html_entity_decode(strip_tags($items->description)), 80, '...') }}
                    </div>
                  </a>
                </div>
              </div>
            </div>
        @endforeach
      </div>
      @elseif ($type == 'Resources')
      <div class="row">
        @foreach ($blogs as $items)
          @php
            $createdAt = $items->created_at;

            if ($createdAt->isToday()) {
                $formattedDate = 'Today';
            } else {
                $formattedDate = $createdAt->format('M j');
            }
          @endphp
            <div class="col-12 mb-4">
              <div class="row">
                <div class="col-12 col-md">
                  @if ($items->image != null)
                    <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                      <img src="{{ asset('blogs/' . $items->image) }}" class="publication-image" alt="">
                    </a>
                  @else
                    <iframe width="416" height="263" src="{{ $items->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                  @endif
                </div>
                <div class="col-12 col-md">
                  <div class="d-flex justify-content-between mb-4">
                    <div>
                      <span>{{ $formattedDate }}</span>
                    </div>
                    <div>
                      <div class="input-group">
                        <input type="text" class="opacity-0" value="{{ url('blog-single/' . $items->title) }}" id="copyText{{ $items->id }}" readonly>
                        <div class="input-group-append">
                          <button class="border-0 bg-transparent p-2" data-clipboard-target="#copyText{{ $items->id }}" id="copyButton" data-bs-toggle="tooltip" data-bs-placement="top" title="Copy to Clipboard">
                            <i class="fa-solid fa-ellipsis-vertical"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
      
                  <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                    <h4 class="fw-bold mb-4">{{ Str::limit(strip_tags($items->title), 40, '...') }}</h4>
      
                    <div>
                      {{ Str::limit(html_entity_decode(strip_tags($items->description)), 80, '...') }}
                    </div>
                  </a>
                </div>
              </div>
            </div>
        @endforeach
      </div>
      @endif

    </div>
  </div>
</div>
@endsection

@section('js')
<script>
  $(document).ready(function() {
    $('.btn-check').on('change', function() {
        $('form').submit();
    });
  });
</script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
      var clipboard = new ClipboardJS('#copyButton');

      clipboard.on('success', function (e) {
          console.log(e);

          // Show Bootstrap tooltip
          var tooltip = new bootstrap.Tooltip(e.trigger, {
              title: 'Copied!',
              placement: 'top'
          });

          // Hide tooltip after a short delay (e.g., 2 seconds)
          setTimeout(function () {
              tooltip.hide();
          }, 2000);

          e.clearSelection();
      });

      clipboard.on('error', function (e) {
          console.error(e);

          // Show Bootstrap tooltip for error
          var tooltip = new bootstrap.Tooltip(e.trigger, {
              title: 'Error copying text',
              placement: 'top'
          });

          // Hide tooltip after a short delay (e.g., 2 seconds)
          setTimeout(function () {
              tooltip.hide();
          }, 2000);
      });
  });
</script>
@endsection