@extends('backend.layouts.app')

@section('content')

<div class="container p-4 mx-auto">
    <h1 class="mb-4 h2 fw-bold">Careers</h1>
    <a href="{{ route('careers.create') }}" class="btn btn-primary"><i class='bx bx-add-to-queue'></i> Add New Careers</a>
</div>

<section class="container px-4 mx-auto">
    <div class="table-responsive">
        <table id="myTable" class="table table-bordered table-hover">
            <thead class="table-light">
                <tr>
                    <th scope="col">Id</th>
                    <th scope="col">Job Title</th>
                    <th scope="col">Job Type</th>
                    <th scope="col">Work Schedule</th>
                    <th scope="col">Rate</th>
                    <th scope="col">Location</th>
                    <th scope="col">Description</th>
                    <th scope="col" class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($careers as $career)
                <tr>
                    <td>{{ $career->id }}</td>
                    <td>{{ $career->jobtitle }}</td>
                    <td>{{ $career->job_type }}</td>
                    <td>{{ $career->work_schedule }}</td>
                    <td>{{ $career->rate }}</td>
                    <td>{{ $career->location }}</td>
                    <td>{!! $career->description !!}</td>
                    <td>
                        <form method="GET" action="{{ route('careers.edit', $career->id) }}">
                            <button class="btn btn-primary btn-block mb-2">Edit</button>
                        </form>
                        <form method="POST" action="{{ route('careers.destroy', $career->id) }}">@csrf @method('DELETE')
                            <button class="btn btn-danger btn-block mb-2">Delete</button>
                        </form>

                        <!-- View Applicants button redirects to the new page -->
                        <a href="{{ route('careers.applicants', $career->id) }}" class="btn btn-info btn-block mb-2">View Applicants</a>
                    </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() {
        $('#myTable').DataTable({
            order: [
                [0, 'desc']
            ]
        });
    });
</script>
@endsection