@extends('layouts.app')
@section('title', 'SOP Khusus')
@section('page_title', '📄 SOP Khusus')
@section('back_url', route('sop.hub'))

@section('content')

    {{-- TAB NAVIGATION --}}
    <div class="d-flex gap-2 mb-4">
        <a href="{{ route('sop.khusus.index', 'aktiviti_air') }}"
            class="btn btn-sm {{ $jenis === 'aktiviti_air' ? 'btn-success' : 'btn-outline-success' }} rounded-pill">
            🌊 Aktiviti Air
        </a>
        <a href="{{ route('sop.khusus.index', 'aktiviti_darat') }}"
            class="btn btn-sm {{ $jenis === 'aktiviti_darat' ? 'btn-success' : 'btn-outline-success' }} rounded-pill">
            🏕️ Aktiviti Darat
        </a>
    </div>

    @if ($jenis === 'aktiviti_air')
        {{-- AKTIVITI AIR — 1 PDF --}}
        @php
            $pdfFile = 'sop_aktiviti_air.pdf';
            $pdfPath = asset('pdfs/sop/khusus/' . $pdfFile);
            $pdfExists = file_exists(public_path('pdfs/sop/khusus/' . $pdfFile));
        @endphp

        @if ($pdfExists)
            <div style="background:#fff;border-radius:12px;border:1px solid #eee;padding:16px;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span style="font-size:13px;color:#888;">📄 {{ $pdfFile }}</span>
                    <a href="{{ $pdfPath }}" download
                        style="background:#3a6b20;color:white;border-radius:8px;padding:7px 16px;font-size:12px;text-decoration:none;">
                        ⬇️ Muat Turun
                    </a>
                </div>
                <iframe src="{{ $pdfPath }}" style="width:100%;height:82vh;border:none;border-radius:8px;"
                    title="{{ $pdfFile }}">
                    <p>Browser anda tidak menyokong paparan PDF.
                        <a href="{{ $pdfPath }}">Klik sini untuk muat turun.</a>
                    </p>
                </iframe>
            </div>
        @else
            <div class="text-center py-5" style="background:#fff;border-radius:12px;border:1px solid #eee;">
                <p style="font-size:40px">📄</p>
                <p style="color:#888;font-size:13px;">PDF Aktiviti Air belum tersedia.</p>
                <p style="color:#aaa;font-size:12px;">Sila letak fail di:
                    <code>public/pdfs/sop/khusus/{{ $pdfFile }}</code>
                </p>
            </div>
        @endif
    @elseif($jenis === 'aktiviti_darat')
        {{-- AKTIVITI DARAT — 5 PDF, pilih sub-aktiviti --}}
        @php
            $daratPdfs = [
                'abseiling' => ['label' => '🧗 Abseiling', 'file' => 'sop_abseiling.pdf'],
                'perkhemahan' => ['label' => '⛺ Aktiviti Perkhemahan', 'file' => 'sop_aktiviti_perkhemahan.pdf'],
                'hutan_kembara' => ['label' => '🌳 Hutan Kembara', 'file' => 'sop_kembara_hutan.pdf'],
                'orienteering' => ['label' => '🧭 Orienteering', 'file' => 'sop_orienteering.pdf'],
                'rock_climbing' => ['label' => '🪨 Rock Climbing', 'file' => 'sop_rock_climbing.pdf'],
            ];
            $selectedDarat = request('aktiviti', 'abseiling');
            $selectedPdf = $daratPdfs[$selectedDarat] ?? $daratPdfs['abseiling'];
            $pdfFile = $selectedPdf['file'];
            $pdfPath = asset('pdfs/sop/khusus/' . $pdfFile);
            $pdfExists = file_exists(public_path('pdfs/sop/khusus/' . $pdfFile));
        @endphp

        {{-- SUB AKTIVITI TABS --}}
        <div class="d-flex gap-2 mb-4 flex-wrap">
            @foreach ($daratPdfs as $key => $item)
                <a href="{{ route('sop.khusus.index', 'aktiviti_darat') }}?aktiviti={{ $key }}"
                    class="btn btn-sm {{ $selectedDarat === $key ? 'btn-success' : 'btn-outline-secondary' }} rounded-pill">
                    {{ $item['label'] }}
                </a>
            @endforeach
        </div>

        @if ($pdfExists)
            <div style="background:#fff;border-radius:12px;border:1px solid #eee;padding:16px;">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span style="font-size:13px;color:#888;">📄 {{ $pdfFile }}</span>
                    <a href="{{ $pdfPath }}" download
                        style="background:#3a6b20;color:white;border-radius:8px;padding:7px 16px;font-size:12px;text-decoration:none;">
                        ⬇️ Muat Turun
                    </a>
                </div>
                <embed src="{{ $pdfPath }}" type="application/pdf" width="100%" height="700px"
                    style="border:none;border-radius:10px;">
            </div>
        @else
            <div class="text-center py-5" style="background:#fff;border-radius:12px;border:1px solid #eee;">
                <p style="font-size:40px">📄</p>
                <p style="color:#888;font-size:13px;">PDF untuk <strong>{{ $selectedPdf['label'] }}</strong> belum
                    tersedia.</p>
                <p style="color:#aaa;font-size:12px;">Sila letak fail di:
                    <code>public/pdfs/sop/khusus/{{ $pdfFile }}</code>
                </p>
            </div>
        @endif
    @endif

@endsection