@extends('frontend.layouts.app')

@section('title')
Home | 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="Home | Philippine Green Building Initiative (PGBI)" />
<meta property="og:url" content="{{ url('/') }}" />
<meta property="og:site_name" content="Home | 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 --}}
@if (!empty($banners))
  <div class="container-fluid px-0 mb-5">
    <div class="text-center">
      <img src="{{ asset('banners/' . $banners->banner) }}" class="img-fluid" alt="">
    </div>
  </div>
@else
  <div class="container my-5">
    <div class="text-center">
      <h2 class="fw-bold text-black">NO BANNER UPLOADED</h2>
    </div>
  </div>
@endif


{{-- CARDS --}}
<div class="container mb-5">
  <div class="row justify-content-center gy-4 overflow-hidden">
    <div class="col-12 col-md-4">
      <a href="{{ url('greeen-certifications') }}" class="text-decoration-none">
        <div class="position-relative" data-aos="fade-up" data-aos-duration="1500">
          <img src="{{ asset('images/card-1.png') }}" class="img-fluid" alt="">

          <div class="position-absolute translate-middle home-card-overlay">
            <div class="vstack gap-1 text-white text-center">
              <h3 class="fw-semibold mb-0">GREEEN</h3>
              <h3 class="fw-semibold mb-0">Certification</h3>
            </div>
          </div>
        </div>
      </a>
    </div>
    <div class="col-12 col-md-4">
      <div class="position-relative" data-aos="fade-up" data-aos-duration="2500">
        <img src="{{ asset('images/card-2.png') }}" class="img-fluid" alt="">

        <div class="position-absolute translate-middle home-card-overlay">
          <div class="vstack gap-1 text-white text-center">
            <h3 class="fw-semibold mb-0">Accreditation</h3>
            <h3 class="fw-semibold mb-0">Program</h3>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12 col-md-4">
      <div class="position-relative" data-aos="fade-up" data-aos-duration="3000">
        <img src="{{ asset('images/card-3.png') }}" class="img-fluid" alt="">

        <div class="position-absolute translate-middle home-card-overlay">
          <div class="vstack gap-1 text-white text-center">
            <h3 class="fw-semibold mb-0">EDGE</h3>
            <h3 class="fw-semibold mb-0">Certification</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div style="margin-bottom: 5rem"></div>

{{-- STATS --}}
<div class="container-fluid px-0 bg-stats py-5 mb-5" style="background-image: url( {{asset('images/bg-img.jpg') }} )">
  <div class="container">
    <div class="row d-flex justify-content-center gy-4">
      <div class="col-12 col-md-4 text-center text-white">
        <div class="vstack gap-2" data-aos="flip-up" data-aos-duration="1500">
          <h1 class="fw-bold big-font mb-0">2010</h1>
          <span>Year established</span>
        </div>
      </div>
      <div class="col-12 col-md-4 text-center text-white">
        <div class="vstack gap-2" data-aos="flip-up" data-aos-duration="1500">
          <h1 class="fw-bold big-font mb-0">60</h1>
          <p>
            Building projects registered and undergoing 
            GREEEN certification
          </p>
        </div>
      </div>
      <div class="col-12 col-md-4 text-center text-white">
        <div class="vstack gap-2" data-aos="flip-up" data-aos-duration="1500">
          <h1 class="fw-bold big-font mb-0">2</h1>
          <span>Projects awarded KAMAGONG</span>
        </div>
      </div>
      <div class="col-12 col-md-4 text-center text-white">
        <div class="vstack gap-2" data-aos="flip-up" data-aos-duration="1500">
          <h1 class="fw-bold big-font mb-0">100,000</h1>
          <span>Square meters impacted</span>
        </div>
      </div>
      <div class="col-12 col-md-4 text-center text-white">
        <div class="vstack gap-2" data-aos="flip-up" data-aos-duration="1500">
          <h1 class="fw-bold big-font mb-0">6,550</h1>
          <p>
            Potential mWh/yr energy use saved
          </p>
        </div>
      </div>
      <div class="col-12 col-md-4 text-center text-white">
        <div class="vstack gap-2" data-aos="flip-up" data-aos-duration="1500">
          <h1 class="fw-bold big-font mb-0">3,500</h1>
          <span>Potential tC02/year avoided</span>
        </div>
      </div>
    </div>
  </div>
