@extends('layouts.app')


    @section('styles')
    <style>
 .custom-btn-info {
    background: #1170e4;
    border-color: #3988e8;
    color: #fff;
}
.custom-btn-success {
    background: #13bfa6!important;
    border-color: #35b9a6;
    color: #fff;
}
.custom-btn-danger {
    background: #e82646!important;
    border-color: #e62a45;
    color: #fff;
}



div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}


body
{
   font-family: Arial;
   text:#212121;
}
#gallery{
    width:1057px;
    margin: 0 auto;
}
#image-list { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
}
#image-list li { 
    margin: 10px 20px 10px 0px; 
    display: inline-block;
}
#image-list li img{
    width: 250px;
    height: 155px;
}

#image-container{
    margin-bottom: 14px;
}

#txtresponse 
{
    padding: 10px 20px;
    border-radius: 3px;
    margin-bottom: 10px;
    width: 100%;
    display: none;
    border :#E0E0E0 1px solid;
    color:#212121;
   
}
 
.btn-submit {
    padding: 10px 30px;
    background: #333;
    border: #E0E0E0 1px solid;
    color: #FFF;
    font-size: 0.9em;
    width: 100px;
       
    border-radius: 0px;
    cursor:pointer;
    position: absolute;
}
 

        </style>
    @endsection

        @section('content')

                        <!-- PAGE-HEADER -->
                        <div class="page-header">
                            <h1 class="page-title">Gallery </h1>
                            <div>
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Gallery </li>
                                </ol>
                            </div>
                        </div>
                      


                        <div class="modal fade" id="addEmployeeModal" tabindex="-1" aria-labelledby="exampleModalLabel"
  data-bs-backdrop="static" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Gallery</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
      </div>
      <form action="#" method="POST" id="add_gallery_form" enctype="multipart/form-data">
        @csrf
        <div class="modal-body p-4 bg-light">
          <div class="row">
        
            <div class="my-2">
              <label for="fname">Category *</label>
              <select data-parsley-required-message="Category Name Required" class="form-control"  name="category_id" id="category_id" required>
                                                            <option value="">--  Choose Category  --</option>
                                                            @foreach ($data['category'] as $category)
                                                                  <option value="{{$category->id}}">{{$category->category_name}}</option>
                                                            @endforeach
                                                            </select>
                                                              
            </div>


            <div class="my-2">
              <label for="fname">Title *</label>
              <input type="text" name="title" class="form-control" placeholder="Title" required>
            </div>
            <!-- <div class="col-lg">
              <label for="lname">Order</label>
              <input type="number" name="order" id="sort_order" class="form-control" placeholder="Enter the number" required>
              <div id="sort_error">
                                           </div>
            </div> -->
            
          </div>
          
          <div class="row">
          <div class="my-2">
            <label for="email">Gallery  Image  *</label>
            <input type="file" name="gallery_image" class="form-control" required>
          </div>
        
          <!-- <div class="my-2">
            <label for="email">Gallery Multiple Image  *</label>
            <input type="file" name="gallery_multiple[]" class="form-control" multiple required>
          </div> -->
          </div>
         
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" id="add_gallery_btn" class="btn btn-primary submit">Add Gallery</button>
        </div>
      </form>
    </div>
  </div>
</div>











                        <div class="modal fade" id="Change_image_Modal" tabindex="-1" aria-labelledby="exampleModalLabel"
  data-bs-backdrop="static" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Change order of images</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
      </div>

      <form action="#" method="POST"  enctype="multipart/form-data">
        @csrf
        <div class="modal-body p-4 bg-light">
         
        <ul id="image-list" class="image-list" >
        @foreach ($data['show'] as $shows)
        <li id="image_' . {{$shows->id}} . '" >
        <img src="{{url('uploads/images/'.$shows->gallery_image)}}" style="height: 170px; width:170px;">
        </li>
        @endforeach
        </ul>
         
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" id="submit" class="btn btn-primary">Update</button>
        </div>
</form>
    </div>
  </div>
</div>




