@extends('layouts.app')

@section('content')
    <main>
        <div class="container mt-5">
            <div class="row">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">Filters</h5>
                            <form id="filter-form">
                                <div class="form-group">
                                    <label for="search">Search</label>
                                    <input type="text" id="search" name="search" class="form-control" placeholder="Search...">
                                </div>
                                <div class="form-group">
                                    <label for="location">Filter by Location</label>
                                    <select id="location" name="location" class="form-control">
                                        <option value="">Select Location</option>
                                        @foreach($locations as $location)
                                            <option value="{{ $location }}">{{ $location }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="position">Filter by Position</label>
                                    <select id="position" name="position" class="form-control">
                                        <option value="">Select Position</option>
                                        @foreach($positions as $position)
                                            <option value="{{ $position }}">{{ $position }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <br>
                                <button type="button" class="asio-btn" onclick="applyFilters()">Apply Filters</button>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Title</th>
                                <th>Location</th>
                                <th>Status</th>
                                <th>Duration</th>
                                <th>Expiry Date</th>
                                {{-- <th>Career Type</th> --}}
                                <th>File</th>
                            </tr>
                        </thead>
                        <tbody id="career-opportunities-table">
                            @php
                                $i =0;
                            @endphp
                            @foreach($careerOpportunities as $opportunity)
                                <tr>
                                    <td>{{ ++$i }}</td>
                                    <td>{{ $opportunity->title }}</td>
                                    <td>{{ $opportunity->location }}</td>
                                    <td>{{ $opportunity->status }}</td>
                                    <td>{{ $opportunity->duration }}</td>
                                    <td>{{ $opportunity->expiry_date }}</td>
                                    {{-- <td>{{ $opportunity->career_type }}</td> --}}
                                    <td><a href="{{ asset('documents/'.$opportunity->file.'') }}" target="_blank"><i class="fa fa-download"></i></a></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
    </main>
@endsection