@extends('frontend.layouts.app2')

@section('title')

@endsection

@section('seo')
<title>Your Trusted Service Contracting Partner | Beta Com Resources Inc.</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Your Trusted Service Contracting Partner | Beta Com Resources Inc." />
<meta property="og:description" content="Discover Beta Com Resources Inc., a dynamic service contracting company offering Manufacturing, Maintenance, Retail Support, and Janitorial services. Backed by industry leaders, we provide innovative workforce solutions, enriching lives with employment opportunities and tailored services." />
<meta property="og:site_name" content="Beta Com Resources Inc." />
<meta property="og:image" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.jpg') }}" />
<meta property="og:keywords" content="Beta Com Resources Inc., Service contracting, Workforce solutions, Manufacturing services, Maintenance solutions, Retail support, Janitorial services, Full outsourcing, Reliable business partner, Innovative solutions, Agile workforce, Skilled manpower, Workforce training, Background checking, Philippine services, Business processes, Dynamic service provider, Enriching lives through employment, Industry leaders, Service excellence">
@endsection

@section('content')
<h3>Welcome, {{ Auth::user()->name }}!</h3>

<h1>APPLIED JOBS</h1>

<!-- Responsive Table -->
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Job Title</th>
                <th scope="col">Location</th>
                <th scope="col">Description</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            @forelse($applications as $application)
            @foreach($application->applicationCareer as $career)
            <tr>
                <td>{{ $career->career->jobtitle }}</td>
                <td>{{ $career->career->location }}</td>
                <td>{!! $career->career->description !!}</td>
                <td>
                    <button class="btn bg-color-light border-0 rounded-0 px-5" style="align-items: center;" data-bs-toggle="modal" data-bs-target="#viewAllModal{{ $career->id }}">VIEW STATUS AND REMARKS</button>
                </td>
            </tr>
            <!-- View All Statuses Modal -->
            <div class="modal fade" id="viewAllModal{{ $career->id }}" tabindex="-1" aria-labelledby="viewAllModalLabel{{ $career->id }}" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="viewAllModalLabel{{ $career->id }}">All Statuses and Remarks</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <ul class="list-group">
                                @foreach($career->applicationCareerStatus as $status)
                                <li class="list-group-item">
                                    <strong>Status:</strong> {{ $status->status }}<br>
                                    <strong>Remarks:</strong> {{ $status->remarks }} <br>
                                    <strong>Date:</strong> {{ $status->created_at->format('F j, Y') }}
                                </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="modal-footer">

                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
            @empty
            <tr>
                <td colspan="5">No applied jobs found.</td> <!-- Adjust colspan to match the number of columns -->
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
<style>
    table,
    th,
    td {
        border: none;
    }

    .contact-bg {
        background-color: #0f7170;
        height: 20vh;
        background-position: center;
        background-size: cover;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    @media (max-width: 768px) {
        .contact-bg {
            height: 25vh;
        }
    }
</style>
@endsection