@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.banner {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

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

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

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


body
{
   font-family: Arial;
   text:#212121;
}
#banner{
    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">Banner </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">Banner </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 banner</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
      </div>
      <form action="#" method="POST" id="add_banner_form" enctype="multipart/form-data">
        @csrf
        <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" class="form-control" placeholder="" required>
            </div>
            

         
            
          </div>
          
          <div class="my-2">
            <label for="email"> Image  </label>
            <input type="file" name="banner_image" 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_banner_btn" class="btn btn-primary submit">Add Banner</button>
        </div>
      </form>
    </div>
  </div>
</div>











                      


<div class="modal fade" id="editbannerModal" 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 banner</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
      </div>
      <form action="#" method="POST" id="edit_banner_form" enctype="multipart/form-data">
        @csrf
        <input type="hidden" name="ser_id" id="ser_id">
        <input type="hidden" name="ser_image" id="ser_image">
        <input type="hidden" name="image_type" id="image_type">
        
        <div class="modal-body p-4 bg-light">
          <div class="row">
            <div class="col-lg">
              <label for="fname">First Title</label>
              <input type="text" name="first_title"  id="first_title" class="form-control" placeholder="Title" required>
            </div>
  
          </div>

          <div class="row">
            <div class="col-lg">
              <label for="fname">Second Title</label>
              <input type="text" name="second_title" id="second_title" class="form-control" placeholder="Title" required>
            </div>
  
          </div>
          <div class="row">
            <div class="col-lg">
              <label for="fname">Description</label>
              <textarea  class="form-control"  name="description" id="description" rows="8" cols="200">  </textarea>
            </div>
  
          </div>


          <div class="my-2">
            <label for="email"> Image </label>
            <input type="file" name="banner_image" id="banner_image" onchange="checkFileSize1(event)" class="form-control" placeholder="Image" >
                                          <br>
<span id="errorText1" style="color: red;"></span>
          </div>
          
          <br>
<img id="imagePreview" src="#" alt="Image Preview" style="display: none; max-width: 100px; max-height: 100px;">

         
          <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_banner_btn" class="btn btn-success">Update banner</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">Update </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;">
                                                  

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

                                                                <div class="card-body" id="show_all_banner">
            <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();
                    });
                    fetchAllbanner();
            
                       }
               
                }
            });
            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_banner_form").submit(function(e) {
        e.preventDefault();
        const fd = new FormData(this);
        console.log(fd);
        $("#add_banner_btn").text('Adding...');
        $.ajax({
          url: '{{ route('banner_store') }}',
          method: 'post',
          data: fd,
          cache: false,
          contentType: false,
          processData: false,
          dataType: 'json',
          success: function(response) {
            if (response.status == 200) {
              Swal.fire(
                'Added!',
                'banner Added Successfully!',
                'success'
              ).then(function(){
   location.reload();
});
fetchAllbanner();
          
            }
            
            else if(response.status == 203)
            {
              Swal.fire(
                'Oops...!',
                'The image size must not exceed 1 MB.!',
                'error'
              ).then(function(){
              location.reload();
              });
              fetchAllbanner();
            }
            else if(response.status == 202)
            {
              Swal.fire(
                'Oops...!',
                'Please check image height and width!',
                'error'
              ).then(function(){
              location.reload();
              });
              fetchAllbanner();
            }
            else if(response.status == 201){
                Swal.fire(
                'Oops...!',
                'Sort number is already exists!',
                'error'
              ).then(function(){
    location.reload();
});
fetchAllbanner();

            }
            $("#add_banner_btn").text('Add banner');
            $("#add_banner_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('banner_edit') }}',
          method: 'get',
          data: {
            id: id,
            _token: '{{ csrf_token() }}'
          },
          success: function(response) {
            $("#ser_id").val(response.id);
            $("#first_title").val(response.first_title);
            $("#ser_image").val(response.image);
            $("#second_title").val(response.second_title);
            $("#description").val(response.description);
        
           
            
            $("#avatar").html(
              `<img src="{!! asset('uploads/bannerimages/${response.image}') !!}" width="100" class="img-fluid img-thumbnail">`);
            $("#gal_id").val(response.id);
            $("#gal_image").val(response.banner_image);
          }
        });
      });

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

            }
            $("#edit_banner_btn").text('Update banner');
            $("#edit_banner_form")[0].reset();
            $("#editbannerModal").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('banner_delete') }}',
              method: 'delete',
              data: {
                id: id,
                _token: csrf
              },
              success: function(response) {
                console.log(response);
                Swal.fire(
                  'Deleted!',
                  'Your data has been deleted.',
                  'success'
                ).then(function(){
                location.reload();
                });
                fetchAllbanner();
              }
            });
          }
        })
      });

      // fetch all employees ajax request
      fetchAllbanner();

      function fetchAllbanner() {
        $.ajax({
          url: '{{ route('fetchall_banner') }}',
          method: 'get',
          success: function(response) {
            $("#show_all_banner").html(response);
            $("table").DataTable({
              searching: false,
              "columnDefs": [
            { "orderable": false, "targets": [1,3],
            
            } // Remove sorting for the second column (index 1)
        ]
            
            });
          }
        });
      }
    });
  </script>
  
   <script>
    function checkFileSize1(event) {
        const file = event.target.files[0];
        const maxFileSize = 1048576; // 1 MB in bytes
        
        const avatar = document.getElementById('avatar');
        const errorText = document.getElementById('errorText1');
        const imagePreview = document.getElementById('imagePreview');

        if (file) {
            if (file.size > maxFileSize) {
                errorText.innerText = 'File size exceeds the maximum allowed limit (1 MB).';
                imagePreview.style.display = 'none';
                event.target.value = ''; // Clear the file input
            } else {
                 avatar.style.display = 'none';
                errorText.innerText = '';
                const reader = new FileReader();
                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                    imagePreview.style.display = 'block';
                };
                reader.readAsDataURL(file);
            }
        } else {
            imagePreview.style.display = 'none';
        }
    }
</script>
    @endsection