@extends('user.layouts.app')


@section('body_class', 'reciprocal-list')


@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>Reciprocal List</li>
        </ul>
      </div>
    </div>

    <section class="tolly-fest-notice-sec">
      <div class="container">
        <div class="page-title">
          <h4 data-aos="fade-up">Reciprocal List</h4>
          <!-- <a href="{{ route('user.showReciprocalIntroduction') }}" class='btn btn-primary '>Add</a> -->
    <div class="d-flex justify-content-end mb-3">
    <a href="{{ route('user.showReciprocalIntroduction') }}" class="btn btn-primary">Add</a>
</div>
        </div>
      </div>
    </section>

    <section class="custom-table-section">
      <div class="container">
        <div class="reciprocal-list-table">
          <table class="custom-table">
            <thead>
              <tr>
                <th class="visit">Visit Date</th>
                <th class="city">City</th>
                <th class="club">Club</th>
                <th class="person">Person Count</th>
                <th class="accomodation">Accomodation</th>
                <th class="checkin">Check In Date</th>
                <th class="checkout">Check Out Date</th>
                <!-- <th class="file">File</th> -->
              </tr>
            </thead> 
            <tbody>
                @if(!empty($reciprocal_lists))
                @foreach($reciprocal_lists as $reciprocal_list)

                    <tr>
                        <!-- <td class="visit" data-label="Visit Date">{{ optional($reciprocal_list->visit_date)->format('Y-m-d') ?: '-' }}</td> -->
                        <td class="visit" data-label="Visit Date">
                            @if($reciprocal_list->visit_date)
                                {{ \Carbon\Carbon::parse($reciprocal_list->visit_date)->format('d-m-Y') }}
                            @else
                                -
                            @endif
                        </td>
                        <td class="city" data-label="City">{{ $reciprocal_list->affiliated_city_name ?? '-' }}</td>
                        <td class="club" data-label="Club">{{ $reciprocal_list->affiliated_club_name ?? '-' }}</td>
                        <td class="person" data-label="Person Count">{{ $reciprocal_list->no_of_visit_person ?? '-' }}</td>
                        <td class="accomodation" data-label="Accomodation">
                            @if($reciprocal_list->is_accomodation == 1)
                            Yes
                            @elseif($reciprocal_list->is_accomodation == 0)
                            No
                            @else
                            -
                            @endif
                        </td>
                        <!-- <td class="checkin" data-label="Checkin Date">{{ !empty($reciprocal_list->checking_date) ? \Carbon\Carbon::parse($reciprocal_list->checking_date)->format('Y-m-d') : '-' }}</td>
                        <td class="checkout" data-label="Checkout Date">{{ !empty($reciprocal_list->checkout_date ) ? \Carbon\Carbon::parse($reciprocal_list->checkout_date)->format('Y-m-d') : '-' }}</td> -->
                        <td class="checkin" data-label="Checkin Date">
                            @if(!empty($reciprocal_list->checking_date))
                                {{ \Carbon\Carbon::parse($reciprocal_list->checking_date)->format('d-m-Y') }}
                            @else
                                -
                            @endif
                        </td>
                        <td class="checkout" data-label="Checkout Date">
                            @if(!empty($reciprocal_list->checkout_date))
                                {{ \Carbon\Carbon::parse($reciprocal_list->checkout_date)->format('d-m-Y') }}
                            @else
                                -
                            @endif
                        </td>
                    </tr>   

                @endforeach
              @else   
                    <tr>    
                        <td>No Data Found</td>
                    </tr>
              @endif
            </tbody>
          </table>
        </div>
      </div>

      <!-- // --- Modal to view the specific data  -->
       <!-- View Data Modal -->
<div class="modal fade" id="viewDataModal" tabindex="-1" aria-labelledby="viewDataModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="viewDataModalLabel">Reciprocal Visit Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <tbody>
            <tr><th>Visit Date</th><td id="modalVisitDate"></td></tr>
            <tr><th>City</th><td id="modalCity"></td></tr>
            <tr><th>Club</th><td id="modalClub"></td></tr>
            <tr><th>Person Count</th><td id="modalPersonCount"></td></tr>
            <tr><th>Accomodation</th><td id="modalAccomodation"></td></tr>
            <tr><th>Check In Date</th><td id="modalCheckin"></td></tr>
            <tr><th>Check Out Date</th><td id="modalCheckout"></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

    </section>


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

@push('scripts')
<script>
$(document).ready(function(){
    $('.view').on('click', function(e){
        e.preventDefault();

        $('#modalVisitDate').text($(this).data('visit'));
        $('#modalCity').text($(this).data('city'));
        $('#modalClub').text($(this).data('club'));
        $('#modalPersonCount').text($(this).data('person'));
        $('#modalAccomodation').text($(this).data('accomodation'));
        $('#modalCheckin').text($(this).data('checkin'));
        $('#modalCheckout').text($(this).data('checkout'));

        $('#viewDataModal').modal('show');
    });
});
</script>

@endpush