@extends('frontend.layouts.app')

@section('content')
@php
    $excludeBreadcrumb = true;
@endphp

<style>
    /* Styling for the container */
    .wrapper-inner {
        padding: 40px 0;
    }

    .job-title {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 30px;
        color: #333;
    }

    /* Image/video display styling */
    .cardImg {
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        margin-bottom: 40px;
    }

    .cardImg img, .cardImg video {
        width: 100%;
        height: 500px;
        object-fit: cover;
        object-position: center;
        border-radius: 10px;
    }

    .cardImg video {
        object-fit: contain;
    }

    /* Styling for the text content */
    .cardInfo {
        background-color: #fff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    }

    .cardInfo p {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #555;
        margin-bottom: 20px;
    }

    .createdAt {
        font-size: 0.9rem;
        color: #aaa;
        text-align: right;
        margin-top: 20px;
    }

</style>

<div class="wrapper-inner">
    <div class="job-listing">
        <div class="container">
            <!-- Job Title -->
            <h3 class="mb-md-4 mb-xl-5 job-title">{{ $careerGuidance->title }}</h3>

            <!-- Image or Video Section -->
            <div class="row">
                <div class="col-md-12">
                    <div class="blogcard">
                        <div class="cardImg mb-4">
                            @if ($careerGuidance->file)
                                @php
                                    // Get the file's extension
                                    $fileExtension = pathinfo($careerGuidance->file, PATHINFO_EXTENSION);
                                @endphp
                                @if (in_array(strtolower($fileExtension), ['jpg', 'jpeg', 'png', 'gif', 'webp']))
                                    <!-- Image file -->
                                    <img src="{{ asset('images/career-guidances/' . $careerGuidance->file) }}"
                                         alt="Career Guidance Image" class="img-fluid">
                                @elseif(in_array(strtolower($fileExtension), ['mp4', 'webm', 'ogg']))
                                    <!-- Video file -->
                                    <video width="100%" height="auto" controls>
                                        <source
                                            src="{{ asset('images/career-guidances/' . $careerGuidance->file) }}"
                                            type="video/{{ $fileExtension }}">
                                        Your browser does not support the video tag.
                                    </video>
                                @else
                                    <!-- If it's neither image nor video, show fallback or message -->
                                    <span>No valid media available</span>
                                @endif
                            @else
                                <span>No file available</span>
                            @endif
                        </div>

                        <!-- Description Section -->
                        <div class="cardInfo">
                            <p>{!! $careerGuidance->description !!}</p>
                        </div>

                        <!-- Created at timestamp -->
                        <div class="createdAt">
                            <p>Posted on: {{ \Carbon\Carbon::parse($careerGuidance->created_at)->format('F j, Y') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pagination Section (optional, if needed) -->
        </div>
    </div>
</div>

@endsection
