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

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

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

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

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

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

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

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

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

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

                                  <div class="input-group flatpicker-calender product-date">
                                    <input class="form-control" id="datetime-local1" type="date" name="date">
                                  </div>
                                </div>
                              </div>

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

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

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

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

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

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

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

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

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

                                            <div class="toolbar-box">
                                              <div id="toolbar01"><span class="ql-formats">
                                                  <select class="ql-size"></select></span><span class="ql-formats">
                                                  <button class="ql-bold">Bold </button>
                                                  <button class="ql-italic">Italic </button>
                                                  <button class="ql-underline">underline</button>
                                                  <button class="ql-strike">Strike </button></span><span class="ql-formats">
                                                  <button class="ql-list" value="ordered">List </button>
                                                  <button class="ql-list" value="bullet"> </button>
                                                  <button class="ql-indent" value="-1"> </button>
                                                  <button class="ql-indent" value="+1"></button></span><span class="ql-formats">
                                                  <button class="ql-link"></button>
                                                  <button class="ql-image"></button>
                                                  <button class="ql-video"></button></span></div>
                                              <div id="editor01"></div>
                                            </div>

                                            <div class="product-buttons">
                                              <div class="btn">
                                                <div class="d-flex align-items-center gap-sm-2 gap-1">Save
                                               
                                                </div>
                                              </div>
                                            </div>
          
                                          </div>
                                        </div>
                                      </div>
                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                                            
                                            Highlights
                                            <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo" aria-labelledby="panelsStayOpen-headingTwo">
                                          <div class="accordion-body">
                                         
                                            
                                            <div class="toolbar-box">
                                              <div id="toolbar02"><span class="ql-formats">
                                                  <select class="ql-size"></select></span><span class="ql-formats">
                                                  <button class="ql-bold">Bold </button>
                                                  <button class="ql-italic">Italic </button>
                                                  <button class="ql-underline">underline</button>
                                                  <button class="ql-strike">Strike </button></span><span class="ql-formats">
                                                  <button class="ql-list" value="ordered">List </button>
                                                  <button class="ql-list" value="bullet"> </button>
                                                  <button class="ql-indent" value="-1"> </button>
                                                  <button class="ql-indent" value="+1"></button></span><span class="ql-formats">
                                                  <button class="ql-link"></button>
                                                  <button class="ql-image"></button>
                                                  <button class="ql-video"></button></span></div>
                                              <div id="editor02"></div>
                                            </div>

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


                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-headingThree">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
                                            
                                            Included <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree" aria-labelledby="panelsStayOpen-headingThree">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
                                              <div id="toolbar03"><span class="ql-formats">
                                                  <select class="ql-size"></select></span><span class="ql-formats">
                                                  <button class="ql-bold">Bold </button>
                                                  <button class="ql-italic">Italic </button>
                                                  <button class="ql-underline">underline</button>
                                                  <button class="ql-strike">Strike </button></span><span class="ql-formats">
                                                  <button class="ql-list" value="ordered">List </button>
                                                  <button class="ql-list" value="bullet"> </button>
                                                  <button class="ql-indent" value="-1"> </button>
                                                  <button class="ql-indent" value="+1"></button></span><span class="ql-formats">
                                                  <button class="ql-link"></button>
                                                  <button class="ql-image"></button>
                                                  <button class="ql-video"></button></span></div>
                                              <div id="editor03"></div>
                                            </div>

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

                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-heading4">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse4" aria-expanded="false" aria-controls="panelsStayOpen-collapse4">
                                            
                                            Not Included <i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapse4" aria-labelledby="panelsStayOpen-heading4">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
                                              <div id="toolbar04"><span class="ql-formats">
                                                  <select class="ql-size"></select></span><span class="ql-formats">
                                                  <button class="ql-bold">Bold </button>
                                                  <button class="ql-italic">Italic </button>
                                                  <button class="ql-underline">underline</button>
                                                  <button class="ql-strike">Strike </button></span><span class="ql-formats">
                                                  <button class="ql-list" value="ordered">List </button>
                                                  <button class="ql-list" value="bullet"> </button>
                                                  <button class="ql-indent" value="-1"> </button>
                                                  <button class="ql-indent" value="+1"></button></span><span class="ql-formats">
                                                  <button class="ql-link"></button>
                                                  <button class="ql-image"></button>
                                                  <button class="ql-video"></button></span></div>
                                              <div id="editor04"></div>
                                            </div>

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

                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-heading5">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse5" aria-expanded="false" aria-controls="panelsStayOpen-collapse5">
                                            
                                            Know before you go<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapse5" aria-labelledby="panelsStayOpen-heading5">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
                                              <div id="toolbar05"><span class="ql-formats">
                                                  <select class="ql-size"></select></span><span class="ql-formats">
                                                  <button class="ql-bold">Bold </button>
                                                  <button class="ql-italic">Italic </button>
                                                  <button class="ql-underline">underline</button>
                                                  <button class="ql-strike">Strike </button></span><span class="ql-formats">
                                                  <button class="ql-list" value="ordered">List </button>
                                                  <button class="ql-list" value="bullet"> </button>
                                                  <button class="ql-indent" value="-1"> </button>
                                                  <button class="ql-indent" value="+1"></button></span><span class="ql-formats">
                                                  <button class="ql-link"></button>
                                                  <button class="ql-image"></button>
                                                  <button class="ql-video"></button></span></div>
                                              <div id="editor05"></div>
                                            </div>

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

                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-heading6">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse6" aria-expanded="false" aria-controls="panelsStayOpen-collapse6">
                                            
                                            Additional Information<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapse6" aria-labelledby="panelsStayOpen-heading6">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
                                              <div id="toolbar06"><span class="ql-formats">
                                                  <select class="ql-size"></select></span><span class="ql-formats">
                                                  <button class="ql-bold">Bold </button>
                                                  <button class="ql-italic">Italic </button>
                                                  <button class="ql-underline">underline</button>
                                                  <button class="ql-strike">Strike </button></span><span class="ql-formats">
                                                  <button class="ql-list" value="ordered">List </button>
                                                  <button class="ql-list" value="bullet"> </button>
                                                  <button class="ql-indent" value="-1"> </button>
                                                  <button class="ql-indent" value="+1"></button></span><span class="ql-formats">
                                                  <button class="ql-link"></button>
                                                  <button class="ql-image"></button>
                                                  <button class="ql-video"></button></span></div>
                                              <div id="editor06"></div>
                                            </div>

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

                                      <div class="accordion-item">
                                        <h2 class="accordion-header" id="panelsStayOpen-heading7">
                                          <button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapse7" aria-expanded="false" aria-controls="panelsStayOpen-collapse7">                                            
                                            Cancellation Policy<i class="svg-color" data-feather="chevron-down"></i></button>
                                        </h2>
                                        <div class="accordion-collapse collapse" id="panelsStayOpen-collapse7" aria-labelledby="panelsStayOpen-heading7">
                                          <div class="accordion-body">
                                       
                                            <div class="toolbar-box">
                                              <div id="toolbar07"><span class="ql-formats">
                                                  <select class="ql-size"></select></span><span class="ql-formats">
                                                  <button class="ql-bold">Bold </button>
                                                  <button class="ql-italic">Italic </button>
                                                  <button class="ql-underline">underline</button>
                                                  <button class="ql-strike">Strike </button></span><span class="ql-formats">
                                                  <button class="ql-list" value="ordered">List </button>
                                                  <button class="ql-list" value="bullet"> </button>
                                                  <button class="ql-indent" value="-1"> </button>
                                                  <button class="ql-indent" value="+1"></button></span><span class="ql-formats">
                                                  <button class="ql-link"></button>
                                                  <button class="ql-image"></button>
                                                  <button class="ql-video"></button></span></div>
                                              <div id="editor07"></div>
                                            </div>

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

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

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

          <!-- Container-fluid starts-->
          <div class="container-fluid"> 
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                       
                      <div class="card-body">
                        <div class="table-responsive custom-scrollbar">
                          <table class="display" id="basic-1">
                            <thead>
                              <tr>
                                <th>Activity Name</th>
                                <th> 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>Active Dates </th>
                                <th>Status </th>
                                <th>Action </th>
                              </tr>
                            </thead>
                            <tbody>
                              @forelse($activities as $activity)
                              <tr>
                                <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>{{ $activity->date ? \Carbon\Carbon::parse($activity->date)->format('Y-m-d') : 'N/A' }}</td>
                                <td>
                                  @switch($activity->status)
                                    @case('pending')
                                      <span class="badge rounded-pill badge-warning">Pending</span>
                                      @break
                                    @case('approved')
                                      <span class="badge rounded-pill badge-success">Approved</span>
                                      @break
                                    @case('rejected')
                                      <span class="badge rounded-pill badge-danger">Rejected</span>
                                      @break
                                    @default
                                      <span class="badge rounded-pill badge-secondary">{{ ucfirst($activity->status) }}</span>
                                  @endswitch
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                      <button type="button" class="btn btn-sm btn-info" onclick="viewActivity({{ $activity->id }})" title="View">
                                        <i class="fa fa-eye"></i>
                                      </button>
                                        <button type="button" class="btn btn-sm btn-warning" onclick="editActivity({{ $activity->id }})" title="Edit">
                                          <i class="fa fa-pencil"></i>
                                        </button>
                                      @if($activity->status !== 'approved')
                                        <button type="button" class="btn btn-sm btn-success" onclick="updateActivityStatus({{ $activity->id }}, 'approved')" title="Approve">
                                          <i class="fa fa-check"></i>
                                        </button>
                                      @endif
                                      @if($activity->status !== 'suspended')
                                        <button type="button" class="btn btn-sm btn-warning" onclick="suspendActivityStatus({{ $activity->id }}, 'suspended')" title="Suspend">
                                          <i class="fa fa-ban"></i>
                                        </button>
                                      @endif
                                      <button type="button" class="btn btn-sm btn-danger" onclick="deleteActivity({{ $activity->id }})" title="Delete">
                                        <i class="fa fa-trash"></i>
                                      </button>
                                    </div>
                              </td>
                              </tr>
                              @empty
                              <tr>
                                <td colspan="11" 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')

