@include('admin.header', ['adminUser' => $adminUser])

<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="page-body">
          <div class="container-fluid">
            <div class="page-title">
              <div class="row">
                <div class="col-6">
                  <h4>Activity</h4>
                </div>
                <div class="col-6"> 
                  <ol class="breadcrumb">
                    <button class="btn btn-success" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter1">Add New </button>

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

  
          <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content dark-sign-up">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="lgModalLabel">Add New Activity</h1>
                        <button class="btn-close py-0" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>
                    <div class="modal-body  text-start">
                      <div class="modal-toggle-wrapper">
                      <form action="#" method="POST" enctype="multipart/form-data" id="activityHostForm">
                        <div class="row g-3">
                          <div class="col-md-6">

                          <div class="mb-3 row">
                                <div class="col-sm-6">
                                  <label>Host Company</label>
                                   <select class="form-select  digits" id="hostSelect" name="host_id">
                                         <option value="">Select Host Company</option>
                                         @foreach($hosts as $host)
                                         <option value="{{ $host->id }}">{{ $host->company_name }}</option>
                                         @endforeach
                                       </select>
                                      </div>
                                <div class="col-sm-6">
                                  <label>Activity Type</label>
                                   <select class="form-select  digits" id="activityTypeSelect" name="category">
                                         <option value="">Select Activity Type</option>
                                         @foreach($activity_types as $activity_type)
                                         <option value="{{ $activity_type->id }}">{{ $activity_type->name }}</option>
                                         @endforeach
                                       </select>
                                    </div>
                              </div>
                              <div class="mb-3 row">
                                <div class="col-sm-12">
                                  <label>Location </label>
                                    <select class="form-select  digits" id="exampleFormControlSelect7" name="location">
                                        <option value="">Select Location</option>
                                        <option value="Dubai">Dubai</option>
                                        <option value="Abu Dhabi">Abu Dhabi</option>
                                        <option value="Ajman">Ajman </option>
                                        <option value="Sharjah">Sharjah </option>
                                        <option value="Ras Al Khaima">Ras Al Khaima</option>
                                        <option value="Fujairah">Fujairah </option>
                                        <option value="Um Al Quain">Um Al Quain </option>
                                      </select>
                                   
                                    </div>
                              </div>

                              <div class="mb-3 row">
                                <div class="col-sm-12">
                                
                                  <label>Options</label>

                                  <div id="req_input" class="datainputs">
                                    <div class="mb-3 row">
                                      <div class="col-md-10 position-relative">

                                    <div class="input-group flex-nowrap mb-2">
                                      <input class="form-control" type="text" placeholder="Activity Name/Title" aria-label="Activity Name" aria-describedby="addon-wrapping" fdprocessedid="u0byf" name="option_name[]">
                                    </div>
                                    </div>

                                    <div class="col-md-2 position-relative">
                                      <a href="#" id="addmore" class="btn btn-success add_input">+</a>
                 
                                  </div>
                                                                        
                                    <div class="col-md-4 position-relative">
                                      <div class="input-group flex-nowrap mb-2">
                                      <span class="input-group-text " id="basic-addon1"><img src="assets/images/icon.svg"></span>

                                      <input class="form-control" id="validationTooltip01" type="number" step="0.01" placeholder="Adult Price" fdprocessedid="80d6v" name="adult_price[]">
                                    </div>
                                    </div>
                                    <div class="col-md-4 position-relative">
                                      <div class="input-group flex-nowrap mb-2">
                                      <span class="input-group-text " id="basic-addon1"><img src="assets/images/icon.svg"></span>

                                      <input class="form-control" id="validationTooltip01" type="number" step="0.01" placeholder="Child Price" fdprocessedid="80d6v" name="child_price[]">
                                    </div>
                                    </div>
                                    <div class="col-md-4 position-relative">
                                      <div class="input-group flex-nowrap mb-2">
                                      <span class="input-group-text " id="basic-addon1"><img src="assets/images/icon.svg"></span>

                                      <input class="form-control" id="validationTooltip01" type="number" step="0.01" placeholder="Infant Price" fdprocessedid="80d6v" name="infant_price[]">
                                    </div>
                                    </div>

                                  </div>
                                  
                                  <!-- Time and Duration Section -->
                                      <div class="mb-3 row">
                                    <div class="col-md-4">
                                          <label class="form-label">Time (From)</label>
                                      <input class="form-control" type="time" name="time_from[]">
                                        </div>
                                    <div class="col-md-4">
                                          <label class="form-label">Time (To)</label>
                                      <input class="form-control" type="time" name="time_to[]">
                                        </div>
                                    <div class="col-md-4">
                                      <label class="form-label">Duration (hours)</label>
                                      <input class="form-control" type="number" step="0.5" placeholder="hrs" name="duration[]" >
                                          </div>
                                        </div>                                  
                                  
                                    </div>
                               
                                  </div>
                              </div>

                              <div class="mb-3 row">
                                <div class="col-sm-12">
                                  <label>Available Dates (Select Multiple)</label>
                                  <div class="input-group">
                                    <input class="form-control" id="activity-dates" type="text" name="available_dates" placeholder="Click to select multiple dates" readonly>
                                    <button class="btn btn-outline-secondary" type="button" id="clear-dates">Clear</button>
                                  </div>
                                  <small class="form-text text-muted">Select all dates when this activity will be available for booking</small>
                                  <div id="selected-dates-display" class="mt-2"></div>
                                </div>
                              </div>

                              <div class="mb-3 row">
                                <div class="col-sm-12">
                                  <label>Cancellation </label>

                                    <select class="form-select  digits" id="exampleFormControlSelect7" name="cancellation_policy">
                                        <option value="">Select Cancellation Policy</option>
                                        <option value="Before 24h">Before 24h</option>
                                        <option value="Before 48h">Before 48h</option>
                                        <option value="3 Days Before">3 Days Before </option>
                                        <option value="5 Days Before">5 Days Before</option>
                                        <option value="10 Days Before">10 Days Before</option>
                                        <option value="No Cancellation">No Cancellation </option>
                                      </select>
                                    
                                    </div>
                              </div>

                              <div class="mb-3 row">
                                <div class="col-sm-12">
                                  <label>Payment  </label>

                                    <div class="mb-3 d-flex gap-3 checkbox-checked">
                                        <div class="form-check">
                                         
                                          <label class="d-block" for="chk-ani">
                                            <input class="checkbox_animated" id="chk-ani" type="checkbox" checked="" name="payment_online" value="Online">Online
                                          </label>
                                        </div>
                                        <div class="form-check">
                                       
                                          <label class="d-block" for="chk-ani1">
                                            <input class="checkbox_animated" id="chk-ani1" type="checkbox" name="payment_on_pickup" value="Pay at Pickup">Pay at Pickup
                                          </label>
                                        </div>

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

                                 <div class="mb-3 row">
                                <div class="col-sm-6">

                              <div class="product-upload">
                                <label for="homepage_images" class="form-label">Homepage Images (Multiple files allowed)</label>
                                <input type="file" class="form-control-file" id="homepage_images" name="homepage_images[]" accept="image/*" multiple>
                                <div id="homepage-preview" class="mt-2"></div>
                              </div>
                              
                            </div>

                  <!--    <div class="col-sm-6">
                           <div class="product-upload">
                                <form class="dropzone dropzone-light" id="galleryImagesUpload" action="#" name="gallery_images">
                                  <div class="dz-message needsclick">
                                    <h6>Drag files here</h6>
                                    <span class="note needsclick">Add Gallery Images</span>
                                  </div>
                                </form>
                              </div>                               
                            </div>-->
                          </div>                              
                      </div>

                              <div class="col-md-6"> 
                                <div class="mb-3 row">                                
                                  <div class="col-sm-12"> 
  
                                    <div class="accordion dark-accordion" id="accordionPanelsStayOpenExample">
                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne">
                                            Overview
                                            <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapseOne" aria-labelledby="panelsStayOpen-headingOne">
                                          <div class="accordion-body">

                                            <div class="toolbar-box">
                                              <div id="editor01"></div>
                                            </div>

                                            <div class="product-buttons">
                                              <div class="btn">
                                                <div class="d-flex align-items-center gap-sm-2 gap-1">Save
                                               
                                                </div>
                                              </div>
                                            </div>
          
                                          </div>
                                        </div>
                                      </div>
                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                                            
                                            Highlights
                                            <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo" aria-labelledby="panelsStayOpen-headingTwo">
                                          <div class="accordion-body">
                                         
                                            
                                            <div class="toolbar-box">
                                              <div id="editor02"></div>
                                            </div>

                                            <div class="product-buttons">
                                              <div class="btn">
                                                <div class="d-flex align-items-center gap-sm-2 gap-1">Save
                                               
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>


                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
                                            
                                            Included <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree" aria-labelledby="panelsStayOpen-headingThree">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
                                              <div id="editor03"></div>
                                            </div>

                                            <div class="product-buttons">
                                              <div class="btn">
                                                <div class="d-flex align-items-center gap-sm-2 gap-1">Save
                                               
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>

                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-heading4">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse4" aria-expanded="false" aria-controls="panelsStayOpen-collapse4">
                                            
                                            Not Included <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapse4" aria-labelledby="panelsStayOpen-heading4">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
                           
                                              <div id="editor04"></div>
                                            </div>

                                            <div class="product-buttons">
                                              <div class="btn">
                                                <div class="d-flex align-items-center gap-sm-2 gap-1">Save
                                               
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>

                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-heading5">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse5" aria-expanded="false" aria-controls="panelsStayOpen-collapse5">
                                            
                                            Know before you go<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapse5" aria-labelledby="panelsStayOpen-heading5">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
             
                                              <div id="editor05"></div>
                                            </div>

                                            <div class="product-buttons">
                                              <div class="btn">
                                                <div class="d-flex align-items-center gap-sm-2 gap-1">Save
                                               
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>

                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-heading6">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse6" aria-expanded="false" aria-controls="panelsStayOpen-collapse6">
                                            
                                            Additional Information<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapse6" aria-labelledby="panelsStayOpen-heading6">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
                     
                                              <div id="editor06"></div>
                                            </div>

                                            <div class="product-buttons">
                                              <div class="btn">
                                                <div class="d-flex align-items-center gap-sm-2 gap-1">Save
                                               
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>

                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-heading7">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse7" aria-expanded="false" aria-controls="panelsStayOpen-collapse7">                                            
                                            Cancellation Policy<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapse7" aria-labelledby="panelsStayOpen-heading7">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
         
                                              <div id="editor07"></div>
                                            </div>

                                            <div class="product-buttons">
                                              <div class="btn">
                                                <div class="d-flex align-items-center gap-sm-2 gap-1">Save
                                               
                                                </div>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>

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

                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary waves-effect waves-light" id="submitBtn04" onclick="submitActivityHostForm()">Submit</button>
                        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Close</button>
        
                      </div>
                  </div>
            </div>
          </div>


          <!-- Container-fluid starts-->
          <div class="container-fluid"> 
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                       
                      <div class="card-body">
                        <div class="table-responsive custom-scrollbar">
                          <table class="display" id="basic-1">
                            <thead>
                              <tr>
                                <th>Activity Name</th>
                                <th>Location</th>
                                <th>Time (From)</th>
                                <th>Time (To)</th>
                                <th>Duration</th>
                                <th>Adult Price</th>
                                <th>Child Price</th>
                                <th>Infant Price</th>

                                <th>Active Dates </th>
                                <th>Status </th>
                                <th>Action </th>
                                <th style="display: none;">Created At</th>



                              </tr>
                            </thead>
                            <tbody>
                              @forelse($activities as $activity)
                              <tr data-created-at="{{ $activity->created_at ? strtotime($activity->created_at) : 0 }}">
                                <td>{{ $activity->activityType->name ?? 'N/A' }}</td>
                                <td>{{ $activity->location }}</td>
                                <td>{{ $activity->activityOptions->first()->time_from ?? 'N/A' }}</td>
                                <td>{{ $activity->activityOptions->first()->time_to ?? 'N/A' }}</td>
                                <td>{{ $activity->activityOptions->first()->duration ?? 'N/A' }}</td>
                                <td>{{ $activity->activityOptions->first()->adult_price ?? 'N/A' }} AED</td>
                                <td>{{ $activity->activityOptions->first()->child_price ?? 'N/A' }} AED</td>
                                <td>{{ $activity->activityOptions->first()->infant_price ?? 'N/A' }} AED</td>
                                <td>{{ $activity->date ? \Carbon\Carbon::parse($activity->date)->format('Y-m-d') : 'N/A' }}</td>
                                <td>
                                  @switch($activity->status)
                                    @case('pending')
                                      <span class="badge rounded-pill badge-warning">Pending</span>
                                      @break
                                    @case('approved')
                                      <span class="badge rounded-pill badge-success">Approved</span>
                                      @break
                                    @case('rejected')
                                      <span class="badge rounded-pill badge-danger">Rejected</span>
                                      @break
                                    @default
                                      <span class="badge rounded-pill badge-secondary">{{ ucfirst($activity->status) }}</span>
                                  @endswitch
                                </td>
                                
                                <td>
                            <div class="btn-group" role="group">
                              <button type="button" class="btn btn-sm btn-info" onclick="viewActivity({{ $activity->id }})" title="View">
                                <i class="fa fa-eye"></i>
                              </button>
                                <!-- <button type="button" class="btn btn-sm btn-warning" onclick="editHost({{ $host->id }})" title="Edit">
                                  <i class="fa fa-pencil"></i>
                                </button> -->
                              @if($activity->status !== 'approved')
                                <button type="button" class="btn btn-sm btn-success" onclick="updateActivityStatus({{ $activity->id }}, 'approved')" title="Approve">
                                  <i class="fa fa-check"></i>
                                </button>
                              @endif
                              @if($activity->status !== 'suspended')
                                <button type="button" class="btn btn-sm btn-warning" onclick="suspendActivityStatus({{ $activity->id }}, 'suspended')" title="Suspend">
                                  <i class="fa fa-ban"></i>
                                </button>
                              @endif
                              <button type="button" class="btn btn-sm btn-danger" onclick="deleteActivity({{ $activity->id }})" title="Delete">
                                <i class="fa fa-trash"></i>
                              </button>
                            </div>
                        </td>
                                <td style="display: none;">{{ $activity->created_at ? $activity->created_at->timestamp : 0 }}</td>
                              </tr>
                              @empty
                              <tr>
                                <td colspan="12" class="text-center">No activities found</td>
                              </tr>
                              @endforelse
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
    
            </div>
          </div>
          <!-- Container-fluid Ends-->
        </div>

            <!-- View Activity Modal -->
            <div class="modal fade" id="viewActivityModal" tabindex="-1" aria-labelledby="viewActivityModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="viewActivityModalLabel">Activity Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body" id="viewActivityContent">
                <!-- Filled dynamically by viewActivity() -->
                <div class="text-center py-4">
                  <div class="spinner-border text-primary" role="status"></div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              </div>
            </div>
          </div>
        </div>    
    

        <!-- Edit Activity Modal -->
        <div class="modal fade" id="editActivityModal" tabindex="-1" aria-labelledby="editActivityModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="editActivityModalLabel">Edit Activity</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <form id="editActivityForm">
                <div class="modal-body">
                  <input type="hidden" name="activity_id" id="edit_activity_id">
                  <div class="row g-3">
                    <div class="col-md-6">
                      <label class="form-label">Activity Name</label>
                      <input type="text" class="form-control" name="option" id="edit_option_name" placeholder="Option name / title">
                    </div>
                    <div class="col-md-6">
                      <label class="form-label">Location</label>
                      <input type="text" class="form-control" name="location" id="edit_location" placeholder="Location">
                    </div>

                    <div class="col-md-4">
                      <label class="form-label">Adult Price (AED)</label>
                      <input type="number" step="0.01" class="form-control" name="adult_price" id="edit_adult_price">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Child Price (AED)</label>
                      <input type="number" step="0.01" class="form-control" name="child_price" id="edit_child_price">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Infant Price (AED)</label>
                      <input type="number" step="0.01" class="form-control" name="infant_price" id="edit_infant_price">
                    </div>

                    <div class="col-md-4">
                      <label class="form-label">Time From</label>
                      <input type="time" class="form-control" name="time_from" id="edit_time_from">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Time To</label>
                      <input type="time" class="form-control" name="time_to" id="edit_time_to">
                    </div>
                    <div class="col-md-4">
                      <label class="form-label">Duration</label>
                      <input type="text" class="form-control" name="duration" id="edit_duration" placeholder="e.g. 2h">
                    </div>

                    <div class="col-md-12">
                      <label class="form-label">Status</label>
                      <select class="form-select" name="status" id="edit_status">
                        <option value="pending">Pending</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                        <option value="suspended">Suspended</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-primary" id="saveEditActivityBtn">Save changes</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        @include('admin.footer')


        <script>
