@extends('layouts.app')
@section('title', 'Employment Application History')
@section('content')
<style type="text/css">
    [data-href] { cursor: pointer; }
</style>
<div class="container page-content">
    <div class="row page-col align-items-center">
        <div class="col text-start">
            <h1 class="font-weight-bold typography-4 mb-0">Employment Application List</h1>
        </div>
        @if ( !$applications->isEmpty() )
        <div class="col mt-3 mt-md-0 text-end">
            <a class="btn btn-black btn-custom" href="{{ route('employee-application-index') }}">Back</a>
            <a class="ms-2 btn btn-purple btn-custom" href="{{ route('employment-application-export') }}"> Export</a>
        </div>
        @endif
    </div>
    <div class="row justify-content-center page-col">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @if ( $applications->isEmpty() )
                        <h4 class="typography-2 font-weight-semibold text-grey text-center mb-0">- N/A -</h4>
                    @else
                        <div class="table-responsive">
                            <table class="table table-hover valign-child-middle sortable">
                                <thead class="table-light">
                                    <tr>
                                        <th width="5%">No</th>
                                        <th width="10%">Type</th>
                                        <th width="20%">Position</th>
                                        <th width="20%">Name</th>
                                        <th width="20%">Email</th>
                                        <th width="15%">Contact No.</th>
                                        <th width="10%">Status</th>
                                    </tr>
                                </thead>
                                <tbody id="search_table">
                                    @foreach ($applications as $index => $application)
                                    <tr class='clickable-row' data-href="{{ route('confirmed-application-show',['id'=>$application->id]) }}">
                                        <th>{{ $index + 1 }}</th>
                                        <td>{{ $application->employee_type }}</td>
                                        <td>{{ $application->job_position ? $application->job_position : '-' }}</td>
                                        <td>{{ $application->full_name }}</td>
                                        <td>{{ $application->personal_email }}</td>
                                        <td>{{ $application->mobile }}</td>
                                        <td class="fw-bold {{ $application->status > 1 ? 'text-info' : ($application->status == 4 ? 'text-primary' : ($application->status == 5 ? 'text-danger' : ($application->status == 6 ? 'text-success' : ''))) }}">{{ $status_types[$application->status] }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
<script type="text/javascript">
    $(document).ready(function(){
        $(".clickable-row").click(function() {
            window.location = $(this).data("href");
        });
    });
</script>
@endpush