@include('host.header', ['hostUser' => $hostUser, 'host' => $host])

<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>My Activities</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> -->
                                  <!-- <input type="text" class="form-control" value="{{ $host->company_name }}" readonly> -->                                 
                                  <!--   </div> -->
                                <div class="col-sm-12">
                                    <input type="hidden" name="host_id" value="{{ $host->id }}">
                                    <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">
                                    <!-- First Option Block -->
                                    <div class="required_inp mb-3">
                                      <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" name="option_name[]">
                                          </div>
                                        </div>
                                        <div class="col-md-2 position-relative">
                                          <a href="#" 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" type="number" step="0.01" placeholder="Adult Price" 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" type="number" step="0.01" placeholder="Child Price" 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" type="number" step="0.01" placeholder="Infant Price" name="infant_price[]">
                                          </div>
                                        </div>

                                        <!-- Time Slots for this Option -->
                                        <div class="option-time-slots">
                                          <div class="required_inp3 mb-3 row">
                                            <div class="col-md-4 position-relative skdd">
                                              <label class="form-label">Time (From)</label>
                                              <input class="form-control" type="time" name="time_from[0][]">
                                            </div>
                                            <div class="col-md-4 position-relative skdd">
                                              <label class="form-label">Time (To)</label>
                                              <input class="form-control" type="time" name="time_to[0][]">
                                            </div>
                                            <div class="col-md-2 position-relative skdd">
                                              <label class="form-label">Duration(hrs)</label>
                                              <input class="form-control" type="number" step="0.5" placeholder="2" name="duration[0][]" readonly>
                                            </div>
                                            <div class="col-md-2 position-relative skdd">
                                              <div class="input-group mb-3 mt-4">
                                                <button type="button" class="btn btn-success add_time">+</button>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                               
                                  </div>
                              </div>

                              <div class="mb-3 row">
                                <div class="col-sm-12">
                                  <label>Date Range</label>
                                  <div class="input-group flatpicker-calender product-date">
                                    <input class="form-control" id="activity-date-range" type="text" placeholder="Select start and end date" autocomplete="off">
                                  </div>
                                  <input type="hidden" id="activity-dates" name="available_dates" value="">
                                </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-12">
                              <div class="product-upload">
                                <label for="gallery_images" class="form-label">Gallery Images</label>
                                <div id="gallery-dropzone" class="gallery-dropzone">
                                  <div class="dropzone-area">
                                    <div class="dropzone-content">
                                      <i class="fa fa-cloud-upload fa-3x mb-3 text-primary"></i>
                                      <p class="mb-2">Drag and drop images here or click to browse</p>
                                      <p class="text-muted small">Multiple images allowed</p>
                                      <input type="file" class="d-none" id="gallery_images" name="gallery_images[]" accept="image/*" multiple>
                                      <button type="button" class="btn btn-primary btn-sm mt-2" onclick="document.getElementById('gallery_images').click()">Browse Files</button>
                                    </div>
                                  </div>
                                  <div id="gallery-preview" class="gallery-preview mt-3"></div>
                                </div>
                              </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="activityEditorAccordion">
                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="activityEditor-headingOne">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#activityEditor-collapseOne" data-bs-parent="#activityEditorAccordion" aria-expanded="false" aria-controls="activityEditor-collapseOne">
                                            Overview
                                            <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="activityEditor-collapseOne" aria-labelledby="activityEditor-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="activityEditor-headingTwo">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#activityEditor-collapseTwo" data-bs-parent="#activityEditorAccordion" aria-expanded="false" aria-controls="activityEditor-collapseTwo">
                                            
                                            Highlights
                                            <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="activityEditor-collapseTwo" aria-labelledby="activityEditor-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="activityEditor-headingThree">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#activityEditor-collapseThree" data-bs-parent="#activityEditorAccordion" aria-expanded="false" aria-controls="activityEditor-collapseThree">
                                            
                                            Included <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="activityEditor-collapseThree" aria-labelledby="activityEditor-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="activityEditor-heading4">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#activityEditor-collapse4" data-bs-parent="#activityEditorAccordion" aria-expanded="false" aria-controls="activityEditor-collapse4">
                                            
                                            Not Included <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="activityEditor-collapse4" aria-labelledby="activityEditor-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="activityEditor-heading5">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#activityEditor-collapse5" data-bs-parent="#activityEditorAccordion" aria-expanded="false" aria-controls="activityEditor-collapse5">
                                            
                                            Know before you go<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="activityEditor-collapse5" aria-labelledby="activityEditor-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="activityEditor-heading6">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#activityEditor-collapse6" data-bs-parent="#activityEditorAccordion" aria-expanded="false" aria-controls="activityEditor-collapse6">
                                            
                                            Additional Information<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="activityEditor-collapse6" aria-labelledby="activityEditor-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="activityEditor-heading7">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#activityEditor-collapse7" data-bs-parent="#activityEditorAccordion" aria-expanded="false" aria-controls="activityEditor-collapse7">                                            
                                            Cancellation Policy<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="activityEditor-collapse7" aria-labelledby="activityEditor-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">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> Option 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>Available 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->activityOption->option_name ?? 'N/A' }}</td>
                                <td>{{ $activity->location }}</td>
                                <td>{{ $activity->activityOption->time_from ?? 'N/A' }}</td>
                                <td>{{ $activity->activityOption->time_to ?? 'N/A' }}</td>
                                <!-- <td>{{ $activity->activityOption->duration ?? 'N/A' }}</td> -->
                                <td>{{ $activity->activityOption->adult_price ?? 'N/A' }} AED</td>
                                <td>{{ $activity->activityOption->child_price ?? 'N/A' }} AED</td>
                                <td>{{ $activity->activityOption->infant_price ?? 'N/A' }} AED</td>
                                <td>
                                    @if($activity->available_dates)
                                        @php
                                            $dates = explode(',', $activity->available_dates);
                                            $formattedDates = array_map(function($date) {
                                                return \Carbon\Carbon::parse(trim($date))->format('M d, Y');
                                            }, $dates);
                                            $totalDates = count($formattedDates);
                                            $displayDates = array_slice($formattedDates, 0, 2);
                                            $remainingDates = array_slice($formattedDates, 2);
                                        @endphp
                                        <div class="d-flex flex-wrap gap-1">
                                            @foreach($displayDates as $formattedDate)
                                                <span class="badge bg-info">{{ $formattedDate }}</span>
                                            @endforeach
                                            @if($totalDates > 2)
                                                <button type="button" class="btn btn-sm btn-outline-info" 
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#datesModal{{ $activity->id }}"
                                                        title="Show all {{ $totalDates }} dates">
                                                    +{{ $totalDates - 2 }} more
                                                </button>
                                            @endif
                                        </div>
                                        
                                        @if($totalDates > 2)
                                            <!-- Modal for showing all dates -->
                                            <div class="modal fade" id="datesModal{{ $activity->id }}" tabindex="-1" aria-labelledby="datesModalLabel{{ $activity->id }}" aria-hidden="true">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="datesModalLabel{{ $activity->id }}">
                                                                Available Dates - {{ $activity->activityOption->option_name ?? 'Activity' }}
                                                            </h5>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <div class="row">
                                                                @foreach($formattedDates as $index => $formattedDate)
                                                                    <div class="col-md-4 col-sm-6 mb-2">
                                                                        <div class="card border-info">
                                                                            <div class="card-body text-center py-2">
                                                                                <span class="badge bg-info fs-6">{{ $formattedDate }}</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            </div>
                                                            <div class="mt-3">
                                                                <small class="text-muted">
                                                                    <i class="fa fa-info-circle"></i> 
                                                                    Total: {{ $totalDates }} available date{{ $totalDates > 1 ? 's' : '' }}
                                                                </small>
                                                            </div>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    @else
                                        N/A
                                    @endif
                                </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="editActivity({{ $activity->id }})" title="Edit">
                                          <i class="fa fa-pencil"></i>
                                        </button>
              
                                      @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>

              <div class="modal-body">
                     <form action="#" method="POST" enctype="multipart/form-data" id="editActivityForm" novalidate>
                          @method('POST')
                          <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_name" id="edit_option_name" placeholder="Activity 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 class="modal-footer">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                          <!-- <input type="submit" name="submit" value="submit"> -->
                          <button type="button" class="btn btn-primary waves-effect waves-light" id="saveEditActivityBtn" onclick="submitEditForm()">Submit</button>
                        </div>
                    </form>
                </div>

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

