@extends('user.layouts.app')

@push('styles')
<style type="text/css">
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.star-rating input {
  display: none;
}
.star-rating label {
  font-size: 2rem;
  color: #ccc;
  cursor: pointer;
  padding: 0 0.1rem;
}
.star-rating input:checked ~ label {
  color: #ffc107;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #ffc107;
}
.badge.bg-warning { background-color: #ffc107; color: #000; }
.badge.bg-info { background-color: #17a2b8; color: #fff; }
.badge.bg-success { background-color: #28a745; color: #fff; }
.badge.bg-secondary { background-color: #6c757d; color: #fff; }
</style>
@endpush
@section('body_class', 'member-feedback')
@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>Feedback Register</li>
    </ul>
  </div>
</div>
<section class="sport-details pt-0">
  <div class="container">
    <div class="sport-details-plate">
      <div class="sport-nav">
        <ul>
          <li>
            <a href="#Suggestions">Suggestions</a>
          </li>
          <li>
            <a href="#Rating">Rating</a>
          </li>
          <li>
            <a href="#Polling">Polling</a>
          </li>
          <li>
            <a href="#History">History</a>
          </li>
        </ul>
      </div>
      <div class="sport-nav-content">
        <div class="section" id="Suggestions">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Member Suggestion</h4>
            </div>
            <div class="section-description">
              <div class="inner-form login-show-box">
                <form id="memberSuggesion" method="post">
                  @csrf
                  <ul class="inner-form-ul">
                    <li>
                      <div class="form-row box-focus">
                        <label class="custom-select-label" for="location_id">Select Department <span>*</span></label>
                        <select class="custom-selectpicker" name="location_id" id="location_id" data-placeholder="Select Department" data-floating-label="true">
                          <option value="" disabled selected hidden></option>
                          @if(!empty($locations))
                          @foreach($locations as $location)
                          <option value="{{ $location->id }}">{{ $location->location_name }}</option>
                          @endforeach
                          @endif
                        </select>
                      </div>
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        <div class="outer-box">
                          <label for="suggestion_date">Suggestion Date <span>*</span></label>
                          <input id="suggestion_date" autocomplete="off" name="suggestion_date" type="text" class="form-control" placeholder="" required />
                        </div>
                      </div>
                    </li>
                    <li class="wide">
                      <div class="form-row box-focus">
                        <!-- <div class="labelHead">Comments <span>*</span></div> -->
                        <div class="outer-box">
                          <label for="Comments">Comments</label>
                          <textarea id="Comments" class="form-control textarea-height" name="comment"></textarea>
                        </div>
                      </div>
                    </li>

                    <ul class="inner-form-ul mx-0 w-100">
                    <li class="">
                      <div class="form-row browse-row">
                        <!-- <div class="labelHead">Attach Image</div> -->
                        <div class="outer-box">
                          <input type="file" id="upload_statement" class="file-border" name="image_one"
                            accept="image/*" />
                          <span class="upload-btn" id="upload-btn"></span>
                        </div>
                        <p>Upload only JPG/PNG image upto 5MB size</p>
                        <div id="preview_one" class="image-preview"></div>
                      </div>
                    </li>

                    <li class="">
                      <div class="form-row browse-row">
                        <!-- <div class="labelHead">Attach Image</div> -->
                        <div class="outer-box">
                          <input type="file" id="upload_statement2" class="file-border" name="image_two"
                            accept="image/*" />
                          <span class="upload-btn" id="upload-btn2"></span>
                        </div>
                        <p>Upload only JPG/PNG image upto 5MB size</p>
                        <div id="preview_two" class="image-preview"></div>
                      </div>
                    </li>

                    <li class="">
                      <div class="form-row browse-row">
                        <!-- <div class="labelHead">Attach Image</div> -->
                        <div class="outer-box">
                          <input type="file" id="upload_statement3" class="file-border" name="image_three"
                            accept="image/*" />
                          <span class="upload-btn" id="upload-btn3"></span>
                        </div>
                        <p>Upload only JPG/PNG image upto 5MB size</p>
                        <div id="preview_three" class="image-preview"></div>
                      </div>
                    </li>
                    </ul>

                    {{--<li class="wide">
                      <div class="form-row box-focus">
                        <!-- <div class="labelHead">Comments <span>*</span></div> -->
                        <div class="outer-box">
                          <label for="Comments">Comments</label>
                          <textarea id="Comments" class="form-control textarea-height" name="comment"></textarea>
                        </div>
                      </div>
                    </li>--}}
                    <li>
                      <div class="form-row box-focus">
                        <!-- <label for="YourEmailId">Your Email Id</label> -->
                        <!-- <div class="labelHead">Your Email Id <span>*</span></div> -->
                        <div class="outer-box">
                          <label for="YourEmailId">Email Id</label>
                          <input id="YourEmailId" type="email" value="{{ aes_decrypt(auth()->user()->email) ?? ''}}" name="email"
                            class="form-control" />
                        </div>
                      </div>

                    </li>
                    <li>
                      <div class="form-row box-focus">
                        <!-- <label for="MobileNumber">Your Contact No</label> -->
                        <!-- <div class="labelHead">Your Contact No <span>*</span></div> -->
                        <div class="outer-box">
                          <label for="MobileNumber">Contact No</label>
                          <input id="MobileNumber" type="number" name="contact_us" class="form-control"
                            value="{{aes_decrypt(auth()->user()->phone)}}" />
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="login-btn-outer position-relative">
                        <button type="submit" class="btn btn-primary " id="submitBtn">
                          <span class="btn-text ">Submit</span>
                          <span class="loader spinner-border spinner-border-sm text-light d-none" role="status"></span>
                        </button>
                      </div>
                    </li>
                  </ul>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="section" id="Rating">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Member Ratings</h4>
            </div>
            <div class="section-description">
              <div class="inner-form login-show-box">
                <form method="POST" id="member_rating">
                  @csrf
                  <ul class="inner-form-ul">
                    <li>
                      <div class="form-row box-focus">
                        <label class="custom-select-label" for="facility">Facility</label>
                        <select class="custom-selectpicker" name="facility" id="facility" data-placeholder="Select Department" data-floating-label="true">
                          <option value="" disabled selected hidden></option>
                          @if(!empty($locations))
                          @foreach($locations as $location)
                          <option value="{{ $location->id }}">{{ $location->location_name }}</option>
                          @endforeach
                          @endif
                        </select>
                      </div>
                    </li>
                    <li>
                      <div class="form-row box-focus">
                        <div class="outer-box">
                          <label for="useDate">Date of Use</label>
                          <input id="useDate" autocomplete="off" name="date_of_use" type="text" class="form-control" placeholder=""
                            required />
                        </div>
                      </div>
                    </li>
                    <li class="wide">
                      <div class="form-row box-focus">
                        <!-- <div class="labelHead">Comments</div> -->
                        <div class="outer-box">
                          <label for="CommentsRating">Please enter comments</label>
                          <textarea id="CommentsRating" name="comments" class="form-control textarea-height"></textarea>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="form-row ">
                        <div class="labelHead">Ratings</div>
                        <div class="radio-group">
                          <label for="Ratings1" class="custom-radio">
                            <input type="radio" name="ratings" id="Ratings1" value="excellent" />
                            <span class="radio-mark"></span>
                            Excellent
                          </label>
                          <label for="Ratings2" class="custom-radio">
                            <input type="radio" name="ratings" id="Ratings2" value="very good" />
                            <span class="radio-mark"></span>
                            Very Good
                          </label>
                          <label for="Ratings3" class="custom-radio">
                            <input type="radio" name="ratings" id="Ratings3" value="good" />
                            <span class="radio-mark"></span>
                            Good
                          </label>
                          <label for="Ratings4" class="custom-radio">
                            <input type="radio" name="ratings" id="Ratings4" value="fair" />
                            <span class="radio-mark"></span>
                            Fair
                          </label>
                          <label for="Ratings5" class="custom-radio">
                            <input type="radio" name="ratings" id="Ratings5" value="poor" />
                            <span class="radio-mark"></span>
                            Poor
                          </label>
                        </div>
                      </div>
                    </li>
                    <li>
                      <div class="form-row ">
                        <div class="mb-3">
                          <div class="labelHead">Detail Ratings</div>
                          <div class="radio-group">
                            <label for="DetailRatings1" class="custom-radio">
                              <input type="radio" name="detail_ratings" value='1' id="DetailRatings1" />
                              <span class="radio-mark"></span>
                              Yes
                            </label>
                            <label for="DetailRatings2" class="custom-radio">
                              <input type="radio" name="detail_ratings" value='0' id="DetailRatings2" />
                              <span class="radio-mark"></span>
                              No
                            </label>
                          </div>
                        </div>

                        <!-- Dynamic criteria will be injected here -->
                        <div id="detail-ratings-wrapper"></div>

                        <!-- <div class="form-row box-focus">
                        <div class="labelHead">Ambience</div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings_detail_1" id="AmbienceRatings1" class="radio" >
                          <label for="AmbienceRatings1" class="animate-label">Excellent</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings_detail_1" id="AmbienceRatings2" class="radio">
                          <label for="AmbienceRatings2" class="animate-label">Very Good</label>
                        </div>
                        
                        <div class="checkLabel">
                          <input type="radio" name="ratings_detail_1" id="AmbienceRatings3" class="radio">
                          <label for="AmbienceRatings3" class="animate-label">Good</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings_detail_1" id="AmbienceRatings4" class="radio">
                          <label for="AmbienceRatings4" class="animate-label">Fair</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings_detail_1" id="AmbienceRatings5" class="radio">
                          <label for="AmbienceRatings5" class="animate-label">Poor</label>
                        </div>

                      </div> -->

                        <!-- <div class="form-row box-focus">
                        <div class="labelHead">Cleanliness</div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings2" id="CleanlinessRatings1" class="radio" >
                          <label for="CleanlinessRatings1" class="animate-label">Excellent</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings2" id="AmbienceRatings2" class="radio">
                          <label for="AmbienceRatings2" class="animate-label">Very Good</label>
                        </div>
                        
                        <div class="checkLabel">
                          <input type="radio" name="ratings2" id="AmbienceRatings3" class="radio">
                          <label for="AmbienceRatings3" class="animate-label">Good</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings2" id="AmbienceRatings4" class="radio">
                          <label for="AmbienceRatings4" class="animate-label">Fair</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings2" id="AmbienceRatings5" class="radio">
                          <label for="AmbienceRatings5" class="animate-label">Poor</label>
                        </div>

                      </div>

                      <div class="form-row box-focus">
                        <div class="labelHead">Cleanliness</div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings3" id="CleanlinessRatings1" class="radio" >
                          <label for="CleanlinessRatings1" class="animate-label">Excellent</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings3" id="AmbienceRatings2" class="radio">
                          <label for="AmbienceRatings2" class="animate-label">Very Good</label>
                        </div>
                        
                        <div class="checkLabel">
                          <input type="radio" name="ratings3" id="AmbienceRatings3" class="radio">
                          <label for="AmbienceRatings3" class="animate-label">Good</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings3" id="AmbienceRatings4" class="radio">
                          <label for="AmbienceRatings4" class="animate-label">Fair</label>
                        </div>

                        <div class="checkLabel">
                          <input type="radio" name="ratings3" id="AmbienceRatings5" class="radio">
                          <label for="AmbienceRatings5" class="animate-label">Poor</label>
                        </div>

                      </div> -->

                      </div>
                      <!-- Review dropdown -->
                      <!-- <select name="review_name" id="review_name" class="form-control">
                        <option value="">-- Select Review --</option>
                      </select> -->
                    </li>
                    <li>
                      <div class="login-btn-outer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                      </div>
                    </li>
                  </ul>
                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="section" id="Polling">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">Member Polling</h4>
            </div>
            <div class="section-description overflow-auto">
              {{-- <table class="payment-table-list">
                <tr>
                  <th>Sl. No.</th>
                  <th>Topic / Particular</th>
                  <th>Closing Date</th>
                  <th>Action</th>
                </tr>

                @if(!empty($pollings))
                @foreach($pollings as $polling)
                <tr>
                  <td> Poll- {{ $polling->id }}</td>
                  <td>{{ $polling->polling_name }}</td>
                  <td>{{ optional($polling->end_date_time)->format('Y-m-d') }}</td>
                  <td>
                    <form action="">
                      <div class="form-row box-focus">
                        <!-- <div class="labelHead">Ratings</div> -->
                        <div class="checkLabel">
                          <input type="radio" name="ratings" id="Ratings1" class="radio" />
                          <label for="Ratings1">Excellent</label>
                        </div>
                        <div class="checkLabel">
                          <input type="radio" name="ratings" id="Ratings2" class="radio" />
                          <label for="Ratings2">Very Good</label>
                        </div>
                        <div class="checkLabel">
                          <input type="radio" name="ratings" id="Ratings3" class="radio" />
                          <label for="Ratings3">Good</label>
                        </div>
                        <div class="checkLabel">
                          <input type="radio" name="ratings" id="Ratings4" class="radio" />
                          <label for="Ratings4">Fair</label>
                        </div>
                        <div class="checkLabel">
                          <input type="radio" name="ratings" id="Ratings5" class="radio" />
                          <label for="Ratings5">Poor</label>
                        </div>
                      </div>
                    </form>
                  </td>
                </tr>
                @endforeach
                @endif


              </table>

              --}}
              <table class="payment-table-list green">
                <tr>
                  <th>Polling No.</th>
                  <th>Topic / Particular</th>
                  <th>Closing Date</th>
                  <th>Action</th>
                </tr>

                @if(isset($pollings) && $pollings->count() > 0)
                @foreach($pollings as $polling)
                @php
                $userRating = $ratings[$polling->id] ?? null;
                $pollingReference = 'TC/PS/' . optional($polling->created_at)->format('Y') . '/' . str_pad((string) $polling->id, 4, '0', STR_PAD_LEFT);
                @endphp
                <tr>
                  <td>{{ $pollingReference }}</td>
                  <!-- <td>{{ $polling->polling_name }}</td> -->
                  <td>{!! $polling->polling_description !!}</td>
                  {{-- <td>{{ optional($polling->end_date_time)->format('Y-m-d') }}</td> --}}
                  <td>{{ optional($polling->end_date_time)->format('d-m-Y') }}</td>
                  <td class="polling-action-cell">
                    <form class="polling-rating-form">
                      <div class="polling-rating-wrap">
                        <div class="radio-group polling-radio-group">
                          <label class="custom-radio polling-custom-radio">
                            <input type="radio" name="ratings_{{ $polling->id }}" value="5" class="rating-input"
                              data-polling-id="{{ $polling->id }}" {{ $userRating=='5' ? 'checked' : '' }}>
                            <span class="radio-mark"></span>
                            <span>5 (Excellent)</span>
                          </label>

                          <label class="custom-radio polling-custom-radio">
                            <input type="radio" name="ratings_{{ $polling->id }}" value="4" class="rating-input"
                              data-polling-id="{{ $polling->id }}" {{ $userRating=='4' ? 'checked' : '' }}>
                            <span class="radio-mark"></span>
                            <span>4 (Very Good)</span>
                          </label>

                          <label class="custom-radio polling-custom-radio">
                            <input type="radio" name="ratings_{{ $polling->id }}" value="3" class="rating-input"
                              data-polling-id="{{ $polling->id }}" {{ $userRating=='3' ? 'checked' : '' }}>
                            <span class="radio-mark"></span>
                            <span>3 (Good)</span>
                          </label>

                          <label class="custom-radio polling-custom-radio">
                            <input type="radio" name="ratings_{{ $polling->id }}" value="2" class="rating-input"
                              data-polling-id="{{ $polling->id }}" {{ $userRating=='2' ? 'checked' : '' }}>
                            <span class="radio-mark"></span>
                            <span>2 (Fair)</span>
                          </label>

                          <label class="custom-radio polling-custom-radio">
                            <input type="radio" name="ratings_{{ $polling->id }}" value="1" class="rating-input"
                              data-polling-id="{{ $polling->id }}" {{ $userRating=='1' ? 'checked' : '' }}>
                            <span class="radio-mark"></span>
                            <span>1 (Poor)</span>
                          </label>
                        </div>
                      </div>
                    </form>
                  </td>
                </tr>
                @endforeach
                @else
                <tr>
                  <td colspan="4" class="text-center green">No data found</td>
                </tr>
                @endif
              </table>

            </div>
          </div>
        </div>
        <div class="section" id="History">
          <div class="section-inner">
            <div class="title">
              <h4 data-aos="fade-up">History</h4>
            </div>
            <div class="tab">
              <div class="listTab" data-aos="fade-up">
                <ul>
                  <li class="active" data-id="Suggestion">Suggestion</li>
                  <li data-id="Rating">Rating</li>
                  <li data-id="Polling">Polling</li>
                </ul>
              </div>

              <div class="diewDetails active" id="Suggestion" >
                <table class="payment-table-list green">
                  <tr>
                    <th>Suggestion No.</th>
                    <th>Date</th>
                    <th>Facility Name</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
                  @if(isset($suggesions) && $suggesions->count() > 0)
                  @foreach($suggesions as $suggesion)
                  <tr>
                    <td>{{ $suggesion->reference_no ?? ('TC/SS/' . optional($suggesion->created_at)->format('Y') . '/' . str_pad((string) $suggesion->id, 4, '0', STR_PAD_LEFT)) }}</th>
                    {{-- <td>{{ optional($suggesion->created_at)->format('Y-m-d') }}</td> --}}
                    <td>{{ optional($suggesion->created_at)->format('d-m-Y') }}</td>
                    <td>{{ optional($suggesion->location)->location_name ?? 'N/A' }}</td>
                    <td>
                      @if($suggesion->status == 1)
                        <span class="badge bg-success">Open</span>
                      @else
                        <span class="badge bg-secondary">Closed</span>
                      @endif
                    </td>
                    <td>
                      <a href="javascript:void(0)" class="btn btn-primary view-suggesion-details"
                        data-id="{{ $suggesion->id }}">
                        View
                      </a>
                    </td>
                  </tr>
                  @endforeach
                  @else
                  <tr>
                    <td colspan="5" class="text-center green">No data found</td>
                  </tr>
                  @endif
                </table>
              </div>
              <div class="diewDetails" id="Rating" data-aos="fade-up">
                <table class="payment-table-list green">
                  <tr>
                    <th>Rating No.</th>
                    <th>Date</th>
                    <th>Facility Name</th>
                    <th>Action</th>
                  </tr>
                  @if(isset($member_ratings) && $member_ratings->count() > 0)
                  @foreach($member_ratings as $member_rating)
                  <tr>
                    <td>{{ $member_rating->reference_no ?? ('TC/RS/' . optional($member_rating->created_at)->format('Y') . '/' . str_pad((string) $member_rating->id, 4, '0', STR_PAD_LEFT)) }}</td>
                    {{-- <td>{{ optional($member_rating->created_at)->format('Y-m-d')}}</td> --}}
                    <td>{{ optional($member_rating->created_at)->format('d-m-Y')}}</td>
                    <td>{{ optional($member_rating->location)->location_name ?? 'N/A' }}</td>
                    <td><a class="btn btn-primary view-rating" href="javascript:void()"
                        data-rating-name="{{ optional($member_rating->location)->location_name ?? 'N/A'}}"
                        {{-- data-rating-date="{{ optional($member_rating->created_at)->format('Y-m-d') }}" --}}
                        data-rating-date="{{ optional($member_rating->created_at)->format('d-m-Y') }}"
                        data-rating-ref="{{ $member_rating->reference_no ?? ('TC/RS/' . optional($member_rating->created_at)->format('Y') . '/' . str_pad((string) $member_rating->id, 4, '0', STR_PAD_LEFT)) }}"
                        data-rating="{{ $member_rating->rating ?? 'N/A' }}"
                        data-detailed-ratings='@json($member_rating->detailRating)'>
                        View</a></td>
                  </tr>
                  @endforeach
                  @else
                  <tr>
                    <td colspan="4" class="text-center green">No data found</td>
                  </tr>
                  @endif
                </table>
              </div>
              <div class="diewDetails" id="Polling" data-aos="fade-up">
                <table class="payment-table-list green">
                  <tr>
                    <th>Polling No.</th>
                    <th>Date</th>
                    <th>Polling for</th>
                    <th>Action</th>
                  </tr>
                  @if(isset($histories) && $histories->count() > 0)
                  @foreach($histories as $history)
                  <tr>
                    <td>{{ $history->reference_no ?? ('TC/PS/' . optional($history->created_at)->format('Y') . '/' . str_pad((string) $history->id, 4, '0', STR_PAD_LEFT)) }}</td>
                    {{-- <td>{{ optional($history->created_at)->format('Y-m-d') }}</td> --}}
                    <td>{{ optional($history->created_at)->format('d-m-Y') }}</td>
                    <td>{{ $history->polling_list->polling_name }}</td>
                    <td>
                      <a href="javascript:void(0)" class="btn btn-primary view-polling"
                        data-id="{{ $history->reference_no ?? ('TC/PS/' . optional($history->created_at)->format('Y') . '/' . str_pad((string) $history->id, 4, '0', STR_PAD_LEFT)) }}"
                        data-name="{{ $history->polling_list->polling_name }}"
                        {{-- data-date="{{ optional($history->created_at)->format('Y-m-d') }}" --}}
                        data-date="{{ optional($history->created_at)->format('d-m-Y') }}"
                        data-rating="{{ $history->rating ?? 'N/A' }}" data-comments="{{ $history->comments ?? 'N/A' }}">
                        View
                      </a>
                    </td>
                  </tr>
                  @endforeach
                  @else
                  <tr>
                    <td colspan="4" class="text-center green">No data found</td>
                  </tr>
                  @endif
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- -- Suggesion listing Modal --  -->
  <div class="modal fade" id="suggesionDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Suggesion Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="suggestion-info">
            <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Suggesion No:</strong> <span id="modal-suggesion-no"></span></p>
            <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Facility Name:</strong> <span id="modal-location-name"></span></p>
            <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Date:</strong> <span id="modal-suggesion-date"></span></p>
            <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Status:</strong> <span id="modal-status"></span></p>
            <!-- <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Open Count:</strong> <span id="modal-open-count"></span></p>
            <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Reply Count:</strong> <span id="modal-reply-count"></span></p>
            <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Closed Count:</strong> <span id="modal-closed-count"></span></p> -->
            <hr>
            <p><strong class="text-dark green">Your Suggestion:</strong></p>
            <p id="modal-comment" class="p-2 bg-light border rounded"></p>
            <div id="modal-suggestion-images" class="mt-3"></div>
            <!-- <div id="modal-lifecycle" class="mt-3"></div> -->
          </div>

          <div id="reply-section" class="mt-3" style="display:none;">
            <hr>
            <p><strong class="text-dark green">Reply from <span id="replier-name"></span>:</strong> <small class="text-muted" id="reply-date"></small></p>
            <div id="modal-reply-text" class="p-2 bg-info text-white border rounded mb-3"></div>
            
            <div id="feedback-form-wrapper">
                <form id="suggestionFeedbackForm">
                    @csrf
                    <input type="hidden" name="suggestion_id" id="feedback-suggestion-id">
                    <div class="form-group">
                        <label><strong>Rate this reply:</strong></label>
                        <div class="star-rating">
                            <input type="radio" id="star5" name="star_rating" value="5" /><label for="star5" title="5 stars">★</label>
                            <input type="radio" id="star4" name="star_rating" value="4" /><label for="star4" title="4 stars">★</label>
                            <input type="radio" id="star3" name="star_rating" value="3" /><label for="star3" title="3 stars">★</label>
                            <input type="radio" id="star2" name="star_rating" value="2" /><label for="star2" title="2 stars">★</label>
                            <input type="radio" id="star1" name="star_rating" value="1" /><label for="star1" title="1 star">★</label>
                        </div>
                    </div>

                    <div id="reopen-section" class="mt-2" style="display:none;">
                        <label><strong>Do you want to reopen this suggestion?</strong></label>
                        <div class="radio-group">
                            <label class="custom-radio">
                                <input type="radio" name="reopen" value="yes"> <span class="radio-mark"></span> Yes
                            </label>
                            <label class="custom-radio">
                                <input type="radio" name="reopen" value="no" checked> <span class="radio-mark"></span> No
                            </label>
                        </div>
                        <div id="reopen-comment-wrapper" class="mt-2" style="display:none;">
                            <textarea name="reopen_comment" class="form-control" placeholder="Optional reason for reopening..."></textarea>
                        </div>
                    </div>

                    <div class="form-group mt-3" id="feedback-comment-wrapper" style="display:none;">
                        <label><strong>Comment:</strong></label>
                        <textarea name="feedback_comment" class="form-control" placeholder="Optional comment..."></textarea>
                    </div>

                    <button type="submit" class="btn btn-success mt-3 w-100">Submit Feedback</button>
                </form>
            </div>

            <div id="feedback-display" class="mt-3" style="display:none;">
                <p><strong>Your Rating:</strong> <span id="display-rating" class="text-warning"></span></p>
                <p><strong>Your Comment:</strong> <span id="display-comment"></span></p>
            </div>
          </div>

          <div id="ceo-reply-section" class="mt-3" style="display:none;">
            <hr>
            <p><strong class="text-dark green">CEO Reply from <span id="ceo-replier-name"></span>:</strong> <small class="text-muted" id="ceo-reply-date"></small></p>
            <div id="modal-ceo-reply-text" class="p-2 bg-success text-white border rounded"></div>
            
            <div id="second-feedback-display" class="mt-3" style="display:none;">
                <p><strong>Your Final Rating:</strong> <span id="display-second-rating" class="text-warning"></span></p>
                <p><strong>Your Final Comment:</strong> <span id="display-second-comment"></span></p>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- -- Rating listing Modal -- -->

  <div class="modal fade" id="ratingDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Rating Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Rating Ref No.:</strong> <span id="modal-rating-ref"></span></p>
          <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Facility Name:</strong> <span id="modal-rating-name"></span></p>
          <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Date:</strong> <span id="modal-rating-date"></span></p>
          <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Rating:</strong> <span id="modal-rating"></span></p>
          <div id="modal-rating-details" class="mt-3"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Polling Details Modal -->
  <div class="modal fade" id="pollingDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Polling Details</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Polling No:</strong> <span id="modal-polling-id"></span></p>
          <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Polling Name:</strong> <span id="modal-polling-name"></span></p>
          <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Date:</strong> <span id="modal-polling-date"></span></p>
          <p class="d-flex justify-content-between align-items-center"><strong class="text-dark green">Rating:</strong> <span id="modal-polling-rating"></span></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

</section>

@endsection

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

@push('scripts')
<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<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>
  $("#update_profile_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('Submitting...');
        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('Submit');

        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('Save');
        alertify.set('notifier', 'position', 'top-right');
        // alertify.error("An error occurred: " + xhr.responseText);
      }
    });
  });

  // member suggestion store 
  // Image preview function
  function previewImage(input, previewId) {
    const preview = document.getElementById(previewId);
    preview.innerHTML = ''; // clear previous
    if (input.files && input.files[0]) {
      const reader = new FileReader();
      reader.onload = function (e) {
        const img = document.createElement('img');
        img.src = e.target.result;
        img.style.maxWidth = '150px';
        img.style.marginTop = '10px';
        preview.appendChild(img);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }

  document.getElementById('upload_statement').addEventListener('change', function () {
    previewImage(this, 'preview_one');
  });
  document.getElementById('upload_statement2').addEventListener('change', function () {
    previewImage(this, 'preview_two');
  });
  document.getElementById('upload_statement3').addEventListener('change', function () {
    previewImage(this, 'preview_three');
  });

  // AJAX form submission
  // $('#memberSuggesion').on('submit', function (e) {
  //   e.preventDefault();

  //   var formData = new FormData(this);

  //   $.ajax({
  //     url: "{{ route('user.member.suggestion.store') }}", // your route
  //     type: 'POST',
  //     data: formData,
  //     processData: false,
  //     contentType: false,
  //     headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
  //     success: function (response) {
  //       // SweetAlert success
  //       Swal.fire({
  //         icon: 'success',
  //         title: 'Success!',
  //         text: response.message,
  //         confirmButtonText: 'OK'
  //       }).then(() => {
  //         location.reload();
  //       });

  //       // Reset form & previews
  //       $('#memberSuggesion')[0].reset();
  //       $('#preview_one, #preview_two, #preview_three').html('');
  //     },
  //     error: function (xhr) {
  //       let errors = xhr.responseJSON.errors;
  //       let errorMessage = '';
  //       for (let key in errors) {
  //         errorMessage += errors[key][0] + '\n';
  //       }
  //       Swal.fire({
  //         icon: 'error',
  //         title: 'Oops...',
  //         text: errorMessage
  //       });
  //           btn.prop('disabled', false);
  //           btn.find('.btn-text').text('Submit');
  //           btn.find('.loader').addClass('d-none');
  //     }
  //   });
  // });
$('#memberSuggesion').on('submit', function (e) {
    e.preventDefault();

    var form = $(this);
    var btn = $('#submitBtn'); // your submit button
    var formData = new FormData(this);

    function buildValidationList(errors) {
        const messages = [];

        Object.keys(errors || {}).forEach(function (key) {
            const fieldErrors = Array.isArray(errors[key]) ? errors[key] : [errors[key]];
            fieldErrors.forEach(function (message) {
                if (message) {
                    messages.push($('<div>').text(message).html());
                }
            });
        });

        if (!messages.length) {
            return '<p class="mb-0">Something went wrong. Please try again.</p>';
        }

        return `<ul style="text-align:left; margin:0; padding-left:20px;">${messages.map(message => `<li>${message}</li>`).join('')}</ul>`;
    }

    // Disable button & show loader immediately
    btn.prop('disabled', true);
    btn.find('.btn-text').text('Submitting...');
    btn.find('.loader').removeClass('d-none');

    $.ajax({
        url: "{{ route('user.member.suggestion.store') }}", // your route
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        success: function (response) {
            // SweetAlert success
            Swal.fire({
                icon: 'success',
                title: 'Success!',
                text: response.message,
                confirmButtonText: 'OK'
            }).then(() => {
                location.reload(); // reload page after success
            });

            // Reset form & previews
            form[0].reset();
            $('#preview_one, #preview_two, #preview_three').html('');
        },
        error: function (xhr) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                html: buildValidationList(xhr.responseJSON?.errors)
            });

            // Re-enable button & hide loader so user can retry
            btn.prop('disabled', false);
            btn.find('.btn-text').text('Submit');
            btn.find('.loader').addClass('d-none');
        }
    });
});


  $(document).ready(function () {
    $('#member_rating').on('submit', function (e) {
      e.preventDefault();

      // Collect form data
      let formData = {
        facility: $('select[name="facility"]').val(),
        date_of_use: $('#useDate').val(),
        comments: $('#CommentsRating').val(),
        ratings: $('input[name="ratings"]:checked').closest('label').text().trim(), // Get the text of the selected rating
        detail_ratings: $('input[name="detail_ratings"]:checked').val(),
        _token: $('meta[name="csrf-token"]').attr('content')
      };

      // If Detail Ratings = Yes, collect all dynamic ratings details
      if (formData.detail_ratings === '1') {
        formData.ratings_detail = {};

        // Collect each dynamic rating (like Ambience, Cleanliness)
        $('#detail-ratings-wrapper .form-row').each(function () {
          const labelHead = $(this).find('.labelHead').text().trim(); // e.g., "Ambience"
          const selectedText = $(this).find('input[type="radio"]:checked').closest('label').text().trim(); // Rating text like "Excellent"
          formData.ratings_detail[labelHead] = selectedText || null;
        });
      }

      // Disable the submit button and show a loading spinner
      $('#submitBtn').prop('disabled', true).find('.spinner-border').removeClass('d-none');

      // Submit the form via AJAX
      $.ajax({
        url: "{{ route('user.member.rating.store') }}", // Your route
        method: "POST",
        data: formData,
        success: function (response) {
          Swal.fire({
            icon: 'success',
            title: 'Success!',
            text: "Rating submitted successfully!",
            timer: 2000,
            showConfirmButton: false
          }).then(() => {
            location.reload(); // Reload the page after submission
          });
        },
        error: function (xhr) {
          $('#submitBtn').prop('disabled', false).find('.spinner-border').addClass('d-none');
          
          let errorMessage = "Something went wrong!";
          if (xhr.responseJSON && xhr.responseJSON.errors) {
            let errors = xhr.responseJSON.errors;
            errorMessage = '';
            for (let key in errors) {
              errorMessage += errors[key][0] + '\n';
            }
          }
          
          Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: errorMessage,
          });

          console.error(xhr.responseText); // Log the error to the console for debugging
        }
      });
    });
  });

