@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">{{ $title }}</h4>
                    @canany('Manage payroll earning definitions')
                    <a href="{{ route('pam-pay-earn-defs.create',$pamPayroll->id) }}"
                        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>
                                <th>Code</th>
                                <th>Name</th>
                                <th>Mode of Calculation</th>
                                <th>%</th>
                                <th>Fixed Amount</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $item)
                            <tr>
                                <td>{{$item->earn_def_id?  $item->pamEarnDef->code : '' }}    </td>
                                <td>{{ $item->short_description }}</td>
                                
                                <td>
                                {{$item->mode_of_calculation }}    
                                </td>   
                                <td>
                                {{$item->percentage }}    
                                </td>   
                                <td>
                                {{$item->fixed_amount }}    
                                </td>                   
                                <td style="text-align: right;">
                                @canany(['View payroll earning definitions','Manage payroll earning definitions'])
                                    <a href="{{ route('pam-pay-earn-defs.show', $item->id) }}"
                                        class="btn cur-p btn-primary btn-color"><i class="ti-eye"></i></a>
                                        @endcanany
                                        @canany(['Manage payroll earning definitions'])
                                        <a href="{{ route('pam-pay-earn-defs.edit', $item->id) }}"
                                        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>