// Initialize Quill editors
let quillEditors = {};
let uploadedHomepageImages = [];
let uploadedGalleryImages = [];
let selectedDates = [];

// Multiple Date Picker Function
function initializeMultipleDatePicker() {
    const dateInput = document.getElementById('activity-dates');
    const clearBtn = document.getElementById('clear-dates');
    const displayDiv = document.getElementById('selected-dates-display');
    
    if (!dateInput) return;
    
    // Create a simple date picker interface
    dateInput.addEventListener('click', function() {
        showDatePickerModal();
    });
    
    // Clear dates button
    if (clearBtn) {
        clearBtn.addEventListener('click', function() {
            selectedDates = [];
            updateDateDisplay();
        });
    }
    
    function showDatePickerModal() {
        // Create modal for date selection
        const modal = document.createElement('div');
        modal.className = 'modal fade';
        modal.id = 'datePickerModal';
        modal.innerHTML = `
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Select Available Dates</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <label>Start Date</label>
                                <input type="date" id="start-date" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label>End Date</label>
                                <input type="date" id="end-date" class="form-control">
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="button" class="btn btn-primary" onclick="addDateRange()">Add Date Range</button>
                            <button type="button" class="btn btn-success" onclick="addSingleDate()">Add Single Date</button>
                        </div>
                        <div class="mt-3">
                            <label>Or select individual dates:</label>
                            <input type="date" id="single-date" class="form-control">
                            <button type="button" class="btn btn-info mt-2" onclick="addSingleDate()">Add This Date</button>
                        </div>
                        <div class="mt-3">
                            <h6>Selected Dates:</h6>
                            <div id="selected-dates-list" class="border p-2" style="min-height: 100px;">
                                ${selectedDates.length === 0 ? '<p class="text-muted">No dates selected</p>' : ''}
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" onclick="saveSelectedDates()">Save Dates</button>
                    </div>
                </div>
            </div>
        `;
        
        document.body.appendChild(modal);
        const bsModal = new bootstrap.Modal(modal);
        bsModal.show();
        
        // Clean up when modal is hidden
        modal.addEventListener('hidden.bs.modal', function() {
            document.body.removeChild(modal);
        });
        
        updateSelectedDatesList();
    }
    
    // Add date range
    window.addDateRange = function() {
        const startDate = document.getElementById('start-date').value;
        const endDate = document.getElementById('end-date').value;
        
        if (!startDate || !endDate) {
            alert('Please select both start and end dates');
            return;
        }
        
        if (new Date(startDate) > new Date(endDate)) {
            alert('Start date must be before end date');
            return;
        }
        
        const start = new Date(startDate);
        const end = new Date(endDate);
        
        for (let d = new Date(start); d <= end; d.setDate(d.getDate() + 1)) {
            const dateStr = d.toISOString().split('T')[0];
            if (!selectedDates.includes(dateStr)) {
                selectedDates.push(dateStr);
            }
        }
        
        updateSelectedDatesList();
    };
    
    // Add single date
    window.addSingleDate = function() {
        const singleDate = document.getElementById('single-date').value;
        if (!singleDate) {
            alert('Please select a date');
            return;
        }
        
        if (!selectedDates.includes(singleDate)) {
            selectedDates.push(singleDate);
            updateSelectedDatesList();
        } else {
            alert('This date is already selected');
        }
    };
    
    // Update selected dates list in modal
    function updateSelectedDatesList() {
        const listDiv = document.getElementById('selected-dates-list');
        if (!listDiv) return;
        
        if (selectedDates.length === 0) {
            listDiv.innerHTML = '<p class="text-muted">No dates selected</p>';
            return;
        }
        
        listDiv.innerHTML = selectedDates.map(date => `
            <span class="badge bg-primary me-2 mb-2 d-inline-block">
                ${new Date(date).toLocaleDateString()}
                <button type="button" class="btn-close btn-close-white ms-1" onclick="removeDate('${date}')"></button>
            </span>
        `).join('');
    }
    
    // Remove date
    window.removeDate = function(dateToRemove) {
        selectedDates = selectedDates.filter(date => date !== dateToRemove);
        updateSelectedDatesList();
    };
    
    // Save selected dates
    window.saveSelectedDates = function() {
        updateDateDisplay();
        const modal = bootstrap.Modal.getInstance(document.getElementById('datePickerModal'));
        modal.hide();
    };
    
    // Update date display
    function updateDateDisplay() {
        if (selectedDates.length === 0) {
            dateInput.value = '';
            if (displayDiv) {
                displayDiv.innerHTML = '<p class="text-muted">No dates selected</p>';
            }
        } else {
            dateInput.value = selectedDates.join(', ');
            if (displayDiv) {
                displayDiv.innerHTML = `
                    <div class="d-flex flex-wrap gap-1">
                        ${selectedDates.map(date => `
                            <span class="badge bg-success">${new Date(date).toLocaleDateString()}</span>
                        `).join('')}
                    </div>
                `;
            }
        }
    }
    
    // Initialize display
    updateDateDisplay();
}