<div class="modal fade" id="editGalleryModal" tabindex="-1" aria-labelledby="exampleModalLabel"
  data-bs-backdrop="static" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit Gallery</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
      </div>
      <form action="#" method="POST" id="edit_gallery_form" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="gal_id" id="gal_id">
        <input type="hidden" name="gal_image" id="gal_image">
        <div class="modal-body p-4 bg-light">
          <div class="row">

          <div class="my-2">
              <label for="fname">Category *</label>
              <select data-parsley-required-message="Category Name Required" class="form-control category_id"  name="category_id" id="category_id" required>
                                                            <option value="">--  Choose Category  --</option>
                                                            @foreach ($data['category'] as $category)
                                                                  <option value="{{$category->id}}">{{$category->category_name}}</option>
                                                            @endforeach
                                                            </select>
                                                              
            </div>


            <div class="my-2">
              <label for="fname">Title *</label>
              <input type="text" name="title" class="form-control edit_title" id="title" placeholder="Title" required>
            </div>

          
           
          </div>
         

          <div class="row">
          <div class="my-2">
            <label for="email">Gallery  Image  *</label>
            <input type="file" name="gallery_image" class="form-control" >
          </div>
        
          <div class="mt-2" id="avatar">    

          </div>
          <!-- <div class="my-2">
            <label for="email">Gallery Multiple Image  *</label>
            <input type="file" name="gallery_multiple[]" class="form-control" multiple >
          </div> -->
          </div>
         
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" id="edit_gallery_btn" class="btn btn-success">Update Gallery</button>
        </div>
      </form>
    </div>
  </div>
</div>


<div class="row">
                            <div class="col-12 col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title mb-0">View Gallery</h3>
                                    </div>
                                    <div class="card-body pt-4">
                                        <div class="grid-margin">
                                            <div class="">
                                                <div class="panel panel-primary">
                                                    <div class="tab-menu-heading border-0 p-0">
                                                        <div class="tabs-menu1">
                                                            
                                                            
                                         <ul style="left: 15%;margin-top: 5px;" class=" nav panel-tabs product-sale">
                                          <li style="border: none;" class="px-1">
                                            
                                                  
                                                </li>
                                                               </ul>
                                                            
                                                 

                                                   
                                                    <div class="panel-body tabs-menu-body border-0 pt-0">
                                                    <div class="btn-list" style="float: right;">
                                                    <!-- <button style="background: #dcf0c8;" type="button" data-bs-toggle="modal" data-bs-target="#addEmployeeModal" class="btn btn-sm btn-pill ">Add New Gallery</button> -->
                                                    <button id="table2-new-row-button" data-bs-toggle="modal" data-bs-target="#addEmployeeModal" class="btn btn-primary mb-4"> Add New Gallery</button>
                                                    <!-- <button id="table2-new-row-button" data-bs-toggle="modal" data-bs-target="#Change_image_Modal" class="btn btn-primary mb-4">Change Order of Images</button> -->

                                                  </div>
                                                        <div class="tab-content">
                                                            <div class="tab-pane active" id="tab5">
                                                                <div class="table-responsive">

                                                                <div class="card-body" id="show_all_gallery">
            <h1 class="text-center text-secondary my-5">Loading...</h1>
          </div>


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


        @endsection

    @section('scripts')
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
  <!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.bundle.min.js'></script> -->
  <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.10.25/datatables.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>



<link rel="stylesheet" href="vendor/jquery/jquery-ui/jquery-ui.css">
<script src="vendor/jquery/jquery-ui/jquery-ui.js" type="text/javascript"></script>

  <script>
    $(document).ready(function () {
        var dropIndex;
        $("#image-list").sortable({
            	update: function(event, ui) { 
            		dropIndex = ui.item.index();
            }
        });

        $('#submit').click(function (e) {
        


            var h = [];
                $("ul.image-list li").each(function() {
                    h.push($(this).attr('id').substr(9));
                });
                
       
            $.ajax({
                url: '{{URL::to('update_image_order')}}',
                type: 'post',
                data: {
                  "_token": "{{ csrf_token() }}",
                  imageIds: h
                },
                success: function (response) {
                  $("#Change_image_Modal").modal('hide');
                  if (response.status == 200) {
                     Swal.fire(
                    'Updated!',
                    'Images order is updated!',
                    'success'
                    ).then(function(){
                    location.reload();
                    });
                    fetchAllgallery();
            
                       }
               
                }
            });
            e.preventDefault();
        });
    });

