@extends('job.layout.web')
@section('title', 'Job Listing')
@section('content')
    <style>
        .apply-btn {
            padding: 6px 12px;
            font-size: 0.85rem;
            border-radius: 4px;
            line-height: 1.2;
            display: inline-block;
        }

        /* Desktop view — more padding and font size */
        @media (min-width: 768px) {
            .apply-btn {
                padding: 10px 20px;
                font-size: 1rem;
            }
        }
    </style>
    <div class="container">
        <section class="form-shared py-5">
            <div class="row mb-4">
                <div class="col-12 text-center">
                    <h2 class="mb-2">Job Listings</h2>
                    <p class="text-muted">Explore the latest job opportunities from top companies</p>
                </div>
            </div>
            <div class="container">
                @foreach ($jobs as $job)
                    @php
                        $postedDate = Carbon\Carbon::parse($job->created_at);
                        $daysAgo = round($postedDate->diffInDays(Carbon\Carbon::now()));
                    @endphp
                    <div
                        class="job-card-details d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between border p-3 rounded shadow-sm mb-4 bg-white">
                        <div class="card-head d-flex flex-column flex-sm-row align-items-start align-items-sm-center w-100">
                            <div class="company-title-box w-100">
                                <p class="card-sub mb-1 small text-muted">
                                    <i class="la la-calendar me-1"></i> {{ $daysAgo }} Days Ago
                                </p>
                                <h4 class="card-title mb-1 h5">
                                    <a href="" class="text-dark text-decoration-none">
                                        {{ $job->title }}
                                    </a>
                                </h4>
                                <p class="card-sub small text-muted mb-2">
                                    <span class="d-block d-md-inline me-2">
                                        <i class="la la-building-o me-1"></i> {{ $job->company->name }}
                                    </span>
                                    <span class="d-block d-md-inline me-2">
                                        <i class="la la-map-marker me-1"></i> Ulhasnagar
                                    </span>
                                    <span class="d-block d-md-inline me-2">
                                        <i class="la la-clock-o me-1"></i> {{ $job->type }}
                                    </span>
                                    <span class="d-block d-md-inline">
                                        ₹{{ $job->min_salary }} – ₹{{ $job->max_salary }} Per Year
                                    </span>
                                </p>
                            </div>
                        </div>
                        <div class="btn-box mt-3 mt-md-0 text-md-end w-100 w-md-auto">
                            <a href="" class="btn btn-sm btn-success simple-apply-btn">Apply Now</a>
                        </div>
                    </div>
                @endforeach
            </div>
        </section>

    </div>
@endsection