document.addEventListener('DOMContentLoaded', function() {
    // Initialize multiple date selection
    initializeMultipleDatePicker();
    
    // Initialize all Quill editors only once
    const editorIds = ['editor01', 'editor02', 'editor03', 'editor04', 'editor05', 'editor06', 'editor07'];
    
    editorIds.forEach(editorId => {
        const element = document.getElementById(editorId);
        if (element && !quillEditors[editorId]) {
            // Clear any existing content and toolbars first
            element.innerHTML = '';
            
            // Remove any existing Quill classes
            element.classList.remove('ql-container', 'ql-snow');
            
            // Create a clean container for the editor
            const editorContainer = document.createElement('div');
            editorContainer.id = editorId + '_container';
            element.appendChild(editorContainer);
            
            quillEditors[editorId] = new Quill('#' + editorId + '_container', {
                theme: 'snow',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'indent': '-1'}, { 'indent': '+1' }],
                        ['link', 'image', 'video'],
                        ['clean']
                    ]
                }
            });
            
            // Add default content to prevent validation errors
            quillEditors[editorId].setContents([{ insert: 'Enter content here...\n' }]);
        }
    });
    
    // Handle homepage images preview
    const homepageInput = document.getElementById('homepage_images');
    const homepagePreview = document.getElementById('homepage-preview');
    
    if (homepageInput && homepagePreview) {
        homepageInput.addEventListener('change', function(e) {
            const files = Array.from(e.target.files);
            homepagePreview.innerHTML = '';
            
            files.forEach((file, index) => {
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.width = '100px';
                        img.style.height = '100px';
                        img.style.objectFit = 'cover';
                        img.style.margin = '5px';
                        img.style.border = '1px solid #ddd';
                        img.style.borderRadius = '4px';
                        homepagePreview.appendChild(img);
                    };
                    reader.readAsDataURL(file);
                }
            });
            
            // Show file count
            if (files.length > 0) {
                const countDiv = document.createElement('div');
                countDiv.className = 'mt-2 text-muted';
                countDiv.textContent = `${files.length} file(s) selected`;
                homepagePreview.appendChild(countDiv);
            }
        });
    }
});


