{{-- resources/views/user/job_applications/show.blade.php --}}

@extends('user.layouts.main')

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="mb-4 d-flex justify-content-between align-items-center">
            <h4 class="page_title">Job Application Details</h4>
            <a href="{{ route('user.job-application.index') }}" class="btn btn-secondary">Back to Applications</a>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">
                <h5 class="mb-3">Job Title: 
                    <a href="{{ route('ads.details', [
        'location' => $application->ad->city_slug,
        'category' => $application->ad->category_slug,
        'scategory' => $application->ad->subcategory_slug,
        'slug' => $application->ad->slug
    ]) }}" target="_blank">
                        {{ $application->ad->title }}
                    </a>
                </h5>

                <p><strong>Applicant Name:</strong> {{ $application->name }}</p>
                <p><strong>Email:</strong> <a href="mailto:{{ $application->email }}">{{ $application->email }}</a></p>
                <p><strong>Phone:</strong> {{ $application->phone ?? 'N/A' }}</p>
                <p><strong>LinkedIn:</strong> 
                    @if($application->linkedin)
                        <a href="{{ $application->linkedin }}" target="_blank">{{ $application->linkedin }}</a>
                    @else
                        N/A
                    @endif
                </p>
                <p><strong>Expected Salary:</strong> {{ $application->expected_salary ?? 'N/A' }}</p>
                <p><strong>Message:</strong></p>
                <div class="border p-3 mb-3 bg-light" style="white-space: pre-wrap;">
                    {{ $application->message ?? 'No message provided.' }}
                </div>

                <p><strong>CV:</strong>
                    @if($application->cv_path)
                        <button class="btn btn-outline-primary btn-sm" id="viewCvBtn"
                            data-pdf-url="{{ asset( $application->cv_path) }}">
                            View CV
                        </button>
                    @else
                        N/A
                    @endif
                </p>

                <p><small class="text-muted">Applied on: {{ $application->created_at->format('d M Y H:i') }}</small></p>
            </div>
        </div>
    </div>
    <!-- PDF Preview Modal -->
    <div class="modal fade" id="pdfModal" tabindex="-1" aria-labelledby="pdfModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-xl modal-dialog-centered" style="max-width:90vw;">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="pdfModalLabel">View CV</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body" style="height: 600px;">
              <div id="pdf-container" style="width: 100%; height: 100%;"></div>
          </div>
        </div>
      </div>
    </div>

@endsection
@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfobject/2.2.8/pdfobject.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const viewCvBtn = document.getElementById('viewCvBtn');
    const pdfModalEl = document.getElementById('pdfModal');
    const pdfModal = new bootstrap.Modal(pdfModalEl);
    const pdfContainer = document.getElementById('pdf-container');

    if (viewCvBtn) {
        viewCvBtn.addEventListener('click', function () {
            const url = this.getAttribute('data-pdf-url');
            if (!url) return;

            // Show modal
            pdfModal.show();

            // Embed PDF inside container
            PDFObject.embed(url, "#pdf-container", {
                height: "600px"
            });
        });
    }

    // Clear embed on modal close (optional)
    pdfModalEl.addEventListener('hidden.bs.modal', () => {
        pdfContainer.innerHTML = '';
    });
});
</script>
@endpush