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

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

        

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

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

          <div class="modal fade" id="exampleModalCenter1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
                <div class="modal-content dark-sign-up">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="lgModalLabel">Add New Activities</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="activityForm">
                        <div class="row g-3">
                          <div class="col-md-6">


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

                                      
                                    
                                    </div>
                              </div>


                        


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

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

                                    <div class="input-group flex-nowrap mb-2">
                                      <input class="form-control " type="text" placeholder="Option 1" aria-label="Username" 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="text" placeholder="Adult Price" required="" 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="text" placeholder="Child Price" required="" 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="text" placeholder="Infant Price" required="" fdprocessedid="80d6v" name="infant_price">
                                    </div>
                                    </div>
                                


                                  </div>

                                  
                                  <div id="req_input2" class="datainputs">
                                    <div class="required_inp2">
                                      <div class="mb-3 row">
                                  
                                        <!-- Time From -->
                                        <div class="col-md-4 position-relative skdd">
                                          <label class="form-label">Time (From)</label>
                                          <input class="form-control digits" type="time" value="21:45" name="time_from">
                                        </div>
                                  
                                        <!-- Time To -->
                                        <div class="col-md-4 position-relative skdd">
                                          <label class="form-label">Time (To)</label>
                                          <input class="form-control digits" type="time" value="21:45" name="time_to">
                                        </div>
                                  
                                        <!-- Duration -->
                                        <div class="col-md-2 position-relative skdd">
                                          <label class="form-label">Duration</label>
                                          <div class="input-group mb-3">
                                            <input class="form-control" type="text" placeholder="2" name="duration" value="2">
                                          </div>
                                        </div>
                                  
                                        <!-- Add button (only first row has this) -->
                                        <div class="col-md-2 position-relative skdd">
                                          <div class="input-group mb-3 mt-4">
                                            <button type="button" id="addmore2" class="btn btn-success" name="addmore2">+</button>
                                          </div>
                                        </div>
                                  
                                      </div>
                                    </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>
                      </div>
                    </div>

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

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

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



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

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

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

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

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

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


<script>
// Initialize Quill editors
let quillEditors = {};

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);
            }
        });
    }
});

// Submit Activity Form Function
let isSubmitting = false;

function submitAdminActivityForm() {
    const form = document.getElementById('activityForm');
    const submitBtn = document.getElementById('submitBtn05');
    
    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;
        formData.append(editorId, content);
    });
    
    // Disable submit button
    if (submitBtn) {
        submitBtn.disabled = true;
        submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Processing...';
    }
    
    // Send AJAX request
    fetch('{{ route("activities.store") }}', {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: data.message || 'Activity created successfully',
                    showConfirmButton: false,
                    timer: 2000
                }).then(() => {
                    window.location.reload();
                });
            } else {
                alert(data.message || 'Activity created successfully!');
                window.location.reload();
            }
        } else {
            if (data.errors) {
                let errorMessage = 'Validation errors:\n';
                Object.keys(data.errors).forEach(field => {
                    errorMessage += `• ${data.errors[field][0]}\n`;
                });
                alert(errorMessage);
            } else {
                alert('Error: ' + (data.message || 'Unknown error occurred'));
            }
        }
    })
    .catch(error => {
        alert('Network error: ' + error.message);
    })
    .finally(() => {
        isSubmitting = false;
        if (submitBtn) {
            submitBtn.disabled = false;
            submitBtn.innerHTML = 'Submit';
        }
    });
}

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


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

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

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

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

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

</script>

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