// Keep "To" time >= "From" time and auto-calc duration for main form
(function () {
  const fromEl = document.querySelector('input[name="time_from[]"]');
  const toEl = document.querySelector('input[name="time_to[]"]');
  const durationEl = document.querySelector('input[name="duration[]"]');
  if (!fromEl || !toEl) return;

  function syncToMin() {
    if (fromEl.value) {
      toEl.setAttribute('min', fromEl.value);
      if (toEl.value && toEl.value < fromEl.value) {
        toEl.value = fromEl.value;
      }
    } else {
      toEl.removeAttribute('min');
    }
  }

  function parseTimeToMinutes(t) {
    if (!t || !/^\d{2}:\d{2}/.test(t)) return null;
    const [h, m] = t.split(':').map(Number);
    return h * 60 + m;
  }

  function formatMinutes(mm) {
    const h = Math.floor(mm / 60);
    const m = mm % 60;
    return `${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}`;
  }

  function updateDuration() {
    if (!durationEl) return;
    const s = parseTimeToMinutes(fromEl.value);
    const e = parseTimeToMinutes(toEl.value);
    if (s == null || e == null) return;
    let diff = e - s;
    if (diff < 0) diff = 0;
    // Convert minutes to hours (decimal)
    const hours = (diff / 60).toFixed(1);
    durationEl.value = hours;
  }

  // init and bind
  syncToMin();
  updateDuration();
  fromEl.addEventListener('change', () => { syncToMin(); updateDuration(); });
  toEl.addEventListener('change', () => { syncToMin(); updateDuration(); });
})();


