@extends('frontend.layout')

@section('content')

  @php
    $commissioner = getContent('commissioner');
    $principal = getContent('principal');
    $about = getContent('about');
    $course = getContent('course-link');
    $latestVideo = \App\Models\Video::latest('id')->first();

    // Quick-link buttons come from Static Content (admin: Static Content, type "home-buttons"):
    //   title = button label, route = page path (e.g. dr-pages/nirf/nirf) or a full http(s) URL,
    //   content = button colour class, priority = order. "priority" is a text column, so sort numerically.
    $homeButtons = getContents('home-buttons')->sortBy(fn($b) => (int) $b->priority)->values();
    $buttonColors = ['btn-primary', 'btn-secondary', 'btn-success', 'btn-danger', 'btn-warning', 'btn-info', 'btn-light', 'btn-dark'];
  @endphp

  <div class="col-xl-12" style="margin-top: px;">

    <style>
      /* Make the image fully responsive */
      .carousel-inner img {
        width: 100%;
        height: 100%;
      }
    </style>

    <div class="row">

      {{-- LEFT: COMMISSIONER + QUICK LINKS --}}
      <div class="col-sm-3 home-side home-top">

        <div class="card border-left-success shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">

                <h6 align="center" style="background-color: #ffab1f ;padding: 10px;border-radius: 5px;color:blue">
                  <b>{{ strtoupper($commissioner->title ?? 'Commissioner') }}</b></h6>

                @if($commissioner && $commissioner->image)
                  <img src="{{ asset('frontend/' . $commissioner->image) }}" width="260px" alt="Commissioner">
                @else
                  <img src="{{ asset('frontend/images/default-user.png') }}" width="260px" alt="Commissioner">
                @endif
                <br>
                <br>

                <div style="color:#01315A;">
                  @if($commissioner)
                    {!! $commissioner->content !!}
                  @else
                    <p class="text-muted">Content not available.</p>
                  @endif
                </div>

                @foreach ($homeButtons as $button)
                  @php
                    $isExternal = (bool) preg_match('#^https?://#i', (string) $button->route);
                    $colour = trim(strip_tags((string) $button->content));
                    $colour = in_array($colour, $buttonColors, true) ? $colour : 'btn-success';
                  @endphp
                  <p class="def"><a href="{{ $isExternal ? $button->route : ($button->route ? url($button->route) : '#') }}" {!! $isExternal ? 'target="_blank"' : '' !!}><button type="button" style="width: 230px"
                        class="btn {{ $colour }} def">{{ $button->title }}</button></a></p>
                @endforeach

              </div>
            </div>
          </div>
        </div>
      </div>

      {{-- CENTRE: SLIDER + ABOUT --}}
      <div class="col-sm-7">
        <br>
        <div id="demo" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            @foreach($slides as $index => $slide)
              <li data-target="#demo" data-slide-to="{{ $index }}" {!! $index === 0 ? 'class="active"' : '' !!}></li>
            @endforeach
          </ul>
          <div class="carousel-inner">
            @foreach($slides as $index => $slide)
              <div class="carousel-item {{ $index === 0 ? 'active' : '' }}">
                <img src="{{ asset('storage/' . $slide->image) }}" style="border-radius: 10px" alt="" width="1100"
                  height="500">
                <div class="carousel-caption">

                </div>
              </div>
            @endforeach
          </div>
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>

        <div class="card border-left-success shadow">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2" style="color:#01315A; font-weight: bold;">

                @if($about)
                  {!! $about->content !!}
                @else
                  <p class="text-muted">Content not available.</p>
                @endif

                <h3 style="font-size:18px; margin-top:10px;">
                  @if(optional($course)->image)
                    <a target="_blank" href="{{ asset('frontend/' . $course->image) }}">
                      {{ $course->title }}
                    </a>
                  @elseif(optional($course)->title)
                    <a target="_blank" href="#">
                      {{ $course->title }}
                    </a>
                  @endif
                </h3>

              </div>
            </div>
          </div>
        </div>

        <div class="clearfix"></div>
      </div>

      {{-- RIGHT: PRINCIPAL + NEWS --}}
      <div class="col-sm-2 home-side home-top-right" style="background-color:#4CAF50;color:#ffffff"><br>

        <h6 align="center" style="background-color: #ffab1f ;padding: 10px;border-radius: 5px;color:blue">
          <b>{{ strtoupper($principal->title ?? 'Principal') }}</b></h6>

        @if($principal && $principal->image)
          <img src="{{ asset('frontend/' . $principal->image) }}" width="200px" alt="Principal">
        @else
          <img src="{{ asset('frontend/images/default-user.png') }}" width="200px" alt="Principal">
        @endif
        <p></p>

        <div style="font-size: smaller;">
          @if($principal)
            {!! $principal->content !!}
          @else
            <p class="text-muted">Content not available.</p>
          @endif
        </div>

        <p align="center" style="background-color: #ffab1f ;padding: 10px;border-radius: 5px;color:blue"><b> News and
            Updates</b></p>

        <marquee direction='up' SCROLLDELAY=200 BEHAVIOR=scroll onMouseOver='this.stop();' onMouseOut='this.start();'>
          @foreach($news as $item)
            <li><a href="{{ asset('storage/' . $item->file) }}" target='_blank' style='color: white'>{{ $item->title }}</a>
              <img src="{{ asset('frontend/theme/img/new-gif-image.gif') }}" width='30px' /></li><br>
          @endforeach
        </marquee>

      </div>
    </div>
  </div>

  <!--Card system-->
  <br>
  <div class="col-xl-12">
    <div class="row">

      {{-- UPCOMING EVENTS --}}
      <div class="col-xl-3">
        <div class="card border-left-success shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Upcoming Events</div>
                @if($events->count())
                <marquee direction="up" scrollamount="2" style="height:200px;" onmouseover="this.stop();"
                  onmouseout="this.start();">
                  @foreach ($events as $event)
                    @if (!empty($event->file))
                      <a href="{{ asset('storage/' . $event->file) }}" target="_blank" style="color:#000000;">
                        <i class="fa fa-book"></i>
                        {{ $event->title }}
                      </a>
                    @else
                      <a href="#" style="color:#000000;">
                        <i class="fa fa-book"></i>
                        {{ $event->title }}
                      </a>
                    @endif
                    <br>
                  @endforeach
                </marquee>
                @else
                <p class="text-muted">No upcoming events.</p>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>

      {{-- ANNOUNCEMENTS --}}
      <div class="col-xl-3">
        <div class="card border-left-success shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Announcements</div>
                @if($announcements->count())
                <marquee direction="up" scrollamount="2" style="height:200px;" onmouseover="this.stop();"
                  onmouseout="this.start();">
                  @foreach($announcements as $announcement)
                    <a href="{{ asset('storage/' . $announcement->file) }}" target="_blank">
                      <img src="{{ asset('frontend/theme/img/new-gif-image.gif') }}" width="30px">
                      {{ $announcement->title }}
                    </a>
                    <br>
                  @endforeach
                </marquee>
                @else
                <p class="text-muted">No announcements.</p>
                @endif
              </div>
            </div>
          </div>
        </div>
      </div>

      {{-- VIDEOS --}}
      <div class="col-xl-3">
        <div class="card border-left-success shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Videos</div>
                @if($latestVideo)
                  <div class="home-video">{!! convertYoutube($latestVideo->video) !!}</div>
                  <p style="padding:5px;">{{ $latestVideo->title }}</p>
                @endif

                <center><a href="{{ route('video') }}"><button type="button" class="btn btn-primary">Read
                      More</button></a></center>
              </div>
            </div>
          </div>
        </div>
      </div>

      {{-- GALLERY --}}
      <div class="col-xl-3">
        <div class="card border-left-success shadow h-100 py-2">
          <div class="card-body">
            <div class="row no-gutters align-items-center">
              <div class="col mr-2">
                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">Gallery</div>
                <img src="{{ asset('frontend/theme/images/gallery.jpg') }}" />
                <p>&nbsp;</p>

                <center><a href="{{ route('gallery') }}"><button type="button" class="btn btn-primary">Read
                      More</button></a></center>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <br>
  </div>

@endsection