@extends('layouts.admin.main') @section('title', 'category')

@section('header')

    <div class="container-fluid">

        <div class="row align-items-center">

            <div class="col-lg-6 col-7">

                <h6 class="h2 text-white d-inline-block mb-0"></h6>

            </div>

        </div>

    </div>

@endsection

 @section('content')


<div class="row">



  <!-- Light table -->

  <div class="col">

    <div class="card">



      <!-- Card header -->

        <div class="card-header border-0">

            <div class="row align-items-center">

                <div class="col">

                    <h3 class="mb-0">Category</h3>

                </div>



                <div class="col text-right">



                            <a href="{{ route('admin.categorys.add') }}" class="btn btn-sm btn-primary">Add Category</a>


                    <br/>

                </div>

            </div>

        </div>

      <form action="{{ url()->full() }}" method="get" id="get_data">@csrf

        <input type="hidden" name="page" id="page" class="form-control">

      </form>

      <div class="card-body pt-0">

        <div class="loading-overlay hide-loading-overlay">

          <div class="loading-content">

            <img src="{{ asset('/img/loading.gif') }}" alt="Loading..." />

          </div>

        </div>@include('layouts.messages')

        <div class="ajax-content">

        </div>

      </div>

    </div>

  </div>

</div>@endsection @section('scripts') @parent

<script>
        function showPermissionAlertadd() {
    alert("You do not have permission to add this product.");
}
</script>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">

<script>

  function get_data_ajax() {

    var form = $('form#get_data');

    $('.loading-overlay').removeClass('hide-loading-overlay');



    $.ajax({

      type: form.attr('method'),

      url: form.attr('action'),

      data: $('form#get_data').serialize(),

      success: function (data) {

        $('.ajax-content').html(data);

        $('.loading-overlay').addClass('hide-loading-overlay');

      },

      error: function (xhr, textStatus, errorThrown) {

        alert('Error in fetching data. Please try again.');

        $('.loading-overlay').addClass('hide-loading-overlay');

      }

    });

  }



  $(document).on('click', '.pagination>li>a', function (event) {

    event.preventDefault();

    $('#page').val($(this).text());

    get_data_ajax();

  });



  $(document).on('submit', 'form#get_data', function (event) {

    event.preventDefault();

    get_data_ajax();

  });



  $(document).ready(function() {

    $('form#get_data').submit();

  });

  </script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js"></script>

<script type="text/javascript">

    function changeStatus(id, newStatus) {

        var activeColor = (newStatus == 1) ? '#A3CB38' : 'red';

        var inactiveColor = (newStatus == 2) ? 'red' : '#A3CB38';



        $.ajax({

            url: "{{ route('admin.categorys.deactive', ['id' => ':id']) }}".replace(':id', id),

            type: "post",

            headers: {

                'X-CSRF-Token': $('meta[name=_token]').attr('content')

            },

            data: {

                '_token': "{{ csrf_token() }}",

                'id': id,

                'new_status': newStatus

            },

            success: function(data) {
            if (data.status === 'success') {
                var statusIndicator = $('[data-id="' + id + '"]');
                var slider = statusIndicator.siblings('.switch').find('.slider.round');
                var checkbox = slider.siblings('input[type="checkbox"]');

                statusIndicator.css('color', (newStatus == 1) ? activeColor : inactiveColor);
                slider.css('background-color', (newStatus == 1) ? activeColor : inactiveColor);
                checkbox.prop('checked', (newStatus == 1));

                slider.attr('onclick', `changeStatus(${id}, ${newStatus === 1 ? 2 : 1})`);
            } else {
                alert('Failed to update the status. Please try again.');
            }
        },

        });
    }
</script>

<script>

  $(document).on('submit', 'form.delete-action', function (event) {

    if (confirm('Are you sure you want to delete this category?')) {

      $.ajax({

        dataType: 'json',

        type: 'POST',

        url: $(this).attr('action'),

        data: $(this).serialize(),

        success: function(data) {

          show_toastrs(data);

          $('#page').val('1');

          get_data_ajax();

        },

        error: function(err) {

          console.log(err);

        }

      });

    }

    return false;

  });