@include('host.footer')

<style>
/* Gallery Dropzone Styles */
.gallery-dropzone {
    width: 100%;
}

.dropzone-area {
    border: 2px dashed #ced4da;
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    background-color: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dropzone-area:hover {
    border-color: #1575bf;
    background-color: #e7f3ff;
}

.dropzone-area.drag-over {
    border-color: #1575bf;
    background-color: #d0e7ff;
    transform: scale(1.02);
}

.dropzone-content {
    pointer-events: none;
}

.dropzone-content button {
    pointer-events: all;
}

.gallery-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.gallery-image-item {
    position: relative;
    width: 150px;
    height: 150px;
    border: 2px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.gallery-image-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.gallery-preview-img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
}

.gallery-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #dc3545;
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.2s ease;
    z-index: 10;
}

.gallery-delete-btn:hover {
    background-color: #c82333;
    transform: scale(1.1);
}

.gallery-image-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 5px;
    font-size: 11px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .gallery-image-item {
        width: 120px;
        height: 120px;
    }
    
    .gallery-preview-img {
        height: 90px;
    }
}
</style>

<script>  
// Edit Activity Form Handlers
// document.addEventListener('DOMContentLoaded', function() {
//     // Wait a bit for the DOM to be fully loaded
//     setTimeout(function() {
//         const editForm = document.getElementById('editActivityForm');
//         const saveEditBtn = document.getElementById('saveEditActivityBtn');
        
