@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">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">Child Cats</th>
                            <!-- <th scope="col">PP Data Id </th>
                            <th scope="col">FDE Data Id </th>
                            <th scope="col">PP Data Product Name</th>
                            <th scope="col">FDE Data Product Name</th> -->
                        </tr>
                    </thead>
                    <tbody>
                        @foreach( $data as $value )
                        <tr>
                            <td>{{$value->name}}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                <div class="col-md-12">
                </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,
            "info": false,
            "lengthChange": false,
        });
    });
    let table = new DataTable('#myTable');
    $(document).ready(function() {
        $('#myTable').DataTable();
    });
    setTimeout(function() {
        $(".alert").hide();
    }, 5000);
    </script>
    @stop