</script>





  <script>
    $(function() {
   $('#sort_order').on('keyup',function(){
       var value =$(this).val();
   
       $.ajax({
       type : 'get',
       url : '{{URL::to('search_order')}}',
       data:{'order_number': value},
       success:function(data){
        if(data == 'false')
        {
            $("#sort_error").show().html('<strong style="color: red;"> This number is already exist.</strong>');
        }
        else{
            $("#sort_error").show().html('');
        }
       
        }
       });
        });


        $('.search_sort_num').on('keyup',function(){
       var value =$(this).val();
   
       $.ajax({
       type : 'get',
       url : '{{URL::to('search_order')}}',
       data:{'order_number': value},
       success:function(data){
        if(data == 'false')
        {
            $("#sort_error_edit").show().html('<strong style="color: red;"> This number is already exist.</strong>');
        }
        else{
            $("#sort_error_edit").show().html('');
        }
       
        }
       });
        });
        



      // add new employee ajax request
      $("#add_gallery_form").submit(function(e) {
        e.preventDefault();
        const fd = new FormData(this);
        $("#add_gallery_btn").text('Adding...');
        $.ajax({
          url: '{{ route('gallery_store') }}',
          method: 'post',
          data: fd,
          cache: false,
          contentType: false,
          processData: false,
          dataType: 'json',
          success: function(response) {
            if (response.status == 200) {
              Swal.fire(
                'Added!',
                'Gallery Added Successfully!',
                'success'
              ).then(function(){
    location.reload();
});
fetchAllgallery();
          
            }
            
            else if(response.status == 203)
            {
              Swal.fire(
                'Oops...!',
                'The image size must not exceed 1 MB.!',
                'error'
              ).then(function(){
              location.reload();
              });
              fetchAllgallery();
            }
            else if(response.status == 202)
            {
              Swal.fire(
                'Oops...!',
                'Please check image height and width!',
                'error'
              ).then(function(){
              location.reload();
              });
              fetchAllgallery();
            }
            else if(response.status == 201){
                Swal.fire(
                'Oops...!',
                'Sort number is already exists!',
                'error'
              ).then(function(){
    location.reload();
});
fetchAllgallery();

            }
            $("#add_gallery_btn").text('Add Gallery');
            $("#add_gallery_form")[0].reset();
            $("#addEmployeeModal").modal('hide');
          }
        });
      });

      // edit employee ajax request
      $(document).on('click', '.editIcon', function(e) {
        e.preventDefault();
        let id = $(this).attr('id');
        $.ajax({
          url: '{{ route('gallery_edit') }}',
          method: 'get',
          data: {
            id: id,
            _token: '{{ csrf_token() }}'
          },
          success: function(response) {
            $("#gal_id").val(response.gal_id);
            $(".edit_title").val(response.title);
            $(".category_id").val(response.category_id);
            $(".order").val(response.order_number);
           
        
            $("#avatar").html(
              `<img src="{!! asset('uploads/main_events_images/${response.gallery_image}') !!}" width="100" class="img-fluid img-thumbnail">`);
         
            $("#gal_image").val(response.gallery_image);
          }
        });
      });

      // update employee ajax request
      $("#edit_gallery_form").submit(function(e) {
        e.preventDefault();
        const fd = new FormData(this);
        $("#edit_gallery_btn").text('Updating...');
        $.ajax({
          url: '{{ route('update') }}',
          method: 'post',
          data: fd,
          cache: false,
          contentType: false,
          processData: false,
          dataType: 'json',
          success: function(response) {
            if (response.status == 200) {
              Swal.fire(
                'Updated!',
                'Gallery Updated Successfully!',
                'success'
              ).then(function(){
          location.reload();
              });
              fetchAllgallery();
            }
            else if(response.status == 202)
            {
              Swal.fire(
                'Oops...!',
                'Please check image height and width!',
                'error'
              ).then(function(){
          location.reload();
              });
              fetchAllgallery();
            }
            else if(response.status == 201){
       
                Swal.fire(
                'Oops...!',
                'Sort number is already exists!',
                'error'
                 ).then(function(){
            location.reload();
});
fetchAllgallery();

            }
            $("#edit_gallery_btn").text('Update Gallery');
            $("#edit_gallery_form")[0].reset();
            $("#editGalleryModal").modal('hide');
          }
        });
      });

      // delete employee ajax request
      $(document).on('click', '.deleteIcon', function(e) {
        e.preventDefault();
        let id = $(this).attr('id');
        let csrf = '{{ csrf_token() }}';
        Swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
          if (result.isConfirmed) {
            $.ajax({
              url: '{{ route('gallery_delete') }}',
              method: 'delete',
              data: {
                id: id,
                _token: csrf
              },
              success: function(response) {
                console.log(response);
                Swal.fire(
                  'Deleted!',
                  'Your file has been deleted.',
                  'success'
                ).then(function(){
                location.reload();
                });
                fetchAllgallery();
              }
            });
          }
        })
      });

      // fetch all employees ajax request
      fetchAllgallery();

      function fetchAllgallery() {
        $.ajax({
          url: '{{ route('fetchall_gal') }}',
          method: 'get',
          success: function(response) {
            $("#show_all_gallery").html(response);
            $("table").DataTable({
              searching: false,
              "columnDefs": [
            { "orderable": false, "targets": [1,3],
            
            } // Remove sorting for the second column (index 1)
        ]
            
            });
          }
        });
      }
    });
  </script>
    @endsection