@extends('layouts.finance.finance')

@section('title', 'Job List')
@section('page', 'Finance Dashboard')

@section('content')
    <div class="container-fluid py-4">
        <div class="row align-items-center mb-4 pb-3 border-bottom">
            <div class="col-12">
                <a href="{{ route('finance.jobs', ['year' => $year]) }}" class="btn btn-sm btn-light border shadow-sm mb-3">
                    <i class="bi bi-arrow-left"></i> Back to Years
                </a>
                <h3 class="fw-bold mb-1 text-dark">Job List : {{ $year ?? '2025' }}</h3>
                <p class="text-muted small mb-0">Select a specific job to view its options and documents.</p>
            </div>
        </div>

        <div class="row">
            <div class="col-12 col-md-8 col-lg-6">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
                    <div class="card-header bg-white border-bottom py-3">
                        <h6 class="mb-0 fw-bold text-uppercase text-muted" style="letter-spacing: 0.5px;">Active Jobs</h6>
                    </div>
                    <div class="list-group list-group-flush">
                        @foreach(['E-200', 'S-201', 'E-202'] as $job)
                            <a href="{{ route('finance.job.details', ['year' => $year, 'job' => $job]) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center py-3 px-4 border-bottom transition-all">
                                <div class="d-flex align-items-center">
                                    <div class="bg-primary-subtle rounded p-2 me-3 text-primary">
                                        <i class="bi bi-briefcase fs-5"></i>
                                    </div>
                                    <span class="fw-semibold text-dark fs-5">{{ $job }}</span>
                                </div>
                                <i class="bi bi-chevron-right text-muted"></i>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .bg-primary-subtle { background-color: #e7f1ff; }
        .list-group-item.transition-all { transition: all 0.2s ease-in-out; }
        .list-group-item.transition-all:hover { background-color: #f8f9fa; transform: translateX(5px); }
    </style>
@endsection