</script>@endsection



<style>

    h6.h2 {

        font-size: 32px;

    }



    div#categorys_wrapper {

    padding-bottom: 0px;

}



    h3 {
        font-size: 18px !important;

    }



    /* .card-header.border-0 {

        border-bottom: solid #A3CB38 2px !important;

    } */



    .navbar-top.border-bottom.navbar-dark {

        background-color: white!important;

        border-style:doted !important;

    }



    .pb-6, .py-6 {

        padding: 0 27px;

    }



    label {

        color: gray;

        font-family: sans-serif;

        font-weight: bold;

    }



    label input[type="search"] {

        border: solid #A3CB38 1px;

        border-radius: 5px;

    }



    .navbarflex {

        display: flex;

        flex-wrap: wrap;

        justify-content: space-between;

    }

    .navbar-expand .navbar-nav{

        margin-left:0 !important;

    }



    div#categorys_info{

        color: #808080;

    }



    th {

        color: black !important;

        font-size: 12px !important;

        font-weight: 800 !important;

    }

    table#categorys{

    margin-bottom: 0px !important;

}

.dataTables_info{

    padding-left: 0px !important;

}

.dataTables_wrapper .dataTables_info {

    clear: both;

    float: left;

    padding-top: 5px !important;

    padding-bottom: 5px;

}

.pagination-block.text-center.mt-2 {

    margin-top: 0px !important;

}

.pagination {

    display: flex;

    padding-left: 0;

    list-style: none;

    border-radius: 0.375rem;

    margin-bottom:0px !important;

}

.card-body.pt-0 {

  padding-bottom: 20px;

}

.pb-6  {

    padding: 40px 0px !important;

   }

   .page-item.active .page-link {

    z-index: 3;

    color: #fff;

    background-color: #A3CB38 !important;

    border-color: #A3CB38 !important;

}

.new-alert.alert.alert-success.alert-dismissible.mb-2 {

    width: 370px !important;

    margin: auto !important;

}

      /*tablate*/

    @media (min-width:768px) and (max-width:1023px) {

        .main-content .navbar-top .collapse {

             justify-content: space-between;;

        }



        .navbar-expand .navbar-nav{

            margin-left:0 !important;

        }



        .table td{

            font-size:16px !important;

        }



        th {

            color: black !important;

            font-size: 16px !important;

            font-weight: 800 !important;

        }



        H3{

            font-size: 20px !important;

        }



        .btn{

            font-size:16px !important;



        }



        .card-body {

            padding:0 !important;

        }



        .actions .delete-action .btn {

            font-size: 14px !important;

        }



        table.dataTable.no-footer {

            padding: 15px 0 0 0;

        }



        div#planlist_filter {

            padding: 15px 0px;

        }

    }

    /*mobile*/

    @media (min-width:320px) and (max-width:767px) {

        .table td{

            font-size:14px !important;

        }

        label {

            padding: 0 17px;

        }



        th {

            color: black !important;

            font-size: 14px !important;

            font-weight: 800 !important;

        }



        H3{

            font-size: 17px !important;

        }



        .btn{

            font-size:14px !important;

        }



        .actions .delete-action .btn {

            font-size: 12px !important;

        }



        table.dataTable.no-footer {

            padding: 15px 0 0 0;

        }



        div#planlist_filter {

            padding: 15px 0px;

        }

        div#categorys_info {

          padding-top:10px !important;

          padding-bottom:10px;

    color: #A3CB38;

}

.pagination-block.text-center.mt-2 {

    margin-top: 10px !important;

} 





    }



    label {

    display: flex !important;

    margin-bottom: 0.5rem;

}
div#categorys_length, div#categorys_length label, div#categorys_filter, div#categorys_filter label {
    padding: 0px !important;
    display: flex;
    justify-content: center;
}



</style>