@extends('layouts.default')
@section('content')
<style>
.pagination {
    margin-top: 20px;
}

.pagination .page-item {
    display: inline-block;
    margin-right: 5px;
}

.pagination .page-link {
    padding: 5px 10px;
    background-color: #007BFF;
    color: #fff;
    border: 1px solid #007BFF;
    border-radius: 3px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.pagination .page-link:hover {
    background-color: #0056b3;
}

.pagination .page-item.disabled .page-link {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #dee2e6;
}
</style>
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Not Match Category </h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="#">Home</a></li>
                        <li class="breadcrumb-item active">Dashboard</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <br>
    <section class="content">
        <div class="container-fluid">
            <br>
            <br>
            @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <p>{{ $message }}</p>
            </div>
            @endif
            @if ($message = Session::get('error'))
            <div class="alert alert-danger">
                <p>{{ $message }}</p>
            </div>
            @endif
            <table class="table table-striped table-hover  table-list stateChange" id="myTable">
                <thead>
                <tr class="bg-dark" style="">
                        <th scope="col">Sno</th>
                        <th scope="col">Name</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach( $data as $value )
                    <tr>
                        <td>{{$value->pp_category_id}}</td>
                        <td>{{$value->name}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            <div class="col-md-12">
                <ul class="pagination justify-content-center">
              
            </div>
        </div>
    </section>
</div>
<aside class="control-sidebar control-sidebar-dark"></aside>


<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css">

<script>
$(document).ready(function () {
    $('#myTable').DataTable({
        "paging": true,
        "searching": false, // Remove search box
        "info": false, // Remove info block
        "lengthChange": false, // Remove page length options
    });
});
let table = new DataTable('#myTable');

$(document).ready( function () {
    $('#myTable').DataTable();
} );

setTimeout(function() {
    $(".alert").hide();
}, 5000);
</script>






@stop