</script>
<script>
  // === MAIN SECTION SWITCHING ===
  document.addEventListener("DOMContentLoaded", function () {
    const navLinks = document.querySelectorAll(".sport-nav ul li a");
    const sections = document.querySelectorAll(".sport-nav-content .section");

    navLinks.forEach(link => {
      link.addEventListener("click", function (e) {
        e.preventDefault();

        // remove active state from all
        navLinks.forEach(l => l.classList.remove("active"));
        sections.forEach(sec => sec.style.display = "none");

        // activate the clicked one
        this.classList.add("active");
        const target = this.getAttribute("href").replace("#", "");
        const activeSection = document.getElementById(target);
        if (activeSection) activeSection.style.display = "block";
      });
    });

    // show first section initially
    sections.forEach(sec => sec.style.display = "none");
    if (sections[0]) sections[0].style.display = "block";
    if (navLinks[0]) navLinks[0].classList.add("active");

    // === HISTORY INNER TAB SWITCHING ===
    const historyTabs = document.querySelectorAll(".listTab li");
    const historyDetails = document.querySelectorAll(".diewDetails");

    historyTabs.forEach(tab => {
      tab.addEventListener("click", function () {
        // remove active
        historyTabs.forEach(t => t.classList.remove("active"));
        historyDetails.forEach(d => d.classList.remove("active"));
        historyDetails.forEach(d => d.style.display = "none");

        // activate clicked tab
        this.classList.add("active");
        const targetId = this.getAttribute("data-id");
        const targetDiv = document.querySelector(`.diewDetails#${targetId}`);
        if (targetDiv) {
          targetDiv.classList.add("active");
          targetDiv.style.display = "block";
        }
      });
    });

    // show first tab inside History by default
    if (historyDetails.length) {
      historyDetails.forEach(d => d.style.display = "none");
      historyDetails[0].style.display = "block";
      historyTabs[0].classList.add("active");
    }
  });

  // --- loader --- for submit button ---