//         // Handle save button click
//         if (saveEditBtn) {
//             saveEditBtn.addEventListener('click', function(e) {
//                 e.preventDefault();
//                 submitEditForm();
//             });
//         }
//     }, 100);
// });

// Edit Activity Function
function editActivity(activityId) {
    
    // Set the form action URL with the correct activity ID
    const editForm = document.getElementById('editActivityForm');
    if (editForm) {
        editForm.action = '{{ route("host.activities.update", ":id") }}'.replace(':id', activityId);
        console.log('Form action set to:', editForm.action);
    }
    
    // Fetch activity data and populate edit form
    fetch('{{ url("/host-activities") }}/' + activityId, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        },
        credentials: 'same-origin'
    })
    .then(response => {
        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) {
            // Populate edit form fields
            document.getElementById('edit_activity_id').value = activityId;
            document.getElementById('edit_option_name').value = data.data.activity_name || '';
            document.getElementById('edit_location').value = data.data.activity_location || '';
            document.getElementById('edit_adult_price').value = data.data.activity_adult_price || '';
            document.getElementById('edit_child_price').value = data.data.activity_child_price || '';
            document.getElementById('edit_infant_price').value = data.data.activity_infant_price || '';
            document.getElementById('edit_time_from').value = data.data.activity_time_from || '';
            document.getElementById('edit_time_to').value = data.data.activity_time_to || '';
            document.getElementById('edit_duration').value = data.data.activity_duration || '';
            document.getElementById('edit_status').value = data.data.activity_status || 'pending';
            
            // Show edit modal
            const editModal = new bootstrap.Modal(document.getElementById('editActivityModal'));
            editModal.show();
            
            // Wait a moment for the modal to fully load
            setTimeout(() => {
                console.log('Modal should be loaded now, form available:', document.getElementById('editActivityForm'));
            }, 100);
        } else {
            alert('Error loading activity data: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        if (error.message.includes('403') || error.message.includes('Unauthorized')) {
            alert('Access denied. You do not have permission to edit this activity, or it does not belong to you.');
        } else if (error.message.includes('404')) {
            alert('Activity not found. It may have been deleted.');
        } else {
            alert('Error loading activity data: ' + error.message);
        }
    });
}
// Submit Edit Form Function
function submitEditForm() {
    console.log('submitEditForm called in activities.blade.php');
    
    const editForm = document.getElementById('editActivityForm');
    console.log('Form found:', editForm);
    
    if (!editForm) {
        console.error('Edit form not found! Available forms:', document.querySelectorAll('form'));
        alert('Edit form not found. Please make sure the edit modal is open.');
        return;
    }
    
    const saveBtn = document.getElementById('saveEditActivityBtn');
    const editModal = document.getElementById('editActivityModal');
    
    // Check if modal is actually open
    if (!editModal || !editModal.classList.contains('show')) {
        console.log('Modal not open or not found:', editModal);
        alert('Please open the edit modal first.');
        return;
    }
    
    // Get form data
    const formData = new FormData(editForm);
    
    // Disable save button
    if (saveBtn) {
        saveBtn.disabled = true;
        saveBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Saving...';
    }
    
    // Get the activity ID and generate URL
    const activityId = document.getElementById('edit_activity_id').value;
    const updateUrl = '{{ route("host.activities.update", ":id") }}'.replace(':id', activityId);
    
    // Send AJAX request to update activity
    fetch(updateUrl, {
        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) {
            alert('Activity updated successfully!');
            $('#editActivityModal').modal('hide');
            location.reload();
        } else {
            alert('Error updating activity: ' + (data.message || 'Unknown error'));
        }
    })
    .catch(error => {
        alert('Network error: ' + error.message);
    })
    .finally(() => {
        if (saveBtn) {
            saveBtn.disabled = false;
            saveBtn.innerHTML = 'Save changes';
        }
    });
}

</script>

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

