@extends('user.layouts.app')

@section('body_class', 'events-tolly')
@push('styles')
<style type="text/css">

</style>
@endpush

@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>Events at Tolly</li>
        </ul>
      </div>
    </div>
    <section class="sport-details pt-3">
      <div class="container">
        <div class="sport-details-plate">
          <div class="sport-nav">
            <ul>
              <li>
                <!-- <a href="#CurrentMonth">Current Month</a> -->
                 <a href="#" class="month-tab" data-target="CurrentMonth">Current Month</a>
              </li>
              <li>
                <!-- <a href="#PreviousMonth">Previous Month</a> -->
                 <a href="#" class="month-tab" data-target="PreviousMonth">Previous Month</a>
              </li>
              <li>
                <!-- <a href="#NextMonth">Next Month</a> -->
                 <a href="#" class="month-tab" data-target="NextMonth">Next Month</a>
              </li>
            </ul>
          </div>
          <div class="sport-nav-content">
            <div class="section" id="PreviousMonth">
              <div class="section-inner">
                <div class="title">
                  <h4 data-aos="fade-up">Previous Month</h4>
                </div> 
                <div class="custom-table">
                  <h5 data-aos="fade-up">Events: {{ \Carbon\Carbon::create()->month($previousMonth)->format('F') }} {{ $previousYear }}</h5>
                  <div class="overflow-auto">
                    <table data-aos="fade-up" class="payment-table-list">
                      <thead>
                        <tr>
                          <th>SL No</th>
                          <th>Date</th>
                          <th>Day</th>                        
                          <th>Time</th>
                          <th>Venue</th>
                          <th>Event</th>
                        </tr>	
                      </thead>             
                      <tbody>  
                        @if(!empty($previous_month_events_at_tolly))
                        @forelse($previous_month_events_at_tolly as $index => $event)       
                        <tr>
                          <td data-label="SL No">{{ $index + 1 }}</td>
                          <td data-label="Date">
                            @if($event->label_date)
                              {{ $event->label_date }}
                            @else
                              @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                  {{ $event->start_date->format('jS') }} to {{ $event->end_date->format('jS') }}
                              @else
                                  {{ $event->start_date->format('jS') }}
                              @endif
                            @endif
                          </td>

                          <td data-label="Day">
                              @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                  {{ $event->start_date->format('D') }} to {{ $event->end_date->format('D') }}
                              @else
                                  {{ $event->start_date->format('D') }}
                              @endif
                          </td>

                          <td data-label="Time">
                            @if($event->label_time)
                              {{ $event->label_time }}
                            @else
                              @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                  @php
                                      $startPeriod = $event->start_time ? $event->start_time->format('A') : null;
                                      $endPeriod   = $event->end_time ? $event->end_time->format('A') : null;
                                  @endphp

                                  @if($startPeriod && $endPeriod)
                                      @if($startPeriod === $endPeriod)
                                          {{ $startPeriod }}
                                      @else
                                          {{ $startPeriod }} to {{ $endPeriod }}
                                      @endif
                                  @elseif($startPeriod)
                                      {{ $startPeriod }}
                                  @elseif($endPeriod)
                                      {{ $endPeriod }}
                                  @else
                                      -
                                  @endif
                              @else
                                  @if($event->start_time)
                                      {{ $event->start_time->format('h:i a') }}
                                  @else
                                      -
                                  @endif
                              @endif
                            @endif
                          </td>

                          <td data-label="Venue">{{ $event->address ?? '-' }}</td>
                          <td data-label="Event"><strong>{{ $event->event_name ?? '-' }}</strong>
                            @if($event->event_description)
                              <br>{{ $event->event_description }}
                            @endif
                          </td>
                        </tr>
                        
                        @empty
                          <tr>
                              <td colspan="6" class="text-center text-muted">
                                  No events scheduled for this month.
                              </td>
                          </tr>
                        @endforelse
                        @endif

                      </tbody>
                    </table> 
                  </div>                 
                </div>             
              </div>
            </div>
            <div class="section" id="CurrentMonth">
              <div class="section-inner">
                <div class="title">
                  <h4 data-aos="fade-up">Current Month</h4>
                </div>  
                <div class="custom-table">
                  <h5 data-aos="fade-up">Events: {{ \Carbon\Carbon::create()->month($currentMonth)->format('F') }} {{ $currentYear }}</h5>
                  <table data-aos="fade-up" class="payment-table-list">
                    <thead>
                      <tr>
                        <th>SL No</th>
                        <th>Date</th>
                        <th>Day</th>                        
                        <th>Time</th>
                        <th>Venue</th>
                        <th>Event</th>
                      </tr>	
                    </thead>             
                    <tbody>    
                      @if(!empty($current_month_events_at_tolly))
                      @forelse($current_month_events_at_tolly as $index => $event)          
                      <tr>
                        <td data-label="SL No">{{ $index + 1 }}</td>

                        <td data-label="Date">
                          @if($event->label_date)
                            {{ $event->label_date }}
                          @else
                            @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                {{ $event->start_date->format('jS') }} to {{ $event->end_date->format('jS') }}
                            @else
                                {{ $event->start_date->format('jS') }}
                            @endif
                          @endif
                        </td>

                        <td data-label="Day">
                            @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                {{ $event->start_date->format('D') }} to {{ $event->end_date->format('D') }}
                            @else
                                {{ $event->start_date->format('D') }}
                            @endif
                        </td>

                        <td data-label="Time">
                          @if($event->label_time)
                            {{ $event->label_time }}
                          @else
                            @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                @php
                                    $startPeriod = $event->start_time ? $event->start_time->format('A') : null;
                                    $endPeriod   = $event->end_time ? $event->end_time->format('A') : null;
                                @endphp

                                @if($startPeriod && $endPeriod)
                                    @if($startPeriod === $endPeriod)
                                        {{ $startPeriod }}
                                    @else
                                        {{ $startPeriod }} to {{ $endPeriod }}
                                    @endif
                                @elseif($startPeriod)
                                    {{ $startPeriod }}
                                @elseif($endPeriod)
                                    {{ $endPeriod }}
                                @else
                                    -
                                @endif
                            @else
                                @if($event->start_time)
                                    {{ $event->start_time->format('h:i a') }}
                                @else
                                    -
                                @endif
                            @endif
                          @endif
                        </td>

                        <td data-label="Venue">{{ $event->address ?? '-' }}</td>
                        <td data-label="Event"><strong>{{ $event->event_name ?? '-' }}</strong>
                          @if($event->event_description)
                            <br>{{ $event->event_description }}
                          @endif
                        </td>
                      </tr>
                      
                      @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted">
                                No events scheduled for this month.
                            </td>
                        </tr>
                      @endforelse
                      @endif
                    </tbody>
                  </table>
                  
                </div>              
              </div>
            </div>


            <div class="section" id="NextMonth">
              <div class="section-inner">
                <div class="title">
                  <h4 data-aos="fade-up">Next Month</h4>
                </div> 
                <div class="custom-table">
                  <h5 data-aos="fade-up">Events: {{ \Carbon\Carbon::create()->month($nextMonth)->format('F') }} {{ $nextYear }}</h5>
                  <table data-aos="fade-up" class="payment-table-list">
                    <thead>
                      <tr>
                        <th>SL No</th>
                        <th>Date</th>
                        <th>Day</th>                        
                        <th>Time</th>
                        <th>Venue</th>
                        <th>Event</th>
                      </tr>	
                    </thead>             
                    <tbody>  
                      @if(!empty($next_month_events_at_tolly))
                      @forelse($next_month_events_at_tolly as $index => $event)       
                      <tr>
                        <td data-label="SL No">{{ $index + 1 }}</td>
                        <td data-label="Date">
                          @if($event->label_date)
                            {{ $event->label_date }}
                          @else
                            @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                {{ $event->start_date->format('jS') }} to {{ $event->end_date->format('jS') }}
                            @else
                                {{ $event->start_date->format('jS') }}
                            @endif
                          @endif
                        </td>

                        <td data-label="Day">
                            @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                {{ $event->start_date->format('D') }} to {{ $event->end_date->format('D') }}
                            @else
                                {{ $event->start_date->format('D') }}
                            @endif
                        </td>

                        <td data-label="Time">
                          @if($event->label_time)
                            {{ $event->label_time }}
                          @else
                            @if($event->end_date && !$event->end_date->equalTo($event->start_date))
                                @php
                                    $startPeriod = $event->start_time ? $event->start_time->format('A') : null;
                                    $endPeriod   = $event->end_time ? $event->end_time->format('A') : null;
                                @endphp

                                @if($startPeriod && $endPeriod)
                                    @if($startPeriod === $endPeriod)
                                        {{ $startPeriod }}
                                    @else
                                        {{ $startPeriod }} to {{ $endPeriod }}
                                    @endif
                                @elseif($startPeriod)
                                    {{ $startPeriod }}
                                @elseif($endPeriod)
                                    {{ $endPeriod }}
                                @else
                                    -
                                @endif
                            @else
                                @if($event->start_time)
                                    {{ $event->start_time->format('h:i a') }}
                                @else
                                    -
                                @endif
                            @endif
                          @endif
                        </td>


                        <td data-label="Venue">{{ $event->address ?? '-' }}</td>
                        <td data-label="Event"><strong>{{ $event->event_name ?? '-' }}</strong>
                          @if($event->event_description)
                            <br>{{ $event->event_description }}
                          @endif
                        </td>
                      </tr>
                      
                      @empty
                        <tr>
                            <td colspan="6" class="text-center text-muted">
                                No events scheduled for this month.
                            </td>
                        </tr>
                      @endforelse
                      @endif

                    </tbody>
                  </table>                  
                </div>             
              </div>
            </div>
            <!-- <div class="section" id="NextMonth">
              <div class="section-inner">
                <div class="title">
                  <h4 data-aos="fade-up">Next Month</h4>
                </div>
                <p data-aos="fade-up">Coming Soon...</p>    
              </div>
            </div> -->


            

            {{--<h5 data-aos="fade-up">Leave a Reply</h5>

            @if(Auth::check())
                <div class="logout_button" data-aos="fade-up">
                    Logged in as {{ Auth::user()->first_name }} {{ Auth::user()->middle_name }} {{ Auth::user()->last_name }}. 
                    <a href="{{ route('user.logout') }}"
                      onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
                        Log out?
                    </a>
                </div>

                <form id="logout-form" action="{{ route('user.logout') }}" method="GET" style="display: none;">
                    @csrf
                </form>

                <div class="form-inner" data-aos="fade-up">
                    <form id="event_tolly_leave_reply_frm" method="POST" action="{{ route('event-tolly.comments.store') }}">     
                        @csrf
                        <div class="form-row box-focus">
                            <label for="Comment">Comment</label>
                            <textarea name="comment" id="Comment" class="form-control" ></textarea>
                            <p id="commentErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                            <div class="footer-submit-btn">    
                                <button type="submit" class="btn btn-primary"><span>Post Comment</span></button>
                            </div> 
                        </div>
                    </form>
                </div>
            @else  
                <div class="form-inner" data-aos="fade-up">
                  <p>Your email address will not be published. Required fields are marked *</p>
                    <form id="event_tolly_leave_reply_frm" method="POST" action="{{ route('event-tolly.comments.store') }}">
                        @csrf
                        <ul class="inner-form-ul">
                          <li class="wide">
                              <div class="form-row box-focus">
                                  <div class="labelHead">Comment</div>
                                  <div class="outer-box">
                                      <label for="Comment">Comment </label>
                                      <textarea name="comment" id="Comment" class="form-control"></textarea>
                                  </div>                            
                              </div>   
                              <p id="commentErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                          </li>
                          <li class="wide">
                              <div class="form-row box-focus">
                                  <div class="labelHead">Name *</div>
                                  <div class="outer-box">
                                      <label for="Name_Event_Tolly">Name</label>
                                      <input type="text" name="name" id="Name_Event_Tolly" class="form-control">
                                  </div>                            
                              </div>   
                              <p id="nameErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                          </li>
                          <li class="wide">
                              <div class="form-row box-focus">
                                  <div class="labelHead">Email *</div>
                                  <div class="outer-box">
                                      <label for="Email_Event_Tolly">Email</label>
                                      <input type="email" name="email" id="Email_Event_Tolly" class="form-control">
                                  </div>                            
                              </div>   
                              <p id="emailErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                          </li>
                          <li class="wide">
                              <div class="form-row box-focus">
                                  <div class="labelHead">Website</div>
                                  <div class="outer-box">
                                      <label for="Website">Website</label>
                                      <input type="url" name="website" id="Website" class="form-control">
                                  </div>                            
                              </div>   
                              <p id="websiteErr" class="text-danger" style="font-style: italic; font-size: small;"></p>
                          </li>

                          <li class="wide">
                              <div class="form-row box-focus">
                                  <input type="checkbox" id="saveInfo" class="mr-2">
                                  <label for="saveInfo">Save my name, email, and website in this browser for the next time I comment.</label>
                              </div>
                          </li>

                        </ul>

                        <div class="footer-submit-btn">    
                            <button type="submit" class="btn btn-primary"><span>Post Comment</span></button>
                        </div> 
                    </form>
                </div>
            @endif  --}}
          </div>
        </div>
      </div>
    </section>
        
