@extends('fronted.layout.main')
@section('adcontent')

<style>
    .hidden {
        display: none;
    }

.uploadshead
{
   box-shadow: 0px 0px 0px 3px grey;
   color: #fff;
   background:var(--light-main-color);
}
.uploadshead label
{
 font-weight:bold;
}

     .menuadd li
    {
      
      list-style-type:none ;
    }
 
   
    #gallery {
  /* padding-top: 40px; */
  width:200px;
}

@media screen and (min-width: 991px) {
  #gallery {
    /* padding: 60px 30px 0 30px; */
    padding:0px;
  }
}

.img-wrapper {
  position: relative;
  margin-top: 15px;
}

.img-wrapper img {
  width: 100%;
}

.img-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.img-overlay  .img-overlay i {
  color: #fff;
  font-size: 12px;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#overlay img {
  margin: 0;
  width: 80%;
  height: auto;
  object-fit: contain;
  padding: 5%;
}

@media screen and (min-width: 768px) {
  #overlay img {
    width: 60%;
  }

  #nextButton,
  #prevButton {
    font-size: 3em;
  }
}

@media screen and (min-width: 1200px) {
  #overlay img {
    width: 50%;
  }
}


</style>
    @if ($message = Session::get('recordssuccess'))
      <script>
         Swal.fire({
            icon: 'success',
            // title: 'Image Saved Successfully',
            text: 'Terms and Conditions Saved Successfully',
         })
      </script>
      @endif
      @if ($message = Session::get('danger'))
      <script>
         Swal.fire({
            icon: 'warning',
            // title: 'Image Deleted Successfully', 
            text: 'Image Deleted  Successfully',
         })
      </script>
      @endif
      @if ($message = Session::get('image'))
      <script>
         Swal.fire({
            icon: 'success',
            // title: 'Image Saved Successfully',
            text: 'Image Saved Successfully',
         })
      </script>
      @endif
      @if ($message = Session::get('termsconditions'))
      <script>
         Swal.fire({
            icon: 'warning',
            // title: 'Image Saved Successfully',
            text: 'Only 5 terms $ Conditions Acceptable ',
         })
      </script>
      @endif

      @if ($message = Session::get('terms'))
      <script>
         Swal.fire({
            icon: 'warning',
            // title: 'Image Saved Successfully',
            text: 'Terms $ conditions Deleted Successfully ',
         })
      </script> 
      @endif
      @if ($message = Session::get('termssuccess'))
      <script>
         Swal.fire({
            icon: 'success',
            // title: 'Image Saved Successfully',
            text: 'Terms $ conditions Uploaded Successfully ',
         })
      </script>
      @endif