// Initialize Flatpickr for date range selection with individual date removal
let selectedDatesArray = []; // Store all selected dates
let rangeStartDate = null; // Track first date for range selection

function initializeMultipleDatePicker() {
    const dateRangeInput = document.getElementById('activity-date-range');
    const hiddenInput = document.getElementById('activity-dates');
    
    if (!dateRangeInput || !hiddenInput) return;
    
    // Function to generate all dates between start and end
    function generateDateRange(startDate, endDate) {
        const dates = [];
        const start = new Date(startDate);
        const end = new Date(endDate);
        
        // Ensure start is before end
        if (start > end) {
            [start, end] = [end, start];
        }
        
        const currentDate = new Date(start);
        while (currentDate <= end) {
            const year = currentDate.getFullYear();
            const month = String(currentDate.getMonth() + 1).padStart(2, '0');
            const day = String(currentDate.getDate()).padStart(2, '0');
            dates.push(`${year}-${month}-${day}`);
            currentDate.setDate(currentDate.getDate() + 1);
        }
        
        return dates;
    }
    
    // Function to format date string to Date object
    function dateStringToDate(dateStr) {
        const [year, month, day] = dateStr.split('-').map(Number);
        return new Date(year, month - 1, day);
    }
    
    // Function to convert Date objects to date strings
    function datesToStringArray(dates) {
        return dates.map(function(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        });
    }
    
    // Function to update hidden input with selected dates
    function updateHiddenInput() {
        hiddenInput.value = selectedDatesArray.join(',');
        // Update visible input to show count instead of dates
        if (selectedDatesArray.length > 0) {
            dateRangeInput.value = `${selectedDatesArray.length} date${selectedDatesArray.length > 1 ? 's' : ''} selected`;
        } else {
            dateRangeInput.value = '';
            dateRangeInput.placeholder = 'Select start and end date';
        }
    }
    
    // Wait for flatpickr to be available
    function initFlatpickr() {
        if (typeof flatpickr !== 'undefined') {
            // Initialize flatpickr with multiple date selection (allows clicking to toggle)
            const fp = flatpickr(dateRangeInput, {
                mode: "multiple",
                dateFormat: "Y-m-d",
                minDate: "today",
                allowInput: false,
                onChange: function(selectedDates, dateStr, instance) {
                    // Convert selected dates to string array
                    const currentSelected = datesToStringArray(selectedDates);
                    
                    // Check if user is selecting a range (two dates selected)
                    if (selectedDates.length === 2 && rangeStartDate) {
                        const start = rangeStartDate;
                        const end = selectedDates[1];
                        
                        // Check if these are the only two dates (new range selection)
                        // or if end date is different from what we have
                        const sortedCurrent = currentSelected.sort();
                        const sortedExisting = [...selectedDatesArray].sort();
                        
                        // If this looks like a new range selection, generate the range
                        if (Math.abs(end - start) > 86400000) { // More than 1 day apart
                            const rangeDates = generateDateRange(start, end);
                            
                            // Merge with existing dates (in case user had some selected)
                            const allDates = [...new Set([...selectedDatesArray, ...rangeDates])];
                            selectedDatesArray = allDates.sort();
                            
                            // Update flatpickr with all dates in range
                            const allDateObjects = selectedDatesArray.map(dateStringToDate);
                            instance.setDate(allDateObjects, false);
                            
                            rangeStartDate = null; // Reset range start
                        } else {
                            // Just two individual dates, not a range
                            selectedDatesArray = currentSelected;
                        }
                    } else if (selectedDates.length === 1) {
                        // First date selected - store as range start
                        rangeStartDate = selectedDates[0];
                        selectedDatesArray = currentSelected;
                    } else {
                        // Normal selection/deselection (clicking to toggle dates)
                        selectedDatesArray = currentSelected;
                        rangeStartDate = null;
                    }
                    
                    updateHiddenInput();
                    // Hide dates from display - show count instead
                    setTimeout(() => {
                        if (selectedDatesArray.length > 0) {
                            dateRangeInput.value = `${selectedDatesArray.length} date${selectedDatesArray.length > 1 ? 's' : ''} selected`;
                        } else {
                            dateRangeInput.value = '';
                        }
                    }, 10);
                },
                onClose: function(selectedDates, dateStr, instance) {
                    // Ensure dates are synced when calendar closes
                    const currentDates = datesToStringArray(selectedDates);
                    selectedDatesArray = currentDates;
                    rangeStartDate = null;
                    updateHiddenInput();
                    // Hide dates from display - show count instead
                    setTimeout(() => {
                        if (selectedDatesArray.length > 0) {
                            dateRangeInput.value = `${selectedDatesArray.length} date${selectedDatesArray.length > 1 ? 's' : ''} selected`;
                        } else {
                            dateRangeInput.value = '';
                        }
                    }, 10);
                }
            });
            
            // Store flatpickr instance for later use if needed
            dateRangeInput._flatpickr = fp;
            
            // Intercept and hide dates from being displayed in the input field
            // Watch for input value changes and replace date strings with count
            let lastValue = '';
            const hideDatesInterval = setInterval(function() {
                const currentValue = dateRangeInput.value;
                // If value contains date format (YYYY-MM-DD) and it's different from our count display
                if (currentValue && currentValue !== lastValue && /^\d{4}-\d{2}-\d{2}/.test(currentValue)) {
                    // Replace with count display
                    if (selectedDatesArray.length > 0) {
                        const countDisplay = `${selectedDatesArray.length} date${selectedDatesArray.length > 1 ? 's' : ''} selected`;
                        dateRangeInput.value = countDisplay;
                        lastValue = countDisplay;
                    } else {
                        dateRangeInput.value = '';
                        lastValue = '';
                    }
                } else if (currentValue && !currentValue.includes('date') && !currentValue.includes('selected')) {
                    // If it's not our count display and contains dates, update it
                    if (selectedDatesArray.length > 0 && /^\d{4}-\d{2}-\d{2}/.test(currentValue)) {
                        const countDisplay = `${selectedDatesArray.length} date${selectedDatesArray.length > 1 ? 's' : ''} selected`;
                        dateRangeInput.value = countDisplay;
                        lastValue = countDisplay;
                    }
                } else {
                    lastValue = currentValue;
                }
            }, 50);
            
            // Clear interval when modal is closed or page is unloaded
            const modal = document.getElementById('exampleModalCenter1');
            if (modal) {
                modal.addEventListener('hidden.bs.modal', function() {
                    clearInterval(hideDatesInterval);
                });
            }
        } else {
            // Retry after a short delay if flatpickr is not yet loaded
            setTimeout(initFlatpickr, 100);
        }
    }
    
    // Start initialization
    initFlatpickr();
}

