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

@extends('user.layouts.main')

@section('contents')
    <div class="dashboard_wrapper border_start p-3">
        <div class="listings_wrap">
            <div class="mb-4 d-flex justify-content-between align-items-center">
                <h4 class="page_title">Job Applications for Your Ads</h4>
                    <form method="GET" action="{{ route('user.job-application.index') }}" class="d-flex align-items-center">
                        <select name="ad_id" class="form-select me-2" onchange="this.form.submit()">
                            <option value="">-- All Jobs --</option>
                            @foreach ($ads as $ad)
                                <option value="{{ $ad->id }}" {{  $selectedAdId == $ad->id ? 'selected' : '' }}>
                                    {{ \Illuminate\Support\Str::limit($ad->title, 60) }}
                                </option>
                            @endforeach


                        </select>
                        <noscript><button type="submit" class="btn btn-primary">Filter</button></noscript>
                    </form>
            </div>

            @if($jobApplications->count())
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Job Title</th>
                            <th>Applicant Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Applied On</th>
                            <th>CV</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($jobApplications as $application)
                            <tr>
                                <td>
                                    <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>
                                </td>
                                <td>{{ $application->name }}</td>
                                <td><a href="mailto:{{ $application->email }}">{{ $application->email }}</a></td>
                                <td>{{ $application->phone ?? 'N/A' }}</td>
                                <td>{{ $application->created_at->format('d M Y') }}</td>
                               <td>
    @if($application->cv_path)
        <button 
            class="btn btn-sm btn-outline-primary view-cv-btn" 
            data-pdf-url="{{ asset( $application->cv_path) }}">
            View CV
        </button>
    @else
        N/A
    @endif
</td>
                                <td>
                                    <!-- Example: You can add a button to view details or delete application -->
                                    <a href="{{ route('user.job-application.show', $application->id) }}" class="btn btn-sm " style="background-color:#e00000;color:#ffffff;">Details</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

                <div class="d-flex justify-content-center mt-4">
                    {{ $jobApplications->links() }}
                </div>
            @else
                <div class="text-center text-muted">
                    <h5>No job applications found for your ads.</h5>
                </div>
            @endif
        </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 pdfModalEl = document.getElementById('pdfModal');
    const pdfModal = new bootstrap.Modal(pdfModalEl);
    const pdfContainer = document.getElementById('pdf-container');

    document.querySelectorAll('.view-cv-btn').forEach(button => {
        button.addEventListener('click', function () {
            const url = this.getAttribute('data-pdf-url');
            if (!url) return;

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

            pdfModal.show();
        });
    });

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