$('form').on('submit', function () {
    let btn = $('#submitBtn');

    // disable button and show loader
    btn.prop('disabled', true);
    btn.find('.btn-text').text('Submitting...');
    btn.find('.loader').removeClass('d-none');

    // allow form to submit normally
});
  // --- Member Polling ratings --- //


  $(document).ready(function () {
    $('body').on('change', '.rating-input', function () {
      const rating = $(this).val();
      const pollingId = $(this).data('polling-id');

      $.ajax({
        url: "{{ route('user.saveMemberPollingRating') }}",
        method: 'POST',
        data: {
          _token: "{{ csrf_token() }}",
          polling_list_id: pollingId,
          rating: rating
        },
        success: function (res) {
          if (res.status === 200) {
            Swal.fire({
              position: 'center',  // <-- center of screen
              icon: 'success',
              title: res.msg,
              showConfirmButton: false,
              timer: 1500,
              toast: false          // must be false for centered modal
            });
          }
        },
        error: function (xhr) {
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Something went wrong while saving rating!',
            position: 'center'
          });
        }
      });
    });
  });

  // -- view modal open to see rating list --
  $(document).ready(function () {
    $('body').on('click', '.view-polling', function () {
      $('#modal-polling-id').text($(this).data('id'));
      $('#modal-polling-name').text($(this).data('name'));
      $('#modal-polling-date').text($(this).data('date'));
      $('#modal-polling-rating').text($(this).data('rating'));
      // $('#modal-polling-comments').text($(this).data('comments'));

      $('#pollingDetailsModal').modal('show'); // show modal
    });
    
    // -- use of date datepicker update 
     $("#useDate").datepicker({
      // dateFormat: "yy-mm-dd"
      dateFormat: "dd-mm-yy",
      onSelect: function(selectedDate) {
        $("label[for='useDate']").addClass("animate-label");
        $(this).trigger("change");
      }
    });
    
  });

  // -- rating modal open --