// Initialize when DOM is ready and scripts are loaded
document.addEventListener('DOMContentLoaded', function() {
    // Wait a bit for all scripts to load
    setTimeout(function() {
        initializeMultipleDatePicker();
    }, 500);
    
    // 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',
                placeholder: 'Enter content here...',
                modules: {
                    toolbar: [
                        [{ 'header': [1, 2, 3, false] }],
                        ['bold', 'italic', 'underline', 'strike'],
                        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                        [{ 'indent': '-1'}, { 'indent': '+1' }],
                        ['clean']
                    ]
                }
            });
            
            // Simple mechanism: Close all other panes when one opens
            const toolbar = quillEditors[editorId].getModule('toolbar');
            const toolbarElement = toolbar.container;
            
            // Close all panes except the specified one
            function closeOtherPanes(currentPicker) {
                document.querySelectorAll('.ql-picker.ql-expanded').forEach(function(pane) {
                    if (pane !== currentPicker) {
                        pane.classList.remove('ql-expanded');
                    }
                });
            }
            
            // Method 1: Intercept clicks on picker labels (capture phase - runs first)
            toolbarElement.addEventListener('click', function(e) {
                const pickerLabel = e.target.closest('.ql-picker-label');
                if (pickerLabel) {
                    const clickedPicker = pickerLabel.closest('.ql-picker');
                    // Close all other panes immediately
                    closeOtherPanes(clickedPicker);
                    // Also close after a short delay to catch any that open
                    setTimeout(function() {
                        closeOtherPanes(clickedPicker);
                    }, 50);
                }
            }, true); // Use capture phase to run before Quill's handler
            
            // Method 2: Watch for when panes open and close others
            const observer = new MutationObserver(function(mutations) {
                mutations.forEach(function(mutation) {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                        const target = mutation.target;
                        if (target.classList.contains('ql-picker') && target.classList.contains('ql-expanded')) {
                            // A pane just opened, close all others
                            closeOtherPanes(target);
                        }
                    }
                });
            });
            
            // Watch all pickers in this toolbar
            const pickers = toolbarElement.querySelectorAll('.ql-picker');
            pickers.forEach(function(picker) {
                observer.observe(picker, {
                    attributes: true,
                    attributeFilter: ['class']
                });
            });
        }
    });
    
    // Close all panes when clicking outside (simple mechanism)
    document.addEventListener('click', function(e) {
        if (!e.target.closest('.ql-toolbar') && !e.target.closest('.ql-picker-options')) {
            document.querySelectorAll('.ql-picker.ql-expanded').forEach(function(pane) {
                pane.classList.remove('ql-expanded');
            });
        }
    });
    
    // Gallery Images Drag and Drop with Delete Functionality
    const galleryInput = document.getElementById('gallery_images');
    const galleryPreview = document.getElementById('gallery-preview');
    const dropzone = document.getElementById('gallery-dropzone');
    const dropzoneArea = dropzone.querySelector('.dropzone-area');
    let galleryFiles = []; // Store all selected files
    
    if (galleryInput && galleryPreview && dropzone) {
        // Handle file input change
        galleryInput.addEventListener('change', function(e) {
            const newFiles = Array.from(e.target.files);
            addGalleryFiles(newFiles);
        });
        
        // Drag and drop functionality
        dropzoneArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            e.stopPropagation();
            dropzoneArea.classList.add('drag-over');
        });
        
        dropzoneArea.addEventListener('dragleave', function(e) {
            e.preventDefault();
            e.stopPropagation();
            dropzoneArea.classList.remove('drag-over');
        });
        
        dropzoneArea.addEventListener('drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
            dropzoneArea.classList.remove('drag-over');
            
            const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
            if (files.length > 0) {
                addGalleryFiles(files);
            }
        });
        
        // Click to browse
        dropzoneArea.addEventListener('click', function(e) {
            if (e.target.tagName !== 'BUTTON') {
                galleryInput.click();
            }
        });
        
        // Function to add files to gallery
        function addGalleryFiles(newFiles) {
            newFiles.forEach((file) => {
                if (file.type.startsWith('image/')) {
                    // Check if file already exists
                    const fileExists = galleryFiles.some(f => f.name === file.name && f.size === file.size);
                    if (!fileExists) {
                        galleryFiles.push(file);
                        displayGalleryImage(file, galleryFiles.length - 1);
                    }
                }
            });
            updateFileInput();
        }
        
        // Function to display gallery image with delete button
        function displayGalleryImage(file, index) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const imageContainer = document.createElement('div');
                imageContainer.className = 'gallery-image-item';
                imageContainer.dataset.index = index;
                
                const img = document.createElement('img');
                img.src = e.target.result;
                img.className = 'gallery-preview-img';
                
                const deleteBtn = document.createElement('button');
                deleteBtn.type = 'button';
                deleteBtn.className = 'gallery-delete-btn';
                deleteBtn.innerHTML = '<i class="fa fa-times"></i>';
                deleteBtn.onclick = function() {
                    removeGalleryImage(index);
                };
                
                const imageName = document.createElement('div');
                imageName.className = 'gallery-image-name';
                imageName.textContent = file.name.length > 20 ? file.name.substring(0, 20) + '...' : file.name;
                
                imageContainer.appendChild(img);
                imageContainer.appendChild(deleteBtn);
                imageContainer.appendChild(imageName);
                galleryPreview.appendChild(imageContainer);
            };
            reader.readAsDataURL(file);
        }
        
        // Function to remove gallery image
        function removeGalleryImage(index) {
            // Remove from array
            galleryFiles.splice(index, 1);
            
            // Clear preview and redisplay
            galleryPreview.innerHTML = '';
            galleryFiles.forEach((file, newIndex) => {
                displayGalleryImage(file, newIndex);
            });
            
            updateFileInput();
        }
        
        // Function to update the file input
        function updateFileInput() {
            // Create a new DataTransfer object
            const dataTransfer = new DataTransfer();
            galleryFiles.forEach(file => {
                dataTransfer.items.add(file);
            });
            galleryInput.files = dataTransfer.files;
        }
    }
});