// Delegate time change handling for dynamic option rows (main form)
document.addEventListener('input', function(e) {
  const target = e.target;
  if (!(target.matches('input[name="time_from[]"]') || target.matches('input[name="time_to[]"]'))) {
    return;
  }

  // Find the closest row/group that contains this set of inputs
  const row = target.closest('.mb-3.row') || target.closest('.row');
  if (!row) return;

  const fromEl = row.querySelector('input[name="time_from[]"]');
  const toEl = row.querySelector('input[name="time_to[]"]');
  const durationEl = row.querySelector('input[name="duration[]"]');
  if (!fromEl || !toEl || !durationEl) return;

  // Keep To >= From
  if (fromEl.value) {
    toEl.setAttribute('min', fromEl.value);
    if (toEl.value && toEl.value < fromEl.value) {
      toEl.value = fromEl.value;
    }
  } else {
    toEl.removeAttribute('min');
  }

  // Update duration in hours (decimal)
  const parseToMin = (t) => {
    if (!t || !/^\d{2}:\d{2}/.test(t)) return null;
    const [h, m] = t.split(':').map(Number);
    return h * 60 + m;
  };

  const s = parseToMin(fromEl.value);
  const e2 = parseToMin(toEl.value);
  if (s == null || e2 == null) return;
  let diff = e2 - s;
  if (diff < 0) diff = 0;
  // Convert minutes to hours (decimal)
  const hours = (diff / 60).toFixed(1);
  durationEl.value = hours;
});

 // Duration calculation for edit modal
