@extends('user.layouts.app')

@section('body_class', 'Tolly Fest 2025')

@section('content')
<section class="banner-slider">
  @foreach($bannerImages as $image)
  <div class="slider-item"><img src="{{ asset('/storage/distribution/images/banner_image/' . $image->image) }}"
      alt="Slide {{ $loop->iteration }}"></div>
  @endforeach
</section>

<div class="banner-inner-content">
      <div class="container">
        <ul class="bread-come">
          <li>
            <a href="/">Home</a>
          </li>
          <li>Tolly Fest – {{ date('Y') }}</li>
        </ul>
      </div>
    </div>

<section class="sport-details">
  <div class="container">
    <div class="sport-details-plate">
      <div class="sport-nav">
        <ul>
          <li>
            <a href="{{route('showTollyFestRegistration')}}">Tolly Fest Registration</a>
          </li>
          <li>
            <a href="#notices">Notices</a>
          </li>
          <li>
            <a href="#disciplines">Selected Participants</a>
          </li>
          <li>
            <a href="#participants">Team / Players / Disciplines</a>
          </li>
          <li>
            <a href="#schedules">Schedules</a>
          </li>
          <li>
            <a href="#results">Results</a>
          </li>
          <li>
            <a href="#PointsTable">Points Table</a>
          </li>
        </ul>
      </div>
      <div class="sport-nav-content">
        <div class="section" id="registration">
          <!-- <div class="section-inner">
                <div class="title">
                  <h4 data-aos="fade-up">Tolly Fest Registration</h4>
                </div>            
                <div class="section-description">
                  <div class="col-md-12 login-show-box">
                    <div class="member-login">
                      <div class="padlock">
                        <div class="padlock-icon">
                          <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 1059" width="780" height="1059">
                            <title>68aca3a8-80dd-403c-88a9-d444655ec042</title>
                            <style>
                              .s0 { fill: #ffffff } 
                            </style>
                            <g id="Objects">
                              <path id="&lt;Compound Path&gt;" fill-rule="evenodd" class="s0" d="m760.1 483.8v456c0 58.7-47.5 106.2-106.2 106.2h-520.9c-58.6 0-106.1-47.5-106.1-106.2v-456c0-58.7 47.5-106.2 106.1-106.2h28.9v-128.1c0-31.2 6.2-61.5 18.2-90.1 11.7-27.6 28.4-52.3 49.6-73.6 21.3-21.2 46.1-37.9 73.6-49.6 28.6-12.1 58.9-18.2 90.2-18.2 31.2 0 61.5 6.1 90.1 18.2 27.6 11.7 52.4 28.4 73.6 49.6 21.3 21.3 37.9 46 49.6 73.6 12.1 28.6 18.2 58.9 18.2 90.1v128.1h28.9c58.7 0 106.2 47.5 106.2 106.2zm-275 174.8c0-50.6-41-91.6-91.6-91.6-50.6 0-91.7 41-91.7 91.6 0 38.6 23.8 71.6 57.5 85.1v78.7c0 18.9 15.3 34.2 34.2 34.2 18.8 0 34.1-15.3 34.1-34.2v-78.7c33.7-13.5 57.5-46.5 57.5-85.1zm40.4-409.1c0-35.2-13.7-68.4-38.7-93.3-24.9-24.9-58.1-38.7-93.3-38.7-35.3 0-68.4 13.8-93.4 38.7-24.9 24.9-38.7 58.1-38.7 93.3v128.1h264.1z"/>
                            </g>
                          </svg>
                        </div>
                      </div>
                      <div class="verify-wrap">
                        <h3 class="text-center">TOLLY FEST 2025</h3>
                        <p>Please verify your membership.</p>
                      </div>
                      
                      <div class="change-content" id="">
                        <div class="tab-pane">
                          <form>
                            <div class="form-row box-focus">
                              <label for="MembershipNumber">Membership number</label>
                              <input id="MembershipNumber" type="tel" class="form-control" placeholder="" required />
                            </div>
                            <div class="form-row box-focus">
                              <select class="custom-selectpicker" data-placeholder="Member Type">
                                <option value="" disabled selected>Member Type</option>
                                <option value="1">Primary Member</option>
                                <option value="2">Member Spouse</option>
                              </select>
                            </div>
                            <div class="login-btn-outer">
                              <button type="submit" class="btn btn-primary" id="sendOtp">Send OTP</button>
                            </div>                    
                          </form>
                        </div>
                      </div>
                    </div>
                  </div> 
                </div>
              </div> -->
          <div class="container login-wrapper d-flex align-items-center justify-content-center">
            <div class="row w-100 justify-content-center">
              <div class="member-login-box">
                <div class="row g-0 login-card">

                  <!-- Login Form Side -->
                  <!-- <div class="col-md-12 login-show-box"> -->
                  <!-- <div class="member-login"> -->
                  <!-- <div class="padlock">
                  <div class="padlock-icon">
                    <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 1059" width="780" height="1059">
                      <title>68aca3a8-80dd-403c-88a9-d444655ec042</title>
                      <style>
                        .s0 { fill: #ffffff } 
                      </style>
                      <g id="Objects">
                        <path id="&lt;Compound Path&gt;" fill-rule="evenodd" class="s0" d="m760.1 483.8v456c0 58.7-47.5 106.2-106.2 106.2h-520.9c-58.6 0-106.1-47.5-106.1-106.2v-456c0-58.7 47.5-106.2 106.1-106.2h28.9v-128.1c0-31.2 6.2-61.5 18.2-90.1 11.7-27.6 28.4-52.3 49.6-73.6 21.3-21.2 46.1-37.9 73.6-49.6 28.6-12.1 58.9-18.2 90.2-18.2 31.2 0 61.5 6.1 90.1 18.2 27.6 11.7 52.4 28.4 73.6 49.6 21.3 21.3 37.9 46 49.6 73.6 12.1 28.6 18.2 58.9 18.2 90.1v128.1h28.9c58.7 0 106.2 47.5 106.2 106.2zm-275 174.8c0-50.6-41-91.6-91.6-91.6-50.6 0-91.7 41-91.7 91.6 0 38.6 23.8 71.6 57.5 85.1v78.7c0 18.9 15.3 34.2 34.2 34.2 18.8 0 34.1-15.3 34.1-34.2v-78.7c33.7-13.5 57.5-46.5 57.5-85.1zm40.4-409.1c0-35.2-13.7-68.4-38.7-93.3-24.9-24.9-58.1-38.7-93.3-38.7-35.3 0-68.4 13.8-93.4 38.7-24.9 24.9-38.7 58.1-38.7 93.3v128.1h264.1z"/>
                      </g>
                    </svg>
                  </div>
                </div> -->
                  <!-- <div class="verify-wrap"> -->
                  <!-- <h3 class="text-center">TOLLY FEST 2025</h3> -->
                  <!-- <p>Please verify your membership.</p> -->
                  <!-- </div> -->
                  <!-- Tab Content -->
                  <!-- <div class="change-content" id="">
                  <div class="tab-pane">
                    <form>
                      <div class="form-row box-focus">
                        <label for="MembershipNumber">Membership number</label>
                        <input id="MembershipNumber" type="tel" class="form-control" placeholder="" required />
                      </div>
                      <div class="form-row box-focus">
                        <select class="custom-selectpicker" data-placeholder="Member Type">
                          <option value="" disabled selected>Member Type</option>
                          <option value="1">Primary Member</option>
                          <option value="2">Member Spouse</option>
                        </select>
                      </div>
                      <div class="login-btn-outer">
                        <button type="submit" class="btn btn-primary" id="sendOtp">Send OTP</button>
                      </div>                    
                    </form>
                  </div>
                </div> -->
                  <!-- </div> -->
                  <!-- </div>           -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="section" id="notices">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Tolly Fest Notice</h4>
            </div>
            <div class="section-description scroll mhn">
              <table class="custom-table">
                <thead>
                  <tr>
                    <th class="slNo text-nowrap">Sl. No.</th>
                    <th class="date">Date</th>
                    <th class="particulars">Particulars</th>
                    <th class="file">File</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($tollyFestNotices as $tollyFestNotice)
                  <tr>
                    <td class="slNo">{{$loop->iteration}}</td>
                    <td class="date" data-label="Date">{{ optional($tollyFestNotice->date)->format('d-m-Y')}}</td>
                    <td class="particulars" data-label="Particulars">{{$tollyFestNotice->notice_title}}</td>
                    <td class="file" data-label="File">
                      @if($tollyFestNotice->file)
                        <a href="{{ asset('storage/tolly_fest_notices/' . $tollyFestNotice->file) }}" class="btn btn-primary view" target="_blank" rel="noopener">View</a>
                      @else
                        N/A
                      @endif
                    </td>
                  </tr>
                  @endforeach

                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="section" id="participants">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Tolly Fest Team / Players / Disciplines</h4>
            </div>
              <div class="section-description scroll mhn">
                <table class="custom-table">
                  <thead>
                    <tr>
                      <th class="slNo text-nowrap">Sl. No.</th>
                      <th class="date">Date</th>
                      <th class="particulars">Particulars</th>
                      <th class="file">File</th>
                    </tr>
                  </thead>
                  <tbody>
                    @forelse($tollyFestTeams as $team)
                    <tr>
                      <td class="slNo" data-label="SL No">{{ $loop->iteration }}</td>
                      <td class="date" data-label="Date">{{ optional($team->date)->format('d-m-Y') }}</td>
                      <td class="particulars" data-label="Particulars">{{ $team->notice_title }}</td>
                      <td class="file" data-label="File">
                        @if($team->file)
                          <a href="{{ asset('storage/tolly_fest_teams/' . $team->file) }}" class="btn btn-primary view" target="_blank" rel="noopener">View</a>
                        @else
                          N/A
                        @endif
                      </td>
                    </tr>
                    @empty
                    <tr>
                      <td class="slNo" data-label="SL No">-</td>
                      <td class="date" data-label="Date">-</td>
                      <td class="particulars" data-label="Particulars">No teams available</td>
                      <td class="file" data-label="File">-</td>
                    </tr>
                    @endforelse
                  </tbody>
                </table>
              </div>
          </div>
        </div>
        <div class="section" id="disciplines">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Tolly Fest Selected Participants</h4>
            </div>
            <div class="section-description scroll mhn">
              <table class="custom-table">
                <thead>
                  <tr>
                    <th class="slNo text-nowrap">Sl. No.</th>
                    <th class="date">Date</th>
                    <th class="particulars">Particulars</th>
                    <th class="file">File</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($tollyFestParticipants as $participant)
                  <tr>
                    <td class="slNo" data-label="SL No">{{ $loop->iteration }}</td>
                    <td class="date" data-label="Date">{{ optional($participant->date)->format('d-m-Y') }}</td>
                    <td class="particulars" data-label="Particulars">{{ $participant->notice_title }}</td>
                    <td class="file" data-label="File">
                      @if($participant->file)
                        <a href="{{ asset('storage/tolly_fest_notices/' . $participant->file) }}" class="btn btn-primary view" target="_blank" rel="noopener">View</a>
                      @else
                        N/A
                      @endif
                    </td>
                  </tr>
                  @empty
                  <tr>
                    <td class="slNo" data-label="SL No">-</td>
                    <td class="date" data-label="Date">-</td>
                    <td class="particulars" data-label="Particulars">No selected participants</td>
                    <td class="file" data-label="File">-</td>
                  </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="section" id="schedules">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Tolly Fest Schedules</h4>
            </div>
            <div class="section-description scroll mhn">
              <table class="custom-table">
                <thead>
                  <tr>
                    <th class="slNo text-nowrap">Sl. No.</th>
                    <th class="date">Date</th>
                    <th class="particulars">Particulars</th>
                    <th class="file">File</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($tollyFestSchedules as $schedule)
                  <tr>
                    <td class="slNo" data-label="SL No">{{ $loop->iteration }}</td>
                    <td class="date" data-label="Date">{{ optional($schedule->date)->format('d-m-Y') }}</td>
                    <td class="particulars" data-label="Particulars">{{ $schedule->notice_title }}</td>
                    <td class="file" data-label="File">
                      @if($schedule->file)
                        <a href="{{ asset('storage/tolly_fest_schedules/' . $schedule->file) }}" class="btn btn-primary view" target="_blank" rel="noopener">View</a>
                      @else
                        N/A
                      @endif
                    </td>
                  </tr>
                  @empty
                  <tr>
                    <td class="slNo" data-label="SL No">-</td>
                    <td class="date" data-label="Date">-</td>
                    <td class="particulars" data-label="Particulars">No schedules available</td>
                    <td class="file" data-label="File">-</td>
                  </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="section" id="results">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Tolly Fest Results</h4>
            </div>
            <div class="section-description scroll mhn">
              <table class="custom-table">
                <thead>
                  <tr>
                    <th class="slNo text-nowrap">Sl. No.</th>
                    <th class="date">Date</th>
                    <th class="particulars">Particulars</th>
                    <th class="file">File</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($tollyFestResults as $result)
                  <tr>
                    <td class="slNo" data-label="SL No">{{ $loop->iteration }}</td>
                    <td class="date" data-label="Date">{{ optional($result->date)->format('d-m-Y') }}</td>
                    <td class="particulars" data-label="Particulars">{{ $result->notice_title }}</td>
                    <td class="file" data-label="File">
                      @if($result->file)
                        <a href="{{ asset('storage/tolly_fest_results/' . $result->file) }}" class="btn btn-primary view" target="_blank" rel="noopener">View</a>
                      @else
                        N/A
                      @endif
                    </td>
                  </tr>
                  @empty
                  <tr>
                    <td class="slNo" data-label="SL No">-</td>
                    <td class="date" data-label="Date">-</td>
                    <td class="particulars" data-label="Particulars">No results available</td>
                    <td class="file" data-label="File">-</td>
                  </tr>
                  @endforelse
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="section" id="PointsTable">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Tolly Fest Points Table</h4>
            </div>
            <div class="section-description scroll mhn">
              <table class="custom-table">
                <thead>
                  <tr>
                    <th class="slNo text-nowrap">Sl. No.</th>
                    <th class="date">Date</th>
                    <th class="particulars">Particulars</th>
                    <th class="file">File</th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($tollyFestPoints as $point)
                  <tr>
                    <td class="slNo" data-label="SL No">{{ $loop->iteration }}</td>
                    <td class="date" data-label="Date">{{ optional($point->date)->format('d-m-Y') }}</td>
                    <td class="particulars" data-label="Particulars">{{ $point->point_title }}</td>
                    <td class="file" data-label="File">
                      @if($point->file)
                        <a href="{{ asset('storage/' . $point->file) }}" class="btn btn-primary view" target="_blank" rel="noopener">View</a>
                      @else
                        N/A
                      @endif
                    </td>
                  </tr>
                  @empty
                  <tr>
                    <td class="slNo" data-label="SL No">-</td>
                    <td class="date" data-label="Date">-</td>
                    <td class="particulars" data-label="Particulars">No points available</td>
                    <td class="file" data-label="File">-</td>
                  </tr>
                  @endforelse

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@endsection

@section('footer')
<!-- footer bottom appears here -->
@endsection

@push('scripts')
<script>
  let slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides(slideIndex += n);
  }

  function currentSlide(n) {
    showSlides(slideIndex = n);
  }

  function showSlides(n) {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
      slideIndex = 1
    }
    if (n < 1) {
      slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
  }
</script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Select all section toggle links (like #notices, #results, etc.)
    const navLinks = document.querySelectorAll(".sport-nav a[href^='#']");
    const sections = document.querySelectorAll(".sport-nav-content .section");

    // Function to hide all sections
    function hideAllSections() {
        sections.forEach(section => section.style.display = "none");
    }

    // Function to show a specific section
    function showSection(id) {
        hideAllSections();
        const target = document.querySelector(id);
        if (target) {
            target.style.display = "block";
            // Smooth scroll into view
            target.scrollIntoView({ behavior: "smooth", block: "start" });
        }
    }

    // Handle nav link clicks
    navLinks.forEach(link => {
        link.addEventListener("click", function (e) {
            const hash = this.getAttribute("href");
            if (!hash.startsWith("#")) return; // Ignore non-anchor links
            e.preventDefault();

            // Show the clicked section
            showSection(hash);

            // Update active class
            navLinks.forEach(l => l.classList.remove("active"));
            this.classList.add("active");

            // Update URL hash (no reload)
            history.replaceState(null, "", hash);
        });
    });

    // Handle page load with hash (e.g., /tolly-fest#results)
    const initialHash = window.location.hash;
    if (initialHash && document.querySelector(initialHash)) {
        showSection(initialHash);
        navLinks.forEach(l => {
            l.classList.toggle("active", l.getAttribute("href") === initialHash);
        });
    } else {
        // Default section (show 'Notices' first)
        showSection("#notices");
        document.querySelector(".sport-nav a[href='#notices']")?.classList.add("active");
    }
});
</script>

@endpush