// 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)
// This handles both initial rows and dynamically added rows with nested arrays
document.addEventListener('input', function(e) {
  const target = e.target;
  // Match nested array format: time_from[0][], time_from[1][], etc.
  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('.required_inp3') || target.closest('.mb-3.row') || target.closest('.row');
  if (!row) return;

  // Find inputs in the same row using attribute starts with selector
  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');
    
    console.log('DOMContentLoaded - Setting up submit handlers');
    console.log('Submit button found:', submitBtn);
    console.log('Form found:', form);
    
    // Remove inline onclick and use event listener only to prevent double execution
    if (submitBtn) {
        // Remove any existing onclick attribute
        submitBtn.removeAttribute('onclick');
        
        // Add event listener
        submitBtn.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            console.log('Submit button clicked via event listener');
            submitActivityHostForm();
        });
        
        console.log('Event listener attached to submit button');
    }
    
    // Prevent form default submission
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            e.stopPropagation();
            console.log('Form submit prevented, using button handler instead');
        });
    }
});


// Submit Activity Form Function
let isSubmitting = false;

function submitActivityHostForm() {
    console.log('submitActivityHostForm called');
    const form = document.getElementById('activityHostForm');
    const submitBtn = document.getElementById('submitBtn04');
    
    if (!form) {
        console.error('Form not found!');
        alert('Form not found!');
        return;
    }
    
    // Prevent multiple submissions
    if (isSubmitting) {
        console.log('Already submitting, ignoring...');
        return;
    }
    
    console.log('Starting form submission...');
    isSubmitting = true;
    
    // Get form data first
    let formData = new FormData(form);
    console.log('FormData created');
    
    // Validate required fields before submission
    const category = form.querySelector('select[name="category"]');
    const location = form.querySelector('select[name="location"]');
    const cancellationPolicy = form.querySelector('select[name="cancellation_policy"]');
    const availableDates = document.getElementById('activity-dates'); // This is now the hidden field
    const optionNames = formData.getAll('option_name[]');
    
    if (!category || !category.value) {
        alert('Please select an Activity Type');
        isSubmitting = false;
        return;
    }
    
    if (!location || !location.value) {
        alert('Please select a Location');
        isSubmitting = false;
        return;
    }
    
    if (!cancellationPolicy || !cancellationPolicy.value) {
        alert('Please select a Cancellation Policy');
        isSubmitting = false;
        return;
    }
    
    if (!availableDates || !availableDates.value || availableDates.value.trim() === '') {
        alert('Please select at least one Available Date');
        isSubmitting = false;
        return;
    }
    
    if (!optionNames || optionNames.length === 0 || !optionNames[0]) {
        alert('Please enter at least one Activity Option Name');
        isSubmitting = false;
        return;
    }
    
    // Validate array fields
    const adultPrices = formData.getAll('adult_price[]');
    const childPrices = formData.getAll('child_price[]');
    const infantPrices = formData.getAll('infant_price[]');
    const timeFroms = formData.getAll('time_from[]');
    const timeTos = formData.getAll('time_to[]');
    const durations = formData.getAll('duration[]');
    
    if (!adultPrices || adultPrices.length === 0 || !adultPrices[0] || adultPrices[0] === '') {
        alert('Please enter Adult Price');
        isSubmitting = false;
        return;
    }
    
    if (!childPrices || childPrices.length === 0 || !childPrices[0] || childPrices[0] === '') {
        alert('Please enter Child Price');
        isSubmitting = false;
        return;
    }
    
    if (!infantPrices || infantPrices.length === 0 || !infantPrices[0] || infantPrices[0] === '') {
        alert('Please enter Infant Price');
        isSubmitting = false;
        return;
    }
    
    // Time fields are optional - don't validate them as required
    // They can be auto-calculated or left empty
    
    // Re-get form data to ensure we have the latest values
    formData = new FormData(form);
    
    // Explicitly ensure gallery images are included in FormData
    const galleryImagesInput = document.getElementById('gallery_images');
    
    if (galleryImagesInput && galleryImagesInput.files.length > 0) {
        // Remove any existing entries
        formData.delete('gallery_images[]');
        // Add all files
        for (let i = 0; i < galleryImagesInput.files.length; i++) {
            formData.append('gallery_images[]', galleryImagesInput.files[i]);
        }
        console.log('Gallery images added to FormData:', galleryImagesInput.files.length, 'file(s)');
    }
    
    // Add Quill editor content to form data
    // Ensure all required editors are included
    const requiredEditors = ['editor01', 'editor02', 'editor03', 'editor04', 'editor05', 'editor06', 'editor07'];
    
    requiredEditors.forEach(editorId => {
        const editor = quillEditors[editorId];
        if (editor && editor.root) {
            const content = editor.root.innerHTML;
            // Check if content is empty (placeholder text won't be in the actual content)
            if (!content || content === '<p><br></p>' || content.trim() === '<p></p>') {
                // Set a default minimal content to pass validation
                formData.append(editorId, '<p>Content not provided</p>');
                console.warn(`Editor ${editorId} has empty content, setting default`);
            } else {
                formData.append(editorId, content);
                console.log(`Editor ${editorId} content:`, content);
            }
        } else {
            // If editor not found, append default content
            formData.append(editorId, '<p>Content not provided</p>');
            console.warn(`Editor ${editorId} not found, setting default`);
        }
    });
    
    // 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...';
    }
        // Use hardcoded URL instead of form action
        
    // Send AJAX request
 
    fetch('{{ url("/host-activitiesSubmit") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => {
        console.log('Response status:', response.status);
        console.log('Response headers:', response.headers);
        
        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. Please check the server logs.');
            });
        }
        
        if (!response.ok) {
            return response.json().then(errorData => {
                // Log detailed validation errors
                console.error('Validation errors:', errorData.errors);
                console.error('Error message:', errorData.message);
                // Preserve error data structure
                const error = new Error(errorData.message || `HTTP error! status: ${response.status}`);
                error.errors = errorData.errors;
                error.data = errorData;
                throw error;
            }).catch(err => {
                if (err.errors) {
                    throw err; // Re-throw if we already have the structured error
                }
                throw new Error(`HTTP error! status: ${response.status}`);
            });
        }
        
        return response.json();
    })
    .then(data => {
        console.log('Response data:', 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 => {
                    const fieldErrors = Array.isArray(data.errors[field]) ? data.errors[field] : [data.errors[field]];
                    errorMessage += `• ${field}: ${fieldErrors[0]}\n`;
                });
                
                if (typeof Swal !== 'undefined') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Failed',
                        html: '<pre style="text-align: left; white-space: pre-wrap;">' + errorMessage + '</pre>',
                        confirmButtonText: 'OK'
                    });
                } else {
                    alert(errorMessage);
                }
            } else {
                alert('Error: ' + (data.message || 'Unknown error occurred'));
            }
        }
    })
    .catch(error => {
        console.error('Fetch Error:', error);
        console.error('Error object:', JSON.stringify(error, null, 2));
        
        let errorMessage = '';
        let errorTitle = 'Error';
        
        // Check if error has validation errors
        if (error.errors && typeof error.errors === 'object') {
            errorTitle = 'Validation Failed';
            errorMessage = 'Please fix the following errors:\n\n';
            Object.keys(error.errors).forEach(field => {
                const fieldErrors = Array.isArray(error.errors[field]) ? error.errors[field] : [error.errors[field]];
                // Format field name for display
                const displayField = field.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
                errorMessage += `• ${displayField}: ${fieldErrors[0]}\n`;
            });
        } else if (error.message) {
            errorMessage = error.message;
        } else {
            errorMessage = 'Network error occurred. Please check the form and try again.';
        }
        
        if (typeof Swal !== 'undefined') {
            Swal.fire({
                icon: 'error',
                title: errorTitle,
                html: '<div style="text-align: left; white-space: pre-wrap; font-family: monospace; max-height: 400px; overflow-y: auto;">' + errorMessage + '</div>',
                confirmButtonText: 'OK',
                width: '600px'
            });
        } else {
            alert(errorTitle + ':\n\n' + errorMessage);
        }
    })
    .finally(() => {
        isSubmitting = false;
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'Submit';
        }
    });
}