</div>

<div style="margin-bottom: 5rem"></div>

{{-- BLOGS --}}
<div class="container overflow-hidden">
  @if ($blogs->isEmpty())
    <div class="text-center">
      <h4 class="fw-bold">NO LATEST BLOGS</h4>
    </div>
  @else
    <div class="mb-5">
      <div class="row">
        <div class="col-12 col-md-8 order-1 order-md-0">
          <div class="vstack gap-3">
            @if ($latestBlog->image != null)
              <a href="{{ url('blog-single/' . $latestBlog->title) }}">
                <img src="{{ asset('blogs/' . $latestBlog->image) }}" class="img-home-blog" alt="" data-aos="fade-down" data-aos-duration="1500">
              </a>
            @else
              <div class="overflow-hidden">
                <iframe width="1170" height="469" src="{{ $latestBlog->youtube_link }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
              </div>
            @endif
        
            <a href="{{ url('blog-single/' . $latestBlog->title) }}" class="hover-media">
              <h2 class="fw-semibold mb-0" data-aos="fade-up" data-aos-duration="1500">{{ $latestBlog->title }}</h2>
            </a>
        
            <div data-aos="fade-up" data-aos-duration="1500">
              {{ Str::limit(html_entity_decode(strip_tags($latestBlog->description)), 80, '...') }}
            </div>
          </div>
        
          <a href="{{ url('blog-single/' . $latestBlog->title) }}" class="color-light-green hover-learn">Learn More</a>
        </div>
        <div class="col-12 col-md order-0 order-md-1">
          <div class="w-100 bg-green d-flex justify-content-center align-items-center mb-3" style="height: 11rem">
            <h4 class="text-white">Place ad here</h4>
          </div>
          <div class="w-100 bg-green d-flex justify-content-center align-items-center mb-3" style="height: 11rem">
            <h4 class="text-white">Place ad here</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="row gy-4">
      @foreach ($smallBlog as $items)
        <div class="col-12 col-md-4" data-aos="flip-right" data-aos-duration="1500">
          <a href="{{ url('blog-single/' . $items->title) }}" class="text-decoration-none text-black">
            @if ($items->image != null)
              <a href="{{ url('blog-single/' . $items->title) }}">
                <img src="{{ asset('blogs/' . $items->image) }}" class="blog-small-img" alt="">
              </a>
            @else
              <div class="overflow-hidden">
                <iframe width="416" height="205" 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>
              </div>
            @endif
            <div class="border border-top-0 border-2 px-4 d-flex align-content-center blog-content">
              <div class="vstack gap-2">
                <a href="{{ url('blog-single/' . $items->title) }}" class="hover-media">
                  <span class="fw-semibold">{{ Str::limit(strip_tags($items->title), 40, '...') }} | {{ $items->created_at->format('Y') }}</span>
                </a>
      
                {{ Str::limit(html_entity_decode(strip_tags($items->description)), 60, '...') }}
              </div>
            </div>
          </a>
        </div>  
      @endforeach
    </div>
  @endif
</div>

<div style="margin-bottom: 10rem"></div>

<div class="container-fluid bg-gray">
  <div style="padding-top: 5rem"></div>

  <div class="container">
    <div class="row gy-5 d-flex justify-content-center overflow-hidden">
      <div class="col-12 col-md text-center">
        <img src="{{ asset('images/logo-samsung.png') }}" class="img-fluid" alt="" data-aos="zoom-out" data-aos-duration="1500">
      </div>
      <div class="col-12 col-md text-center">
        <img src="{{ asset('images/logo-tosot.png') }}" class="img-fluid" alt="" data-aos="zoom-out" data-aos-duration="1500">
      </div>
    </div>
  </div>

  <div style="padding-bottom: 5rem"></div>
</div>
@endsection