@endsection

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

@push('scripts')


<script>
    $("#event_tolly_leave_reply_frm").submit(function(event) {  
        event.preventDefault();

        var submitForm = $(this);
        var submitBtn = submitForm.find('button[type="submit"]');

        $.ajax({
            url: submitForm.attr('action'),
            data: new FormData(submitForm[0]),
            type: 'POST',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                submitBtn.attr("disabled", true).find('span').text('Posting...');
                submitForm.find('.text-danger').text(''); // Clear previous error messages
                submitForm.find('input').removeClass('is-invalid'); // Remove error styling
            },
            success: function(response) {
                submitBtn.attr("disabled", false).find('span').text('Post Comment');

                if (response.status == 200) {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.success(response.msg);
                    setTimeout(function() {
                        window.location.reload();
                    }, 3000); // Adjust the delay time as needed

                } else if (response.status == 422) {
                    // Handle validation errors
                    $.each(response.errors, function(key, value) {
                        $('#' + key + 'Err').text(value[0]); // Display validation error
                        $('[name="' + key + '"]').addClass('is-invalid'); // Highlight the invalid field
                    });
                } else if (response.status == 500) {
                    alertify.set('notifier', 'position', 'top-right');
                    alertify.error(response.msg);
                }
            },
            error: function(xhr) {
                submitBtn.attr("disabled", false).find('span').text('Post Comment');
                alertify.set('notifier', 'position', 'top-right');
                // alertify.error("An error occurred: " + xhr.responseText);
            }
        });
    });