</script>

<script>
  (function () {
    const $facility = $('select[name="facility"]');
    const $department = $('select[name="department_id"]'); // add if present
    const $detailYes = $('#DetailRatings1'); // value="1"
    const $detailNo = $('#DetailRatings2'); // value="0"
    const $wrapper = $('#detail-ratings-wrapper');

    // Attach listeners
    $facility.on('change', maybeFetch);
    $department.on('change', maybeFetch);
    $detailYes.on('change', maybeFetch);
    $detailNo.on('change', () => $wrapper.empty());

    // Call on load if needed
    if ($facility.val() && $detailYes.is(':checked')) {
      maybeFetch();
    }

    // Only calls AJAX when Detail Ratings = Yes
    function maybeFetch() {
      if (!$detailYes.is(':checked')) {
        $wrapper.empty();
        return;
      }
      const locationId = $facility.val();
      const departmentId = $department.val() || '';
      if (!locationId) {
        $wrapper.empty();
        return;
      }
      fetchAndRender(locationId, departmentId);
    }

    function fetchAndRender(locationId, departmentId) {
      $wrapper.html('<p style="margin:6px 0;">Loading details…</p>');
      $.ajax({
        url: "{{ route('reviews.byLocation') }}",
        type: 'GET',
        dataType: 'json',
        data: {
          location_id: locationId,
          department_id: departmentId
        },
        success: function (res) {
          const items = (res && res.data) ? res.data : [];
          if (!items.length) {
            $wrapper.html('<p style="margin:6px 0;">No detailed criteria available.</p>');
            return;
          }
          const html = items.map(renderCriteriaBlock).join('');
          $wrapper.html(html);
        },
        error: function () {
          $wrapper.html('<p style="color:#b00020;margin:6px 0;">Failed to load detail ratings.</p>');
        }
      });
    }

    // Build each criteria block (like Ambience/Cleanliness)
    function renderCriteriaBlock(item) {
      const groupName = `ratings_detail[${item.id}]`;
      const baseId = `crit_${item.id}_`;
      // const opts = [
      //   {v: 5, t: 'Excellent'},
      //   {v: 4, t: 'Very Good'},
      //   {v: 3, t: 'Good'},
      //   {v: 2, t: 'Fair'},
      //   {v: 1, t: 'Poor'},
      // ];
      const opts = [
        { v: 'excellent', t: 'Excellent' },
        { v: 'very good', t: 'Very Good' },
        { v: 'good', t: 'Good' },
        { v: 'fair', t: 'Fair' },
        { v: 'poor', t: 'Poor' },
      ];
      const radios = opts.map(o => {
        const id = baseId + o.v;
        return `
          <label for="${id}" class="custom-radio">
            <input type="radio" name="${groupName}" id="${id}" value="${o.v}">
            <span class="radio-mark"></span>
            ${o.t}
          </label>`;
      }).join('');

      return `
        <div class="form-row" data-criteria-id="${item.id}">
          <div class="labelHead">${escapeHtml(item.review_name)}</div>
          <div class="radio-group">
            ${radios}
          </div>
        </div>`;
    }

    function escapeHtml(str) {
      return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
    }
  })();
  // -- suggestion details modal open --
  $(document).ready(function () {
    $('body').on('click', '.view-suggesion-details', function () {
      const id = $(this).data('id');
      $('#feedback-suggestion-id').val(id);
      
      $.ajax({
        url: "{{ url('/suggestion-details') }}/" + id,
        type: 'GET',
        success: function (res) {
          if (res.status === 'success') {
            const data = res.data;
            const suggestionYear = data.suggestion_date ? data.suggestion_date.split('-').slice(-1)[0] : new Date().getFullYear();
            const suggestionFallback = 'TC/SS/' + suggestionYear + '/' + String(data.id).padStart(4, '0');
            $('#modal-suggesion-no').text(data.reference_no || suggestionFallback);
            $('#modal-location-name').text(data.location_name);
            $('#modal-suggesion-date').text(data.suggestion_date);
            $('#modal-comment').text(data.comment);
            $('#modal-open-count').text(data.open_count ?? 0);
            $('#modal-reply-count').text(data.reply_count ?? 0);
            $('#modal-closed-count').text(data.closed_count ?? 0);
            
            let statusText = Number(data.status) === 0 ? 'Closed' : 'Open';
            $('#modal-status').text(statusText);

            const imageUrls = [data.image_one_url, data.image_two_url, data.image_three_url].filter(Boolean);
            if (imageUrls.length) {
              const imagesHtml = imageUrls.map((url) => `
                <a href="${url}" target="_blank" style="display:inline-block; margin:6px 8px 0 0;">
                  <img src="${url}" alt="Suggestion image" style="width:90px; height:90px; object-fit:cover; border-radius:8px; border:1px solid #d7dfd2;">
                </a>
              `).join('');
              $('#modal-suggestion-images').html(`<p><strong class="text-dark green">Images:</strong></p><div>${imagesHtml}</div>`);
            } else {
              $('#modal-suggestion-images').empty();
            }

            if (Array.isArray(data.lifecycle) && data.lifecycle.length) {
              const lifecycleHtml = data.lifecycle.map((item) => `
                <div class="d-flex justify-content-between align-items-start p-2 border rounded mb-2">
                  <div>
                    <strong class="green">${item.label}</strong>
                    <div>${item.details || ''}</div>
                  </div>
                  <small class="text-muted">${item.date || ''}</small>
                </div>
              `).join('');
              $('#modal-lifecycle').html(`<p><strong class="text-dark green">Lifecycle:</strong></p>${lifecycleHtml}`);
            } else {
              $('#modal-lifecycle').empty();
            }

            // Latest reply for current cycle
            if (data.is_replied == 1 && data.reply_text) {
              $('#reply-section').show();
              $('#replier-name').text(data.replied_by);
              $('#reply-date').text(data.replied_at);
              $('#modal-reply-text').html(data.reply_text);
              
              if (!data.feedback_pending && data.star_rating) {
                $('#feedback-form-wrapper').hide();
                $('#feedback-display').show();
                $('#display-rating').text('★'.repeat(data.star_rating));
                $('#display-comment').text(data.feedback_comment || 'No comment');
              } else {
                $('#feedback-form-wrapper').show();
                $('#feedback-display').hide();
                $('#suggestionFeedbackForm')[0].reset();
              }
            } else {
              $('#reply-section').hide();
            }

            $('#ceo-reply-section').hide();
            $('#second-feedback-display').hide();

            if (data.is_reopened == 1 && data.reopen_comment) {
                $('#modal-suggestion-images').append(`<div class="mt-3"><p><strong class="text-dark green">Reopen Comment:</strong></p><p class="p-2 bg-light border rounded">${data.reopen_comment}</p></div>`);
            }

            $('#suggesionDetailsModal').modal('show');
          }
        }
      });
    });

    // Handle Star Rating change in feedback form
    $('input[name="star_rating"]').on('change', function() {
        const val = $(this).val();
        if (val == 1) {
            $('#reopen-section').show();
            $('#feedback-comment-wrapper').hide();
        } else if (val == 5) {
            $('#reopen-section').hide();
            $('#feedback-comment-wrapper').show();
        } else {
            $('#reopen-section').hide();
            $('#feedback-comment-wrapper').show();
        }
    });

    $('input[name="reopen"]').on('change', function() {
        if ($(this).val() == 'yes') {
            $('#reopen-comment-wrapper').show();
        } else {
            $('#reopen-comment-wrapper').hide();
        }
    });

    // Submit Feedback
    $('#suggestionFeedbackForm').on('submit', function(e) {
        e.preventDefault();
        const id = $('#feedback-suggestion-id').val();
        const formData = $(this).serialize();
        
        $.ajax({
            url: "{{ url('/suggestion-feedback') }}/" + id,
            type: 'POST',
            data: formData,
            success: function(res) {
                if (res.status === 'success') {
                    Swal.fire('Success', res.message, 'success').then(() => location.reload());
                }
            },
            error: function(xhr) {
                Swal.fire('Error', 'Please fill the required fields', 'error');
            }
        });
    });

    $("#suggestion_date").datepicker({
      dateFormat: "dd-mm-yy",
      maxDate: 0 // Cannot select future date
    });
  });
