@extends('layouts.master')
@section('content')

          <div id="mainContent">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                @if(session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
                @endif
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bgc-white bd bdrs-3 p-20 mB-20">
                    <h4 class="c-grey-900 mB-20">{{ $pageTitle }}</h4>
                    @canany('Manage deduction definitions')
                    <a href="{{ route($routeBase .'.create') }}"
                        class="btn btn-success btn-color pull-right">Create</a>
                    <br><br>
                @endcanany
                    <table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
        <tr>
            @foreach($headers as $header => $field)
                <th>{{ $header }}</th>
            @endforeach
        </tr>
    </thead>
    <tbody>
        @foreach($data as $item)
            <tr>
                @foreach($headers as $field)
                    
                        <td>{{ $item->$field }}</td>
                    
                @endforeach
				
				  <td style="text-align: right;">
                                @canany(['View contribution definitions', 'Manage contribution definitions'])
                                    <a href="{{ '/' . $routeBase . '/' . $item->id . '/show' }}"
                                        class="btn cur-p btn-primary btn-color"><i class="ti-eye"></i></a>
                                        @endcanany
                                        @canany('Manage contribution definitions')
                                        <a href="{{ '/' . $routeBase . '/' . $item->id . '/edit' }}"
                                        class="btn cur-p btn-success btn-color"><i class="ti-pencil"></i></a>
                               @endcanany
                                    </td>
            </tr>
        @endforeach
    </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

<script>
    $(document).ready(function() {
        $('#dataTable').DataTable();
    });
</script>

<script>
    // Wait for the DOM to load
    document.addEventListener('DOMContentLoaded', function() {
        // Select the flash message element
        var flashMessage = document.querySelector('.alert');

        // If the flash message element is present
        if (flashMessage) {
            // Set a timeout to hide the flash message after 5 seconds (5000ms)
            setTimeout(function() {
                flashMessage.style.display = 'none';
            }, 5000);
        }
    });
</script>