</script>

<script>
  // document.addEventListener("DOMContentLoaded", function () {
  //   const nameField = document.getElementById("Name_Event_Tolly");
  //   const emailField = document.getElementById("Email_Event_Tolly");
  //   const websiteField = document.getElementById("Website");
  //   const saveInfoCheckbox = document.getElementById("saveInfo");

  //   // On load → Autofill if saved in localStorage
  //   if (localStorage.getItem("event_tolly_name")) {
  //       nameField.value = localStorage.getItem("event_tolly_name");
  //   }
  //   if (localStorage.getItem("event_tolly_email")) {
  //       emailField.value = localStorage.getItem("event_tolly_email");
  //   }
  //   if (localStorage.getItem("event_tolly_website")) {
  //       websiteField.value = localStorage.getItem("event_tolly_website");
  //   }
  //   if (nameField.value || emailField.value || websiteField.value) {
  //       saveInfoCheckbox.checked = true;
  //   }

  //   // On submit → Save or Clear
  //   document.getElementById("event_tolly_leave_reply_frm").addEventListener("submit", function () {
  //       if (saveInfoCheckbox.checked) {
  //           localStorage.setItem("event_tolly_name", nameField.value);
  //           localStorage.setItem("event_tolly_email", emailField.value);
  //           localStorage.setItem("event_tolly_website", websiteField.value);
  //       } else {
  //           localStorage.removeItem("event_tolly_name");
  //           localStorage.removeItem("event_tolly_email");
  //           localStorage.removeItem("event_tolly_website");
  //       }
  //   });
  // });

  document.addEventListener("DOMContentLoaded", function () {
    const nameField = document.getElementById("Name_Event_Tolly");
    const emailField = document.getElementById("Email_Event_Tolly");
    const websiteField = document.getElementById("Website");
    const saveInfoCheckbox = document.getElementById("saveInfo");
    const form = document.getElementById("event_tolly_leave_reply_frm");

    if (nameField && localStorage.getItem("event_tolly_name")) {
        nameField.value = localStorage.getItem("event_tolly_name");
    }
    if (emailField && localStorage.getItem("event_tolly_email")) {
        emailField.value = localStorage.getItem("event_tolly_email");
    }
    if (websiteField && localStorage.getItem("event_tolly_website")) {
        websiteField.value = localStorage.getItem("event_tolly_website");
    }
    if (saveInfoCheckbox && (nameField?.value || emailField?.value || websiteField?.value)) {
        saveInfoCheckbox.checked = true;
    }

    if (form) {
        form.addEventListener("submit", function () {
            if (saveInfoCheckbox?.checked) {
                if (nameField) localStorage.setItem("event_tolly_name", nameField.value);
                if (emailField) localStorage.setItem("event_tolly_email", emailField.value);
                if (websiteField) localStorage.setItem("event_tolly_website", websiteField.value);
            } else {
                localStorage.removeItem("event_tolly_name");
                localStorage.removeItem("event_tolly_email");
                localStorage.removeItem("event_tolly_website");
            }
        });
    }
  });

// show and hide purpose 
document.addEventListener("DOMContentLoaded", function() {
    const tabs = document.querySelectorAll(".month-tab");
    const sections = document.querySelectorAll(".sport-nav-content .section");

    function hideAllSections() {
        sections.forEach(section => section.style.display = "none");
    }

    // Initially show only Previous Month
    hideAllSections();
    const previousMonthSection = document.getElementById("PreviousMonth");
    if(previousMonthSection) previousMonthSection.style.display = "block";

    // Set Previous Month tab as active
    tabs.forEach(t => t.classList.remove("active"));
    const previousTab = document.querySelector('.month-tab[data-target="PreviousMonth"]');
    if(previousTab) previousTab.classList.add("active");

    tabs.forEach(tab => {
        tab.addEventListener("click", function(e) {
            e.preventDefault();
            const targetId = this.getAttribute("data-target");
            const targetSection = document.getElementById(targetId);

            if(targetSection) {
                hideAllSections();
                targetSection.style.display = "block";

                // Smooth scroll to the top of the section
                targetSection.scrollIntoView({ behavior: "smooth", block: "start" });

                // Update active tab
                tabs.forEach(t => t.classList.remove("active"));
                this.classList.add("active");
            }
        });
    });
});

</script>

@endpush