@extends('backend.layouts.app')

@section('content')

<div class="container p-4 mx-auto">
    <h1 class="mb-4 h2 fw-bold">Applications</h1>
</div>

<section class="container px-4 mx-auto">
    <div class="table-responsive ">
        <table id="applicationTable" class="table table-bordered table-hover">
            <thead class="table-light">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">First Name</th>
                    <th scope="col">Last Name</th>
                    <th scope="col">Middle Name</th>
                    <th scope="col">Suffix</th>
                    <th scope="col">Sex</th>
                    <th scope="col" class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($application as $applications)
                <tr>
                    <td>{{ $applications->id }}</td>
                    <td>{{ $applications->first_name }}</td>
                    <td>{{ $applications->last_name }}</td>
                    <td>{{ $applications->middle_name }}</td>
                    <td>{{ $applications->suffix }}</td>
                    <td>{{ $applications->sex }}</td>
                    <td>
                        <form method="GET" action="{{ route('applications.show', $applications->id) }}">
                            <button class="btn btn-primary btn-block mb-2">Show</button>
                        </form>
                        <form method="GET" action="{{ route('applications.edit', $applications->id) }}">
                            <button class="btn btn-primary btn-block mb-2">Edit</button>
                        </form>
                        <form method="POST" action="{{ route('applications.destroy', $applications->id) }}">@csrf @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</section>

@endsection


@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css">
@endsection

@section('js')
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function() {
        $('#applicationTable').DataTable({
            order: [
                [0, 'desc'] // Order by the first column (Id) descending
            ],
        });
    });
</script>
@endsection