(function () {
  const editFromEl = document.getElementById('edit_time_from');
  const editToEl = document.getElementById('edit_time_to');
  const editDurationEl = document.getElementById('edit_duration');
  if (!editFromEl || !editToEl) return;

  function syncEditToMin() {
    if (editFromEl.value) {
      editToEl.setAttribute('min', editFromEl.value);
      if (editToEl.value && editToEl.value < editFromEl.value) {
        editToEl.value = editFromEl.value;
      }
    } else {
      editToEl.removeAttribute('min');
    }
  }

  function parseTimeToMinutes(t) {
    if (!t || !/^\d{2}:\d{2}/.test(t)) return null;
    const [h, m] = t.split(':').map(Number);
    return h * 60 + m;
  }

  function formatMinutes(mm) {
    const h = Math.floor(mm / 60);
    const m = mm % 60;
    return `${h.toString().padStart(2,'0')}:${m.toString().padStart(2,'0')}`;
  }

  function updateEditDuration() {
    if (!editDurationEl) return;
    const s = parseTimeToMinutes(editFromEl.value);
    const e = parseTimeToMinutes(editToEl.value);
    if (s == null || e == null) return;
    let diff = e - s;
    if (diff < 0) diff = 0;
    // Convert minutes to hours (decimal)
    const hours = (diff / 60).toFixed(1);
    editDurationEl.value = hours;
  }

  // init and bind
  syncEditToMin();
  updateEditDuration();
  editFromEl.addEventListener('change', () => { syncEditToMin(); updateEditDuration(); });
  editToEl.addEventListener('change', () => { syncEditToMin(); updateEditDuration(); });
})();


// Add submit button click handler
document.addEventListener('DOMContentLoaded', function() {
    const submitBtn = document.getElementById('submitBtn04');
    const form = document.getElementById('activityHostForm');
    
    // Only use button click handler to prevent double submission
    if (submitBtn) {
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
            submitActivityHostForm();
        });
    }
    
    // Prevent form default submission (but don't call submitActivityHostForm again)
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            // Don't call submitActivityHostForm() here to avoid double submission
        });
    }
});


// Submit Activity Form Function
let isSubmitting = false;

