@extends('layouts.app')

@section('content')
    <div class="container-fluid">
        <div class="inside-body-campus">
                <div class="row g-4">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2 py-3">
                                <h4 class="m-0">Job Details</h4>
                                <div class="card-tools">
                                    <a href="{{ route('all.roles.jobs') }}" class="btn btn-secondary btn-sm">
                                        <i class="fas fa-arrow-left"></i> Back
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            <div class="row mt-3">

                <!-- LEFT CONTENT -->
                <div class="col-lg-8">

                    <!-- JOB HEADER -->
                    <div class="card mb-3">
                        <div class="card-body">

                            <h3 class="fw-bold">{{ $job->title }}</h3>

                            <p class="text-muted mb-1">
                                {{ $job->city }}, {{ $job->country }}
                            </p>

                            <div class="d-flex gap-2 flex-wrap mt-2">
                                <span class="badge bg-primary">{{ ucfirst(str_replace('_', ' ', $job->job_type)) }}</span>
                                <span class="badge bg-secondary">{{ ucfirst($job->work_mode) }}</span>

                                @if ($job->salary_min || $job->salary_max)
                                    <span class="badge bg-success">
                                        ${{ $job->salary_min }} - ${{ $job->salary_max }}
                                    </span>
                                @endif
                            </div>

                        </div>
                    </div>

                    <!-- IMAGE GALLERY -->
                    @if ($job->media->where('type', 'image')->count())
                        <div class="card mb-3">
                            <div class="card-body d-flex flex-wrap gap-2">

                                @foreach ($job->media->where('type', 'image') as $img)
                                    <img src="{{ asset('storage/' . $img->file_path) }}"
                                        style="width:150px;height:120px;object-fit:cover;" class="rounded border">
                                @endforeach

                            </div>
                        </div>
                    @endif

                   

                    <!-- DESCRIPTION -->
                    <div class="card mb-3">
                        <div class="card-header fw-semibold">Job Description</div>
                        <div class="card-body">
                          {!! nl2br(strip_tags($job->description)) !!}
                        </div>
                    </div>

                    <!-- RESPONSIBILITIES -->
                    @if ($job->responsibilities)
                        <div class="card mb-3">
                            <div class="card-header fw-semibold">Responsibilities</div>
                            <div class="card-body">
                                {!! nl2br(strip_tags($job->responsibilities)) !!}
                            </div>
                        </div>
                    @endif

                    <!-- REQUIREMENTS -->
                    @if ($job->requirements)
                        <div class="card mb-3">
                            <div class="card-header fw-semibold">Requirements</div>
                            <div class="card-body">
                                {!! nl2br(strip_tags($job->requirements)) !!}
                            </div>
                        </div>
                    @endif

                    <!-- SKILLS -->
                    @if ($job->skills)
                        <div class="card mb-3">
                            <div class="card-header fw-semibold">Skills</div>
                            <div class="card-body">

                                @php
                                    $skills = is_array($job->skills) ? $job->skills : json_decode($job->skills, true);
                                @endphp

                                @foreach ($skills ?? [] as $skill)
                                    <span class="badge bg-dark me-2 mb-2">{{ $skill }}</span>
                                @endforeach

                            </div>
                        </div>
                    @endif

                </div>

                <!-- RIGHT SIDEBAR -->
                <div class="col-lg-4">
                     <!-- VIDEO -->
                   @php
                    $video = $job->media->where('type', 'video')->first();

                    function getEmbedUrl($url) {
                        if (str_contains($url, 'youtube.com/watch')) {
                            return str_replace('watch?v=', 'embed/', $url);
                        }

                        if (str_contains($url, 'youtu.be/')) {
                            $id = substr($url, strrpos($url, '/') + 1);
                            return "https://www.youtube.com/embed/" . $id;
                        }

                        if (str_contains($url, 'youtube.com/shorts/')) {
                            $id = substr($url, strrpos($url, '/') + 1);
                            return "https://www.youtube.com/embed/" . $id;
                        }

                        if (str_contains($url, 'vimeo.com/')) {
                            $id = substr($url, strrpos($url, '/') + 1);
                            return "https://player.vimeo.com/video/" . $id;
                        }

                        return $url; // fallback
                    }
                @endphp

                @if ($video)
                <div class="card mb-3">
                    <div class="card-body">
                        <iframe  width="100%" height="315" src="{{ getEmbedUrl($video->video_url) }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

                    </div>
                </div>
                @endif
                    <!-- JOB INFO -->
                    <div class="card mb-3">
                        <div class="card-body">

                            <p><strong>Experience:</strong> {{ $job->experience_min }} - {{ $job->experience_max }} years
                            </p>

                            <p><strong>Location:</strong>{{ $job->address }} {{ $job->city }}, {{ $job->state }}</p>

                            <p><strong>Posted:</strong> {{ $job->created_at->diffForHumans() }}</p>

                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
@endsection