<div class="container-fluid mt-3  me-0 ms-0"> 
        <div class="responsive dataTable">
            <table id="roomSeatTable" class="table text-center">
               <!-- <thead class="align-middle">
                  <tr class="">
                     <th colspan="2" style="font-size: 1rem; padding:4px 0; color: #fff;background: #212529;">
                       Uploads
                     </th>
                  </tr>
               </thead> -->
               <tbody class="align-middle">
                  <tr>
                    <td> 
                      <select class="form-control"  id="uploadSelect"><i class='fas fa-angle-down'></i>
                            <option  disabled selected>Choose Option</option>
                            <option value="#Amenities">Amenities Upload</option>
                            <option >Gallery Upload</option>
                            <option data-bs-toggle="modal" data-bs-target="#termsandconditions" type="button">Invoice T&C Upload</option>
                             <option data-bs-toggle="modal" data-bs-target="#uploadModals">Document Upload</opption>
                      </select>
                   </td>  
                  </tr>   
               </tbody>
            </table>
         </div>
     <div class="container-fluid mt-1 me-0 ms-0 bg-white"> 
             <div class="row mt-3"> 
                <center> <span class="addmenuitem mt-3">Upload Image</span>  </center> 
                     <div class="col-md-12 addmenuscro">
                       
                        <div class="table-responsive dataTable mt-3" >
                           <table  class=" table table-bordered display nowrap text-center  roomSeatTable table-striped">
                              <thead class="align-middle  text-nowrap" style="position: sticky; top: 0;">
                                 
                                 <th>Date</th>
                                 <th>Select Type </th>
                                 <th>Select Type 2</th>
                                 <th>Upload</th>
                                 <th>Action</th>
                                 
                              </thead>
                           
                              <tbody class="align-middle" id="expenses">
                              <form action="{{route('gallerysave')}}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <tr>
                                      <td><input type="date" name="gallerydate" class="form-control" required></td>
                                       <td>
                                           <select class="form-control-sm" name="gallerytype" onchange="room(this.value)"  required>
                                              <option disabled selected> --Select --</option>
                                              <option value="room" >Room </option>
                                              <option value="Interior">Interior </option>
                                              <option value="Interior">Exterior</option>
                                              <option value="Plan">Plan Map</option>
                                           </select>
                                       </td>
                                       <td>
                                           <select class="form-control-sm" name="roomnogallery" required id="roomseatnumber">
                                              <option disabled selected>Room No</option>
                                              <!-- <option value="room">Room </option>
                                              <option value="Interior">Interior </option>
                                              <option value="Interior">Exterior</option> -->
                                           </select>
                                       </td>
                                       <td>
                                          <input type="file"  name="imageupload[]" multiple class="form-control-sm" style="border-radius: inherit;" required >
                                       </td>
                                       <td><button class="btn btn-success btn-sm m-auto" type="submit">Submit</button></td>
                                    </tr>
                                    </form>
                              </tbody>
                           </table>
                       </div>
                    </div>  
                 
                       <div class="table-responsive dataTable  mt-3" >   
                          <table id="menutable " class=" table table-bordered display nowrap text-center  roomSeatTable" >
                              <thead class="align-middle ">
                                 <th>S.No.</th>
                                 <th> Date</th>
                                 <th>Type</th>
                                 <th>Type 2</th>
                                 <th>Image view</th>
                                 <th>Images</th>
                                 <th>Action</th>
                              </thead>
                              <tbody >
                                   @php
                                     $count =1;
                                     $gallery = DB::table('galleries')->get();
                                   @endphp
                                   @foreach( $gallery as $temp)
                                 <tr>
                                    <td>{{$count++}}</td>
                                    <td>{{$temp->gallerydate}}</td>
                                     <td>{{$temp->gallerytype}}</td>
                                    <td>{{$temp->roomnogallery}}</td>                            
                                    <td>       
                                    <!-- <div class="carousel">
                    <ul class="slides">
                        @php
                            $imagePaths = explode(',', $temp->imageupload);
                            $numSlides = count($imagePaths);
                        @endphp
                        @foreach ($imagePaths as $index => $imagePath)
                            <input type="radio" name="radio-buttons-{{ $count }}" id="img-{{ $count }}-{{ $index }}" {{ $index === 0 ? 'checked' : '' }} />
                            <li class="slide-container">
                                <div class="slide-image">
                                   
                                    @if (!empty($imagePath))
                                        <img src="{{ asset('assets/uploads/'.$imagePath) }}">
                                        @else
                                          <div class="placeholder-image"></div>
                                        @endif
                                </div>
                                <div class="carousel-controls">
                                    <label for="img-{{ $count }}-{{ $index === 0 ? $numSlides - 1 : $index - 1 }}" class="prev-slide">
                                        <span style="color: #000;">&lsaquo;</span>
                                    </label>
                                    <label for="img-{{ $count }}-{{ $index === $numSlides - 1 ? 0 : $index + 1 }}" class="next-slide">
                                        <span style="color: #000;">&rsaquo;</span>
                                    </label>
                                </div>
                            </li>
                        @endforeach
                        @php
                           $currentSlide = 0; 
                           $imagePaths = explode(',', $temp->imageupload);
                           $numSlides = count($imagePaths);
                        @endphp
                        @if (!empty($imagePath))
                        @if ($numSlides > 0)
                           
                           @else
                              <div class="placeholder-image"></div>
                        @endif
                        @endif

                                       </ul>
                                    </div> -->
                                   <section id="gallery">
  <div class="container">
    <div id="image-gallery">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 image">
            <div class="img-wrapper">
              <a href="{{ asset('assets/uploads/'.$imagePath) }}">
                <img src="{{ asset('assets/uploads/'.$imagePath) }}" class="img-responsive">
              </a>
              <div class="img-overlay">
                <i class="fa fa-plus-circle" aria-hidden="true"></i>
              </div>
            </div>
          </div>
          </div><!-- End image gallery -->
  </div><!-- End container --> 