function submitActivityHostForm() {
    const form = document.getElementById('activityHostForm');
    const submitBtn = document.getElementById('submitBtn04');
    
    if (!form) {
        alert('Form not found!');
        return;
    }
    
    // Prevent multiple submissions
    if (isSubmitting) {
        return;
    }
    
    isSubmitting = true;
    
    // Get form data
    const formData = new FormData(form);
    
    // Add Quill editor content to form data
    Object.keys(quillEditors).forEach(editorId => {
        const editor = quillEditors[editorId];
        if (editor && editor.root) {
            const content = editor.root.innerHTML;
            console.log(`Editor ${editorId} content:`, content);
            formData.append(editorId, content);
        }
    });
    
    // Debug: Log all form data
    console.log('Form data being sent:');
    for (let [key, value] of formData.entries()) {
        console.log(key, value);
    }
    
    // Check for empty values that might cause validation errors
    const emptyFields = [];
    for (let [key, value] of formData.entries()) {
        if (value === '' || value === null || value === undefined) {
            emptyFields.push(key);
        }
    }
    if (emptyFields.length > 0) {
        console.warn('Empty fields found:', emptyFields);
    }
    
    
    // Disable submit button
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Processing...';
    }
    
    // Send AJAX request
    fetch('{{ route("admin.activities.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: data.message || 'Activity created successfully',
                    showConfirmButton: false,
                    timer: 2000
                }).then(() => {
                    window.location.reload();
                });
            } else {
                alert(data.message || 'Activity created successfully!');
                window.location.reload();
            }
        } else {
            if (data.errors) {
                let errorMessage = 'Validation errors:\n';
                Object.keys(data.errors).forEach(field => {
                    errorMessage += `• ${data.errors[field][0]}\n`;
                });
                alert(errorMessage);
            } else {
                alert('Error: ' + (data.message || 'Unknown error occurred'));
            }
        }
    })
    .catch(error => {
        alert('Network error: ' + error.message);
    })
    .finally(() => {
        isSubmitting = false;
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'Submit';
        }
    });
}

// Add submit button click handler
document.addEventListener('DOMContentLoaded', function() {
    const submitBtn = document.getElementById('submitBtn05');
    const form = document.getElementById('activityForm');
    
    if (submitBtn) {
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
            submitAdminActivityForm();
        });
    }
    
    // Prevent form default submission
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            submitAdminActivityForm();
        });
    }
});
</script>