</script>
<script>
  // -- Rating modal js --
  document.addEventListener('DOMContentLoaded', function () {
    // Select all View buttons
    document.querySelectorAll('.view-rating').forEach(function (button) {
      button.addEventListener('click', function () {
        // Get data attributes from the clicked button
        const ratingRef = this.getAttribute('data-rating-ref');
        const locationName = this.getAttribute('data-rating-name');
        const ratingDate = this.getAttribute('data-rating-date');
        const rating = this.getAttribute('data-rating');
        const detailedRatings = JSON.parse(this.getAttribute('data-detailed-ratings') || '[]');

        // Populate modal fields
        document.getElementById('modal-rating-ref').textContent = ratingRef || 'N/A';
        document.getElementById('modal-rating-name').textContent = locationName || 'N/A';
        document.getElementById('modal-rating-date').textContent = ratingDate || 'N/A';
        document.getElementById('modal-rating').textContent = rating || 'N/A';

        const detailsContainer = document.getElementById('modal-rating-details');
        if (detailedRatings.length) {
          const detailsHtml = detailedRatings.map(function(detail) {
            const label = detail.location_review_detail && detail.location_review_detail.review_name
              ? detail.location_review_detail.review_name
              : 'Detail';
            const review = detail.review || 'N/A';

            return `
              <div class="d-flex justify-content-between align-items-center p-2 border rounded mb-2">
                <strong class="text-dark green">${label}</strong>
                <span>${review}</span>
              </div>
            `;
          }).join('');

          detailsContainer.innerHTML = `<p><strong class="text-dark green">Detailed Rating:</strong></p>${detailsHtml}`;
        } else {
          detailsContainer.innerHTML = '<p class="text-muted mb-0">No detailed rating submitted.</p>';
        }

        // Show modal using Bootstrap 5
        const modal = new bootstrap.Modal(document.getElementById('ratingDetailsModal'));
        modal.show();
      });
    });
  });

  // -- suggession modal rating --
  document.addEventListener('DOMContentLoaded', function () {
    // Select all "View" buttons
    document.querySelectorAll('.view-suggesion').forEach(function (button) {
      button.addEventListener('click', function () {
        // Get data attributes from clicked button
        const suggesionNo = this.getAttribute('data-suggesion-no');
        const locationName = this.getAttribute('data-location-name');
        const suggesionDate = this.getAttribute('data-suggesion-date');
        const status = this.getAttribute('data-status');

        // Fill modal with data
        document.getElementById('modal-suggesion-no').textContent = suggesionNo || 'N/A';
        document.getElementById('modal-location-name').textContent = locationName || 'N/A';
        document.getElementById('modal-suggesion-date').textContent = suggesionDate || 'N/A';
        document.getElementById('modal-status').textContent = status || 'N/A';

        // Show modal
        const modal = new bootstrap.Modal(document.getElementById('suggesionDetailsModal'));
        modal.show();
      });
    });
  });
</script>


<!-- <script>
 const modal = document.querySelector(".modal");
 const body= document.querySelector("body");

 if(modal.style.display=="block"){
  body.classList.add("modal-open");
 }
</script> -->

@endpush