</section>



                                    </td>     
                                    <td>
                                    @php
                                       $imagePaths = explode(',', $temp->imageupload);
                                    @endphp
                                    @if (!empty($imagePath))
                                    <form action="{{ route('gallerydeleteselected') }}" method="POST"  enctype="multipart/form-data">
                                       @csrf
                                       @method('DELETE')
                                       @foreach ($imagePaths as $imageIndex => $imagePath)
                                          @if (!empty($imagePath))
                                                <ul class="menuadd">
                                                   <li>
                                                      <input type="checkbox" name="imageupload[]" value="{{ $imageIndex }}" style="width: 15px;">
                                                      <img src="{{ asset('assets/uploads/'.$imagePath) }}" style="width:110px;height:20px;">
                                                   </li>
                                                </ul>
                                                <input type="hidden" name="image_paths[]" value="{{ $imagePath }}">
                                          @endif
                                       @endforeach
                                       <button type="submit" class="btn btn-xs btn-flat show_confirm" data-toggle="tooltip" title='Delete'>
                                          <i class="fa fa-trash fa-lg text-danger"></i>
                                       </button>
                                    </form>
                                    @else
                                    <div class="placeholder-image"></div>
                                    @endif
                                    </td>
                                    <td> 
                                       <ul class="m-0 p-0 menuadd ">
                                         
                                          <li class="">
                                          <form action="{{ route('gallerydelete', $temp->id) }}" method="POST">
                                               @csrf 
                                                <input type="hidden" value="DELETE">
                                               <button type="submit" class="btn btn-xs  btn-flat show_confirm" data-toggle="tooltip" title='Delete'><i class="fa fa-trash fa-lg text-danger"></i></button>
                                             </form>
                                          </li>
                                          
                                       </ul> 
                                    </td>
                                 </tr>
                                @endforeach 
                              </tbody>
                          </table>     
                        </div>
                      
                  </div> 
            </div>  
          </div> 
         
               <div id="Amenities" class=" content-section hidden">
                  Amenities Upload content
               </div>
      <div class="modal fade" id="termsandconditions" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              
         <div class="modal-content">
               <div class="modal-header">
                  <h4 class="modal-title" id="exampleModalLabel">Terms and Conditions</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
                <div class="modal-body">
                      <div class="table-responsive dataTable" >
                           <table  class=" table table-bordered display nowrap text-center  roomSeatTable table-striped">
                           @php
                              $number = DB::table('termsandconditions')->orderByDesc('id')->first();
                           @endphp
                              <thead class="align-middle  text-nowrap" style="position: sticky; top: 0;">
                                 <th>S.No</th>
                                  <th>Insert Text</th> 
                                  <th>Action</th>                                
                              </thead>
                             <form   action="{{route('termsandconditions')}}" method="POST"> 
                               
                                @csrf
                                 <tbody class="align-middle+">
                                    <tr>
                                    <td>{{$number?$number->id+1:1}}</td>
                                    <td><input type="text" name="termsandconditions" class="form-control" style="padding: 22px" required></td>
                                    <td><button class="btn btn-success" type="submit" >Submit</button></td>
                                    </tr>
                                 </tbody>
                              </form>
                          </table>    
                       </div>
                       <div class="table-responsive dataTable" >
                           <table  class=" table table-bordered display nowrap text-center  roomSeatTable table-striped">
                               <thead class="align-middle">
                                  <tr>
                                     <th>S.No</th>
                                     <th>Terms & Conditions</th>
                                     <th>Action</th>
                                  </tr>
                               </thead>
                                 @php
                                    $count =1;
                                    $terms = DB::table('termsandconditions')->get();
                                 @endphp
                               <tbody class="align-middle">
                                      @foreach($terms as $temp)
                                    <tr>
                                       <td>{{$count++}}</td>
                                       <td>{{$temp->termsandconditions}}</td>
                                       <td>
                                          <form action="{{ route('termsandconditionsdelete', $temp->id) }}" method="POST">
                                               @csrf 
                                                <input type="hidden" value="DELETE">
                                               <button type="submit" class="btn btn-xs  btn-flat show_confirm" data-toggle="tooltip" title='Delete'><i class="fa fa-trash fa-lg text-danger"></i></button>
                                          </form>
                                          
                                       </td>
                                    </tr>
                                     @endforeach
                               </tbody>
                           </table>   
                       </div>
                </div>
         </div>
      </div>           
   </div>
   <script>
       function room(value){
           if(value === "room"){
            $.ajax({
               url:'allroomdetails',
               type:'get',
               success:function (response) {
                  console.log(response);
                  var availableSeats = response;
               for (var i =0; i < availableSeats.length;i++) {
                   var seatNumber = availableSeats[i];
                   var option = document.createElement("option");
                   option.value = seatNumber;
                   option.text = seatNumber; 
                   roomseatnumber.appendChild(option);
               }
               },
               error:function(response){
                  console.log("error");
               }
            })
           }
       }
   </script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<script type="text/javascript">
   $('.show_confirm').click(function(event) {
      var form = $(this).closest("form");
      var name = $(this).data("name");
      event.preventDefault();
      swal({
            title: `Are you sure you want to  delete?`,
            text: "If you delete this, it will be gone forever.",
            icon: "warning",
            buttons: true,
            dangerMode: true,
         })
         .then((willDelete) => {
            if (willDelete) {
               form.submit();
            }
         });
   });