<script>
// View Host Function - Simple Modal
function viewActivity(activityId) {
    console.log('viewActivity called with ID:', activityId);
    
    // Disable view button and show loading
    const viewBtn = event.target.closest('button');
    const originalContent = viewBtn.innerHTML;
    viewBtn.disabled = true;
    viewBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
    
    // Show the modal first
    $('#viewActivityModal').modal('show');
    
    // Set loading content
    document.getElementById('viewActivityContent').innerHTML = `
        <div class="text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-2">Loading activity details...</p>
        </div>
    `;
    
    // Fetch data and populate modal
    const url = '{{ url("/") }}/activities/' + activityId;
    fetch(url, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        
        // Check if response is JSON
        const contentType = response.headers.get('content-type');
        if (!contentType || !contentType.includes('application/json')) {
            return response.text().then(text => {
                console.error('Non-JSON response:', text);
                throw new Error('Server returned non-JSON response. Status: ' + response.status);
            });
        }
        
        if (!response.ok) {
            return response.json().then(data => {
                throw new Error(data.message || `HTTP error! status: ${response.status}`);
            });
        }
        
        return response.json();
    })
    .then(data => {
        console.log('Response data:', data);
        if (data.success) {
            // Populate modal content with actual data
            document.getElementById('viewActivityContent').innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">
                            <i class="fa fa-building me-2"></i>Activity Information
                        </h6>
                        <p><strong>Activity Name:</strong> ${data.data.activity_name || 'N/A'}</p>
                        <p><strong>Activity Type:</strong> ${data.data.activity_type || 'N/A'}</p>
                        <p><strong>Activity Location:</strong> ${data.data.activity_location || 'N/A'}</p>
                        <p><strong>Activity Date:</strong> ${data.data.activity_date || 'N/A'}</p>
                    </div>
                    <div class="col-md-6">

                        <p><strong>Activity Time:</strong> ${data.data.activity_time || 'N/A'}</p>
                        <p><strong>Activity Duration:</strong> ${data.data.activity_duration || 'N/A'}</p>
                        <p><strong>Activity Price:</strong> ${data.data.activity_price || 'N/A'}</p>
                        <p><strong>Activity Status:</strong> <span class="badge bg-info">${data.data.activity_status || 'N/A'}</span></p>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-12">
                        <h6 class="text-primary mb-3">
                            <i class="fa fa-info-circle me-2"></i>Status
                        </h6>
                        <p><strong>Status:</strong> <span class="badge bg-success">${data.data.status || 'N/A'}</span></p>
                        <p><strong>Activity ID:</strong> ${activityId}</p>
                    </div>
                </div>
            `;
        } else {
            document.getElementById('viewActivityContent').innerHTML = `
                <div class="text-center text-danger">
                    <i class="fa fa-exclamation-triangle fa-2x mb-2"></i>
                    <p>Error: ${data.message || 'Unknown error'}</p>
                </div>
            `;
        }
    })
    .finally(() => {
        // Re-enable view button
        const viewBtn = document.querySelector(`button[onclick="viewActivity(${activityId})"]`);
        if (viewBtn) {
            viewBtn.disabled = false;
            viewBtn.innerHTML = '<i class="fa fa-eye"></i>';
        }
    })
    .catch(error => {
        console.error('Fetch Error:', error);
        document.getElementById('viewActivityContent').innerHTML = `
            <div class="text-center text-danger">
                <i class="fa fa-exclamation-triangle fa-2x mb-2"></i>
                <p>Error loading activity details</p>
                <small>Error: ${error.message}</small>
            </div>
        `;
    });
}

// Update Activity Status Function
function updateActivityStatus(activityId, status) {
    console.log('updateActivityStatus called with ID:', activityId, 'Status:', status);
    
    if (confirm(`Are you sure you want to ${status} this activity?`)) {
        // Disable approve button and show loading
        const approveBtn = event.target.closest('button');
        const originalContent = approveBtn.innerHTML;
        approveBtn.disabled = true;
        approveBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
        
        // Create form data without CSRF token
        const formData = new FormData();
        formData.append('status', status);
        
        const statusUrl = '{{ url("/") }}/activities/' + activityId + '/status';
        fetch(statusUrl, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        })
        .then(response => {
            console.log('Response status:', response.status);
            
            // Check if response is JSON
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                return response.text().then(text => {
                    console.error('Non-JSON response:', text);
                    throw new Error('Server returned non-JSON response. Status: ' + response.status);
                });
            }
            
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.message || `HTTP error! status: ${response.status}`);
                });
            }
            
            return response.json();
        })
        .then(data => {
            console.log('Response data:', data);
            if (data.success) {
                alert(data.toast.message);
                location.reload();
            } else {
                console.error('Error response:', data);
                alert('Error updating activity status: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error updating activity status: ' + error.message);
        })
        .finally(() => {
            // Re-enable approve/suspend button
            const approveBtn = document.querySelector(`button[onclick="updateActivityStatus(${activityId}, '${status}')"]`);
            const suspendBtn = document.querySelector(`button[onclick="suspendActivityStatus(${activityId}, '${status}')"]`);
            const btn = approveBtn || suspendBtn;
            if (btn) {
                btn.disabled = false;
                if (status === 'approved') {
                    btn.innerHTML = '<i class="fa fa-check"></i>';
                } else if (status === 'suspended') {
                    btn.innerHTML = '<i class="fa fa-ban"></i>';
                }
            }
        });
    }
}

// Suspend Activity Status Function (wrapper for updateActivityStatus)
function suspendActivityStatus(activityId, status) {
    updateActivityStatus(activityId, status);
}

// Delete Activity Function
function deleteActivity(activityId) {
    if (confirm('Are you sure you want to delete this activity? This action cannot be undone.')) {
        // Disable delete button and show loading
        const deleteBtn = event.target.closest('button');
        const originalContent = deleteBtn.innerHTML;
        deleteBtn.disabled = true;
        deleteBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
        
        const deleteUrl = '{{ url("/") }}/activities/' + activityId;
        fetch(deleteUrl, {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            }
        })
        .then(response => {
            // Check if response is JSON
            const contentType = response.headers.get('content-type');
            if (!contentType || !contentType.includes('application/json')) {
                return response.text().then(text => {
                    console.error('Non-JSON response:', text);
                    throw new Error('Server returned non-JSON response. Status: ' + response.status);
                });
            }
            
            if (!response.ok) {
                return response.json().then(data => {
                    throw new Error(data.message || `HTTP error! status: ${response.status}`);
                });
            }
            
            return response.json();
        })
        .then(data => {
            if (data.success) {
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: data.toast?.message || 'Activity deleted successfully',
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        window.location.reload();
                    });
                } else {
                    alert(data.toast?.message || 'Activity deleted successfully');
                    window.location.reload();
                }
            } else {
                alert('Error: ' + (data.message || 'Unknown error occurred'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error deleting activity: ' + error.message);
        })
        .finally(() => {
            // Re-enable delete button
            const deleteBtn = document.querySelector(`button[onclick="deleteActivity(${activityId})"]`);
            if (deleteBtn) {
                deleteBtn.disabled = false;
                deleteBtn.innerHTML = '<i class="fa fa-trash"></i>';
            }
        });
    }
}

</script>

<script>
$(document).ready(function() {
    // Reinitialize DataTable with proper ordering
    if ($.fn.DataTable.isDataTable('#basic-1')) {
        $('#basic-1').DataTable().destroy();
    }
    
    $('#basic-1').DataTable({
        "order": [[ 11, "desc" ]], // Order by hidden created_at column (index 11) descending
        "columnDefs": [
            { "orderable": false, "targets": [10] }, // Disable sorting on Action column
            { "visible": false, "targets": [11] } // Hide created_at column
        ],
        "pageLength": 25,
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
    });
});
</script>