@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;
}

tr{
    text-align:center;
}

td{
    text-align:center;
}

th{
    text-align:center;
}

table.dataTable>thead>tr>th, table.dataTable>thead>tr>td {
 
    text-align: center;
}
</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 (Case / Font Wise) </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>



    <!-- <button class="btn btn-sm btn-primary">Merge Data</button> -->


    <a href="{{url('merge_data')}}"<button type="button" class="btn btn-primary btn-sm mb-2"  id="get_data" style="margin-right:11px">Merge Data</button> </a>

    

    <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 class="text-center">
                <tr class="bg-dark" style="">
                            <th scope="col">Status</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>Matched</td>
                        <td>{{$value->name}}</td>
                        <td>{{$value->deals_in}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
           
        </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