</script>
 

     <script>

     $(document).ready(function() {
    // Listen for changes in the select dropdown
    $('.form-control').change(function() {
      var selectedOption = $(this).find(':selected');

      // Check if the selected option has a modal trigger
      if (selectedOption.data('bs-toggle') === 'modal') {
        var modalTarget = selectedOption.data('bs-target');

        // Open the modal programmatically
        $(modalTarget).modal('show');
      }
    });
  });
</script>
<script>
    // Add event listener to the select element
    document.getElementById('uploadSelect').addEventListener('change', function() {
        // Get the selected option's value
        var selectedOption = this.value;
        
        // Show the selected content section and hide others
        var contentSections = document.querySelectorAll('.content-section');
        contentSections.forEach(function(section) {
            if (section.id === selectedOption.substring(1)) {
                section.classList.remove('hidden');
            } else {
                section.classList.add('hidden');
            }
        });
    });
</script> 
<script>
            // Gallery image hover
         $( ".img-wrapper" ).hover(
         function() {
            $(this).find(".img-overlay").animate({opacity: 1}, 600);
         }, function() {
            $(this).find(".img-overlay").animate({opacity: 0}, 600);
         }
         );

         // Lightbox
         var $overlay = $('<div id="overlay"></div>');
         var $image = $("<img>");
         var $prevButton = $('<div id="prevButton"><i class="fa fa-chevron-left"></i></div>');
         var $nextButton = $('<div id="nextButton"><i class="fa fa-chevron-right"></i></div>');
         var $exitButton = $('<div id="exitButton"><i class="fa fa-times"></i></div>');

         // Add overlay
         $overlay.append($image).prepend($prevButton).append($nextButton).append($exitButton);
         $("#gallery").append($overlay);

         // Hide overlay on default
         $overlay.hide();

         // When an image is clicked
         $(".img-overlay").click(function(event) {
         // Prevents default behavior
         event.preventDefault();
         // Adds href attribute to variable
         var imageLocation = $(this).prev().attr("href");
         // Add the image src to $image
         $image.attr("src", imageLocation);
         // Fade in the overlay
         $overlay.fadeIn("slow");
         });

         // When the overlay is clicked
         $overlay.click(function() {
         // Fade out the overlay
         $(this).fadeOut("slow");
         });

         // When next button is clicked
         $nextButton.click(function(event) {
         // Hide the current image
         $("#overlay img").hide();
         // Overlay image location
         var $currentImgSrc = $("#overlay img").attr("src");
         // Image with matching location of the overlay image
         var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
         // Finds the next image
         var $nextImg = $($currentImg.closest(".image").next().find("img"));
         // All of the images in the gallery
         var $images = $("#image-gallery img");
         // If there is a next image
         if ($nextImg.length > 0) { 
            // Fade in the next image
            $("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
         } else {
            // Otherwise fade in the first image
            $("#overlay img").attr("src", $($images[0]).attr("src")).fadeIn(800);
         }
         // Prevents overlay from being hidden
         event.stopPropagation();
         });

         // When previous button is clicked
         $prevButton.click(function(event) {
         // Hide the current image
         $("#overlay img").hide();
         // Overlay image location
         var $currentImgSrc = $("#overlay img").attr("src");
         // Image with matching location of the overlay image
         var $currentImg = $('#image-gallery img[src="' + $currentImgSrc + '"]');
         // Finds the next image
         var $nextImg = $($currentImg.closest(".image").prev().find("img"));
         // Fade in the next image
         $("#overlay img").attr("src", $nextImg.attr("src")).fadeIn(800);
         // Prevents overlay from being hidden
         event.stopPropagation();
         });

         // When the exit button is clicked
         $exitButton.click(function() {
         // Fade out the overlay
         $("#overlay").fadeOut("slow");
         });
</script>
@endsection