@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>
                    <a href="{{ route('pam-dedu-types.create') }}"
                        class="btn btn-success btn-color pull-right">Create</a>
                    <br><br>
                    <table id="dataTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Code</th>
                                <th>Name</th>
                                <th>Parent Group</th>
                                <th>Status</th>
                                <th>Date Created</th>
                                <th>Date Modified</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($data as $item)
                            <tr>
                                <td>{{ $item->code }}</td>
                                <td>{{ $item->short_description }}</td>
                                <td>{{ $item->dedu_group_parent_id }}</td>
                                <td>{{ $item->status }}</td>
                                <td>{{ $item->created_at }}</td>
                                <td>{{ $item->updated_at }}</td>
                                <td>
                                    <a href="{{ route('pam-dedu-types.show', $item->id) }}"
                                        class="btn cur-p btn-primary btn-color">View</a>
                                    <a href="{{ route('pam-dedu-types.edit', $item->id) }}"
                                        class="btn cur-p btn-success btn-color">Edit</a>
                                </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>