@extends('admin.admin_dashboard')
@section('admin')

<!-- SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="page-content">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h4 class="fw-bold mb-0"><i class="bx bx-user"></i> Applicant Details</h4>
        <a href="{{ route('hr.applicants.all') }}" class="btn btn-secondary rounded-pill px-4">
            <i class="bx bx-left-arrow-alt"></i> Back to Applicants
        </a>
    </div>

    <div class="row g-4">

        <!-- Applicant Info -->
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm border-0 radius-10">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">Personal Information</h5>
                    <p><strong>Full Name:</strong> {{ $applicant->full_name }}</p>
                    <p><strong>Email:</strong> {{ $applicant->email }}</p>
                    <p><strong>Phone:</strong> {{ $applicant->phone }}</p>
                </div>
            </div>
        </div>

        <!-- Positions Applied -->
        <div class="col-12 col-lg-6">
            <div class="card shadow-sm border-0 radius-10">
                <div class="card-body">
                    <h5 class="fw-bold mb-3">Positions Applied</h5>

                    @forelse($applicant->positions as $position)
                        <div class="d-flex justify-content-between align-items-center mb-2 position-row">
                            <span>{{ $position->job->job_title ?? 'N/A' }}</span>
                            <span class="d-flex align-items-center gap-2">

                                <!-- Status Badge -->
                                <span class="status-badge badge {{ $position->status == 'shortlisted' ? 'bg-success' : ($position->status == 'rejected' ? 'bg-danger' : 'bg-secondary') }} px-2 py-1">
                                    {{ $position->status ? ucfirst($position->status) : 'Applied' }}
                                </span>

                                <!-- Update Button -->
                                <button type="button"
                                        class="btn btn-sm btn-warning rounded-pill px-2 update-status-btn"
                                        data-applicant="{{ $applicant->id }}"
                                        data-job="{{ $position->job_id }}"
                                        data-current="{{ $position->status ?? 'applied' }}">
                                    <i class="bx bx-edit"></i> Update
                                </button>

                                <!-- CV -->
                                @if($position->cv_file)
                                    <a href="{{ asset('upload/applicant_cv/' . $position->cv_file) }}" target="_blank" class="btn btn-sm btn-primary rounded-pill px-2">
                                        <i class="bx bx-download"></i> CV
                                    </a>
                                @endif

                            </span>
                        </div>
                    @empty
                        <p class="text-muted">No positions applied.</p>
                    @endforelse

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

    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="statusForm">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="applicantId" name="applicant_id">
                    <input type="hidden" id="jobId" name="job_id">
                    <div class="mb-3">
                        <label for="statusSelect" class="form-label">Select Status</label>
                        <select id="statusSelect" name="status" class="form-select" required>
                            <option value="" disabled>Select Status</option>
                            <option value="applied">Applied</option>
                            <option value="shortlisted">Shortlist</option>
                            <option value="rejected">Reject</option>
                        </select>
                    </div>
                    <p class="text-muted small">
                        <em>Note: Once updated, the applicant will be informed via email about this change.</em>
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Scripts -->
<script>
document.addEventListener('DOMContentLoaded', function() {

    const statusModal = new bootstrap.Modal(document.getElementById('statusModal'));
    const statusForm = document.getElementById('statusForm');

    document.querySelectorAll('.update-status-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.getElementById('applicantId').value = this.dataset.applicant;
            document.getElementById('jobId').value = this.dataset.job;
            document.getElementById('statusSelect').value = this.dataset.current ?? '';
            statusModal.show();
        });
    });

    statusForm.addEventListener('submit', function(e) {
        e.preventDefault();

        const applicant_id = document.getElementById('applicantId').value;
        const job_id = document.getElementById('jobId').value;
        const status = document.getElementById('statusSelect').value;

        if (!status) return;

        // Show disclaimer before submitting
        Swal.fire({
            title: 'Confirm Status Update',
            html: `You are about to update the applicant's status to <strong>${status}</strong>.<br><br>
                   <em>Note: The applicant will be informed via email about this update.</em>`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#28a745',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, update it!'
        }).then(result => {
            if (result.isConfirmed) {

                // Proceed with the update
                fetch('{{ route("hr.applicants.status.update") }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        applicant_id: applicant_id,
                        job_id: job_id,
                        status: status
                    })
                })
                .then(res => {
                    if(res.status === 403){
                        Swal.fire('Forbidden', 'You do not have permission to update.', 'error');
                        throw 'Permission denied';
                    }
                    return res.json();
                })
                .then(res => {
                    if(res.success){
                        const row = document.querySelector(`.update-status-btn[data-applicant="${applicant_id}"][data-job="${job_id}"]`).closest('.position-row');
                        const badge = row.querySelector('.status-badge');
                        badge.textContent = res.status.charAt(0).toUpperCase() + res.status.slice(1);
                        badge.className = 'status-badge badge px-2 py-1 ' + (res.status === 'shortlisted' ? 'bg-success' : (res.status === 'rejected' ? 'bg-danger' : 'bg-secondary'));
                        statusModal.hide();
                        Swal.fire('Updated!', `Applicant status updated to ${res.status}.`, 'success');
                    }
                })
                .catch(err => console.log(err));
            }
        });

    });

});

</script>

@endsection