@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">Event Category</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">Event Category </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 </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>
          
          <div class="my-2">
            <label for="email"> Category Name </label>
            <input type="text" name="event_category" class="form-control" required>
          </div>

          <!-- <div class="my-2">
            <label for="email">Gallery Video  (1446px X 1938px)</label>
            <input type="file" name="gallery_video" class="form-control" required>
          </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 </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 ($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">Update Event Category</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="col-lg">
              <label for="fname">Title</label>
              <input type="text" name="title" id="title" class="form-control" placeholder="Title" required>
            </div> -->
            <div class="col-lg">
          
              <input type="hidden" name="order" id="sort_order" class="form-control order search_sort_num" placeholder="Order" required>
              <div id="sort_error_edit">
                                           </div>
            </div>
           
          </div>
          <div class="my-2">
          <label for="email">Event Category </label>
            <input type="text" name="event_category" id="event_category" class="form-control" required>
            
          </div>
         
          <div class="mt-2" id="avatar">    

          </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 </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 Event Category</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 services</button> -->
                                                    <button id="table2-new-row-button" data-bs-toggle="modal" data-bs-target="#addEmployeeModal" class="btn btn-primary mb-4"> Add New </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="panel-body tabs-menu-body border-0 pt-0">
                  
                                                        <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();
                    });
                    fetchgalleryVideo();
            
                       }
               
                }
            });
            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('category_store') }}',
          method: 'post',
          data: fd,
          cache: false,
          contentType: false,
          processData: false,
          dataType: 'json',
          success: function(response) {
            if (response.status == 200) {
              Swal.fire(
                'Added!',
                'Added Successfully!',
                'success'
              ).then(function(){
    location.reload();
});
fetchgalleryVideo();
          
            }
    
     
            $("#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_category_edit') }}',
          method: 'get',
          data: {
            id: id,
            _token: '{{ csrf_token() }}'
          },
          success: function(response) {
       
            $("#gal_id").val(response.id);
            $("#event_category").val(response.category_name);
            
  
          }
        });
      });

      // 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_category') }}',
          method: 'post',
          data: fd,
          cache: false,
          contentType: false,
          processData: false,
          dataType: 'json',
          success: function(response) {
            if (response.status == 200) {
              Swal.fire(
                'Updated!',
                'Updated Successfully!',
                'success'
              ).then(function(){
          location.reload();
              });
              fetchgalleryVideo();
            }
            else if(response.status == 202)
            {
              Swal.fire(
                'Oops...!',
                'Please check image height and width!',
                'error'
              ).then(function(){
          location.reload();
              });
              fetchgalleryVideo();
            }
            else if(response.status == 201){
       
                Swal.fire(
                'Oops...!',
                'Sort number is already exists!',
                'error'
                 ).then(function(){
            location.reload();
});
fetchgalleryVideo();

            }
            $("#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('category_delete') }}',
              method: 'delete',
              data: {
                id: id,
                _token: csrf
              },
              success: function(response) {
                console.log(response);
                Swal.fire(
                  'Deleted!',
                  'Your category has been deleted.',
                  'success'
                ).then(function(){
               location.reload();
                });
                fetchgalleryVideo();
              }
            });
          }
        })
      });

      // fetch all employees ajax request
      fetchgalleryVideo();

      function fetchgalleryVideo() {
        $.ajax({
          url: '{{ route('fetchcategory') }}',
          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