// View Host Function - Simple Modal
  function viewActivity(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
    fetch('{{ url("/host-activities") }}/' + activityId, {
        method: 'GET',
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(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) {
    
    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 updateFormData = new FormData();
        updateFormData.append('status', status);
        
        fetch(`{{ route('host.activities.status', ':id') }}`.replace(':id', activityId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: updateFormData
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(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 button
            const approveBtn = document.querySelector(`button[onclick="updateActivityStatus(${activityId}, '${status}')"]`);
            if (approveBtn) {
                approveBtn.disabled = false;
                approveBtn.innerHTML = '<i class="fa fa-check"></i>';
            }
        });
    }
}

// Suspend Host Function
function suspendActivityStatus(activityId, status) {
    if (confirm('Are you sure you want to suspend this activity? This will suspend their account.')) {
        // Disable suspend button and show loading
        const suspendBtn = event.target.closest('button');
        const originalContent = suspendBtn.innerHTML;
        suspendBtn.disabled = true;
        suspendBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
        
        // Create form data without CSRF token
        const suspendFormData = new FormData();
        suspendFormData.append('status', 'suspended');
        
        fetch(`{{ route('host.activities.status', ':id') }}`.replace(':id', activityId), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: suspendFormData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.toast.message);
                location.reload();
            } else {
                alert('Error suspending activity: ' + (data.message || 'Unknown error'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error suspending activity: ' + error.message);
        })
        .finally(() => {
            // Re-enable suspend button
            const suspendBtn = document.querySelector(`button[onclick="suspendActivityStatus(${activityId}, '${status}')"]`);
            if (suspendBtn) {
                suspendBtn.disabled = false;
                suspendBtn.innerHTML = '<i class="fa fa-ban"></i>';
            }
        });
    }
}

// Delete Host 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>';
        
        fetch(`{{ route('host.activities.delete', ':id') }}`.replace(':id', activityId), {
            method: 'DELETE',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Content-Type': 'application/json',
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.toast.message);
                location.reload();
            } else {
                alert('Error deleting activity');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error deleting activity');
        })
        .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>