@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">Pass Providers 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">
            <form action="fileUpload" method="POST" enctype="multipart/form-data">
                {{ csrf_field() }}
                <input type="file" id="upload" class="upload" name="upload">
                <button type="submit" class="btn btn-info btn-sm">Upload</button>
            </form>
            <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
            
            <button type="button" class="btn btn-sm btn-warning" id="sync_Rfq" style="float: right;margin: 0% 1%">Sync Childcategory</button>  
            
            
            
            
            
            <table class="table" id="myTable">
                <thead>
                <tr class="bg-dark">
                        <th scope="col">ID</th>
                        <th scope="col">Name</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach( $data as $value )
                    <tr>
                        <td>{{$value->id}}</td>
                        <td>{{$value->name}}</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>

    let table = new DataTable('#myTable');

    // $(document).ready(function() {
    //     $('#myTable').DataTable();
    // });
    
    
    $("#sync_Rfq").click(function() {
    $.ajax({
        url: 'sync_Rfq',
        type: 'get',
        success: function(data) {
            window.location.href = window.location.href;
        },
       
    });
});

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