@extends('frontend.master.master')

@section('content')
    <!-- Header Section with Pattern Background -->
    <section class="krirlp-header krirlp-detail-header">
        <div class="container">
            <a href="{{ url('/lowongan/' . $dmenu) }}" class="krirlp-back-link">
                <i class="bi bi-chevron-left"></i> {{ $nama_menu ?? 'Lowongan Magang' }}
            </a>
        </div>
    </section>

    <!-- Content Section with Pattern Body Background -->
    <section class="krirlp-content krirlp-detail-content">
        <div class="container">
            <div class="krirlp-detail-wrapper">
                <!-- Header: Title, Department, and Apply Button -->
                <div class="krirlp-detail-header-row">
                    <div class="krirlp-detail-info">
                        <h1 class="krirlp-detail-title">{{ $data->title ?? 'Tidak Ada Konten' }}</h1>
                        <span class="krirlp-detail-dept">{{ isset($data->dept_id) && isset($department[$data->dept_id]) ? $department[$data->dept_id] : 'Tidak Ada Konten' }}</span>
                    </div>
                    <div class="krirlp-detail-action">
                        @if ($dmenu == 'krirlp')
                            <a href="https://career.spunindo.com/auth" target="_blank" class="btn-krirlp-apply">Lamar</a>
                        @elseif ($dmenu == 'mgnglp')
                            <button class="btn-krirlp-apply" data-bs-toggle="modal" data-bs-target="#lamarModal">Lamar</button>
                        @endif
                    </div>
                </div>

                <!-- Content Sections -->
                <div class="krirlp-detail-body">
                    <!-- Deskripsi -->
                    <div class="krirlp-detail-section">
                        <h3 class="krirlp-section-title">Deskripsi</h3>
                        <div class="krirlp-section-content rich-editor-content">
                            {!! !empty($data->description) ? $data->description : '<p>Tidak Ada Konten.</p>' !!}
                        </div>
                    </div>

                    <!-- Kualifikasi -->
                    <div class="krirlp-detail-section">
                        <h3 class="krirlp-section-title">Kualifikasi</h3>
                        <div class="krirlp-section-content rich-editor-content">
                            {!! !empty($data->text1) ? $data->text1 : '<p>Tidak Ada Konten.</p>' !!}
                        </div>
                    </div>

                    <!-- Benefit -->
                    <div class="krirlp-detail-section">
                        <h3 class="krirlp-section-title">Benefit</h3>
                        <div class="krirlp-section-content rich-editor-content">
                            {!! !empty($data->text2) ? $data->text2 : '<p>Tidak Ada Konten.</p>' !!}
                        </div>
                    </div>

                    {{-- Video Section --}}
                    @php
                        $videoUrl = $data->video_url ?? '';
                        $isEmbed = $videoUrl && (strpos($videoUrl, 'youtube.com') !== false || strpos($videoUrl, 'youtu.be') !== false || strpos($videoUrl, 'vimeo.com') !== false);
                        $isFile = $videoUrl && !$isEmbed;
                    @endphp
                    @if($videoUrl)
                        <div class="krirlp-detail-section">
                            <h3 class="krirlp-section-title">Video</h3>
                            <div class="krirlp-video-wrapper">
                                @if($isEmbed)
                                    <iframe src="{{ $videoUrl }}" frameborder="0" allowfullscreen></iframe>
                                @else
                                    <video src="{{ asset('storage/' . $videoUrl) }}" controls></video>
                                @endif
                            </div>
                        </div>
                    @else
                        @if(isset($isPreview) && $isPreview)
                            <div class="alert alert-warning mt-4">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                <strong>Video tidak ditemukan</strong> - videoUrl kosong atau null
                            </div>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- Modal for Magang -->
    @if ($dmenu == 'mgnglp')
        @php
            $msjMagangDomain = 'https://magang.spunindo.com/storage';
            $qr = data_get($data, 'qrcode'); // aman kalau tidak ada propertinya
        @endphp

        <div class="modal fade" id="lamarModal" tabindex="-1" aria-labelledby="lamarModalLabel" aria-hidden="true"
            data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header position-relative">
                        <h5 class="w-100 text-center m-0">Scan QR Code di bawah ini</h5>
                        <button type="button" class="btn-close" style="position:absolute; top:.75rem; right:1rem;"
                            data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body text-center">
                        @if ($qr)
                            <img src="{{ $msjMagangDomain . '/' . $qr }}" alt="QR Code" class="img-fluid"
                                style="max-height:300px;">
                        @else
                            <p class="text-muted mb-0">QR Code belum tersedia.</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @endif

@endsection