@extends('backend.layouts.app')

@section('content')
<div class="container p-4 mx-auto">
    <h1 class="mb-4 h2 fw-bold">Applicants for {{ $career->jobtitle }}</h1>

    <table id="applicantsTable" class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Applicant Name</th>
                <th>Sex</th>
                <th>Email</th>
                <th>Phone Number</th>
                <th>Address</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($career->applications as $application)
            <tr>
                <td>{{ $application->id }} </td>
                <td>{{ $application->first_name }} {{ $application->middle_name }} {{ $application->last_name }} {{ $application->suffix }}</td>
                <td>{{ $application->sex }}</td>
                <td>{{ $application->email }}</td>
                <td>{{ $application->phone_no }}</td>
                <td>{{ $application->home_address }}, {{ $application->city }}, {{ $application->province }}, {{ $application->region }}</td>
                <td>
                    <form method="GET" action="{{ route('applications.show', $application->id) }}">
                        <button class="btn btn-primary btn-block mb-2">Show</button>
                    </form>
                </td>

            </tr>
            @empty
            <tr>
                <td colspan="5">No applicants found for this career.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
@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() {
        $('#applicantsTable').DataTable({
            order: [
                [0, 'desc'] // Order by the first column (Id) descending
            ],
        });
    });
</script>
@endsection