<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'
        }
    })
    .then(response => 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 => {
        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 = [];

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


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


// Submit Activity Form Function
let isSubmitting = false;

function submitActivityHostForm() {
    const form = document.getElementById('activityHostForm');
    const submitBtn = document.getElementById('submitBtn04');
    
    if (!form) {
        alert('Form not found!');
        return;
    }
    
    // Prevent multiple submissions
    if (isSubmitting) {
        return;
    }
    
    isSubmitting = true;
    
    // Get form data
    const formData = new FormData(form);
    
    // Add Quill editor content to form data
    Object.keys(quillEditors).forEach(editorId => {
        const editor = quillEditors[editorId];
        const content = editor.root.innerHTML;
        console.log(`Editor ${editorId} content:`, content);
        formData.append(editorId, content);
    });
    
    // Debug: Log all form data
    console.log('Form data being sent:');
    for (let [key, value] of formData.entries()) {
        console.log(key, value);
    }
    
    // Check for empty values that might cause validation errors
    const emptyFields = [];
    for (let [key, value] of formData.entries()) {
        if (value === '' || value === null || value === undefined) {
            emptyFields.push(key);
        }
    }
    if (emptyFields.length > 0) {
        console.warn('Empty fields found:', emptyFields);
    }
    
    
    // Disable submit button
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Processing...';
    }
        // 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);
        
        if (!response.ok) {
            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 => {
                    errorMessage += `• ${field}: ${data.errors[field][0]}\n`;
                });
                alert(errorMessage);
            } else {
                alert('Error: ' + (data.message || 'Unknown error occurred'));
            }
        }
    })
    .catch(error => {
        alert('Network error: ' + error.message);
    })
    .finally(() => {
        isSubmitting = false;
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'Submit';
        }
    });
}


// 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>