@extends('backoffice.dashboard')

@section('content')

@if(Auth::check())

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

<div class="container-fluid dashboard-inner-body-container">
    <div class="row">
        <div class="col-lg-12">
            <div class="block-card dashboard-card mb-4 px-0">

                {{-- Header --}}
                <div class="block-card-header px-4 border-bottom-0 pb-0 d-flex justify-content-between align-items-center">
                    <h2 class="widget-title">معاينة القالب</h2>

                    <div class="d-flex gap-2">
                        <a href="{{ route('concours.pdf-templates.download-empty', [$concours, $pdfTemplate]) }}" 
                           class="btn btn-info btn-sm"
                           title="تنزيل القالب بدون بيانات مترشح">
                            <i class="fa-solid fa-download me-1"></i> تنزيل القالب فارغ
                        </a>
                        <a href="{{ route('concours.pdf-templates.index', $concours) }}" class="btn btn-outline-secondary btn-sm">
                            <i class="la la-arrow-right me-1"></i> عودة
                        </a>
                    </div>
                </div>

                {{-- Body --}}
                <div class="block-card-body">
                    <div class="row">
                        <div class="col-12">

                            @if(($showEmpty ?? false) || empty($candidate))
                                {{-- Empty template preview (no candidate data) --}}
                                <div class="card" style="direction: rtl;">
                                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0">معاينة PDF: <strong>القالب الفارغ</strong></h6>
                                        <div>
                                            <a href="{{ route('concours.pdf-templates.download-empty', [$concours, $pdfTemplate]) }}" class="btn btn-sm btn-success" download>
                                                <i class="fa-solid fa-download me-1"></i> تنزيل PDF
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body p-3">
                                        {{-- Render processed HTML layout if present --}}
                                        @if(!empty($processedBody))
                                            <div style="background: white; padding: 20px;">
                                                {!! $processedBody !!}
                                            </div>
                                        @else
                                            <div class="text-center py-5 text-muted">
                                                <i class="fa-solid fa-file-pdf" style="font-size:48px; display:block; margin-bottom:16px;"></i>
                                                لا توجد بيانات لعرضها في القالب.
                                            </div>
                                        @endif
                                    </div>

                                    <div class="card-footer">
                                        {{-- Provide direct PDF preview via iframe --}}
                                        <iframe id="emptyPdfViewer" style="width:100%; height:600px; border:0;" src="{{ route('concours.pdf-templates.download-empty', [$concours, $pdfTemplate]) }}"></iframe>
                                    </div>
                                </div>

                            @else
                                {{-- Candidate-specific preview (first candidate or chosen) --}}
                                <div class="card" style="direction: rtl;">
                                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0">معاينة PDF للمترشح: <strong>{{ $candidate->nom }} {{ $candidate->prenom }}</strong></h6>
                                        <div>
                                            <a href="{{ route('concours.pdf-templates.generate', [$concours, $pdfTemplate, 'candidate_id' => $candidate->id]) }}" class="btn btn-sm btn-success" download>
                                                <i class="fa-solid fa-download me-1"></i> تنزيل PDF
                                            </a>
                                        </div>
                                    </div>

                                    <div class="card-body p-0">
                                        <iframe id="candidatePdfViewer" style="width:100%; height:800px; border:0;" src=""></iframe>
                                    </div>
                                </div>

                                <script>
                                    // Load candidate PDF as base64 via the API and set iframe src
                                    (function(){
                                        const iframe = document.getElementById('candidatePdfViewer');
                                        fetch('{{ route("concours.pdf-templates.pdf-data", [$concours, $pdfTemplate]) }}?candidate_id={{ $candidate->id }}')
                                            .then(r => r.json())
                                            .then(data => {
                                                if (data && data.success && data.data) {
                                                    iframe.src = data.data;
                                                } else {
                                                    iframe.srcdoc = '<div style="padding:40px; text-align:center; color:#666;">فشل في تحميل ملف PDF.</div>';
                                                }
                                            })
                                            .catch(() => {
                                                iframe.srcdoc = '<div style="padding:40px; text-align:center; color:#666;">فشل في تحميل ملف PDF.</div>';
                                            });
                                    })();
                                </script>

                            @endif

                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

@else
    <script>window.location.href = "{{ route('login') }}";</script>
@endif

@endsection