@extends('admin.layouts.app')

@section('title', 'Chi tiết ứng viên')
@section('page-title', 'Chi tiết ứng viên')

@section('content')
    <div class="container mx-auto px-4 py-6 max-w-7xl">
        <!-- Header -->
        <div class="flex justify-between items-center mb-6">
            <div>
                <a href="{{ route('admin.applicants.index') }}"
                    class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Quay lại
                </a>
            </div>
        </div>

        <!-- Success Message -->
        {{-- @if (session('success'))
        <div class="mb-6 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
            <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        </div>
    @endif --}}

        <!-- Header Section -->
        <div class="mb-6">
            <div class="bg-white rounded-xl shadow-lg border border-gray-100">
                <div class="p-6">
                    <div class="flex justify-between items-start flex-wrap gap-4">
                        <div class="flex items-start gap-4">
                            <div>
                                <h1 class="text-3xl font-bold text-gray-900 mb-2">{{ $applicant->fist_name }}
                                    {{ $applicant->last_name }}</h1>
                                <p class="text-gray-600 mb-3">Email: {{ $applicant->email }}</p>
                                <div class="flex items-center gap-3 flex-wrap">
                                    <span
                                        class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $applicant->status_badge }}">
                                        {{ $applicant->status_label }}
                                    </span>
                                    <span class="text-gray-500 text-sm">
                                        <i class="fas fa-calendar mr-1"></i>
                                        Ứng tuyển {{ $applicant->created_at->format('d/m/Y') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="flex gap-2 flex-wrap">
                            @if ($applicant->resume_path)
                                <a href="{{ route('admin.applicants.view-resume', $applicant) }}" target="_blank"
                                    class="inline-flex items-center px-4 py-2 border border-green-600 text-green-600 rounded-lg text-sm font-medium hover:bg-green-50 transition-colors">
                                    <i class="fas fa-eye mr-2"></i>Xem CV
                                </a>
                                <a href="{{ route('admin.applicants.download-resume', $applicant) }}" target="_blank"
                                    class="inline-flex items-center px-4 py-2 border border-blue-600 text-blue-600 rounded-lg text-sm font-medium hover:bg-blue-50 transition-colors">
                                    <i class="fas fa-download mr-2"></i>Tải CV
                                </a>
                            @else
                                <span
                                    class="inline-flex items-center px-4 py-2 border border-gray-300 text-gray-500 rounded-lg text-sm font-medium">
                                    <i class="fas fa-file mr-2"></i>Không có CV
                                </span>
                            @endif
                            <button onclick="openEmailModal()"
                                class="inline-flex items-center px-4 py-2 border border-cyan-600 text-cyan-600 rounded-lg text-sm font-medium hover:bg-cyan-50 transition-colors">
                                <i class="fas fa-envelope mr-2"></i>Gửi email
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <!-- Left Column -->
            <div class="lg:col-span-8 space-y-6">
                <!-- Personal Information -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                    <div class="border-b border-gray-100 px-6 py-4">
                        <h5 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-user-circle text-blue-600 mr-2"></i>Thông tin cá nhân
                        </h5>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <div class="mb-4">
                                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Số
                                        điện thoại</label>
                                    <p class="text-gray-900">{{ $applicant->phone ?? 'Chưa cập nhật' }}</p>
                                </div>
                                <div class="mb-4">
                                    <label
                                        class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Trạng
                                        thái</label>
                                    <p class="text-gray-900">
                                        <span
                                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ $applicant->status_badge }}">
                                            {{ $applicant->status_label }}
                                        </span>
                                    </p>
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Ngày
                                        ứng tuyển</label>
                                    <p class="text-gray-900">{{ $applicant->created_at->format('d/m/Y H:i') }}</p>
                                </div>
                            </div>
                            <div>
                                <div class="mb-4">
                                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Vị
                                        trí ứng tuyển</label>
                                    <p class="text-gray-900">{{ $applicant->jobPosition->title ?? 'N/A' }}</p>
                                </div>
                                <div class="mb-4">
                                    <label
                                        class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Phòng
                                        ban</label>
                                    <p class="text-gray-900">{{ $applicant->jobPosition->department ?? 'N/A' }}</p>
                                </div>
                                <div class="mb-4">
                                    <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Ghi
                                        chú</label>
                                    <p class="text-gray-900">{{ $applicant->notes ?? 'Chưa có ghi chú' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Cover Letter -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                    <div class="border-b border-gray-100 px-6 py-4">
                        <h5 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-envelope text-blue-600 mr-2"></i>Thư xin việc
                        </h5>
                    </div>
                    <div class="p-6">
                        <div class="text-gray-700 leading-relaxed">
                            {{ $applicant->cover_letter ?? 'Chưa có thư xin việc' }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Sidebar -->
            <div class="lg:col-span-4 space-y-6">
                <!-- Job Position Info -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                    <div class="border-b border-gray-100 px-6 py-4">
                        <h5 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-briefcase text-blue-600 mr-2"></i>Vị trí ứng tuyển
                        </h5>
                    </div>
                    <div class="p-6">
                        <h6 class="text-blue-600 font-semibold mb-4">{{ $applicant->jobPosition->title ?? 'N/A' }}</h6>
                        <div class="space-y-3 mb-4">
                            <div class="flex items-center text-gray-600">
                                <i class="fas fa-building text-gray-400 mr-3 w-4"></i>
                                <span>{{ $applicant->jobPosition->department ?? 'N/A' }}</span>
                            </div>
                            <div class="flex items-center text-gray-600">
                                <i class="fas fa-map-marker-alt text-gray-400 mr-3 w-4"></i>
                                <span>{{ $applicant->jobPosition->location ?? 'N/A' }}</span>
                            </div>
                            <div class="flex items-center text-gray-600">
                                <i class="fas fa-clock text-gray-400 mr-3 w-4"></i>
                                <span>{{ $applicant->jobPosition->employment_type_label ?? 'N/A' }}</span>
                            </div>
                        </div>
                        <a href="{{ route('admin.job-positions.show', $applicant->jobPosition) }}"
                            class="block w-full text-center px-4 py-2 border border-blue-600 text-blue-600 rounded-lg text-sm font-medium hover:bg-blue-50 transition-colors">
                            <i class="fas fa-eye mr-1"></i>Xem chi tiết vị trí
                        </a>
                    </div>
                </div>

                <!-- Application Status -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                    <div class="border-b border-gray-100 px-6 py-4">
                        <h5 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-chart-line text-blue-600 mr-2"></i>Trạng thái ứng tuyển
                        </h5>
                    </div>
                    <div class="p-6">
                        <div class="timeline-simple">
                            <div class="timeline-item-simple">
                                <div class="timeline-marker-simple bg-primary"></div>
                                <div class="timeline-content-simple">
                                    <h6 class="font-semibold text-gray-900 mb-1">Nộp hồ sơ</h6>
                                    <p class="text-gray-500 text-sm">{{ $applicant->created_at->format('d/m/Y H:i') }}</p>
                                </div>
                            </div>
                            @if ($applicant->updated_at != $applicant->created_at)
                                <div class="timeline-item-simple">
                                    <div class="timeline-marker-simple bg-info"></div>
                                    <div class="timeline-content-simple">
                                        <h6 class="font-semibold text-gray-900 mb-1">Cập nhật trạng thái</h6>
                                        <p class="text-gray-500 text-sm">{{ $applicant->updated_at->format('d/m/Y H:i') }}
                                        </p>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="bg-white rounded-xl shadow-sm border border-gray-100">
                    <div class="border-b border-gray-100 px-6 py-4">
                        <h5 class="text-lg font-semibold text-gray-900">
                            <i class="fas fa-bolt text-blue-600 mr-2"></i>Hành động nhanh
                        </h5>
                    </div>
                    <div class="p-6">
                        <!-- Status Update -->
                        <div class="mb-6">
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Cập nhật
                                trạng thái</label>
                            <form method="POST" action="{{ route('admin.applicants.update-status', $applicant) }}">
                                @csrf
                                <div class="grid grid-cols-3 gap-2">
                                    <button type="submit" name="status" value="new"
                                        class="px-3 py-2 border border-blue-500 text-blue-600 rounded-lg text-sm font-medium hover:bg-blue-50 transition-colors">
                                        <i class="fas fa-plus mr-1"></i>Mới
                                    </button>
                                    <button type="submit" name="status" value="hired"
                                        class="px-3 py-2 border border-green-500 text-green-600 rounded-lg text-sm font-medium hover:bg-green-50 transition-colors">
                                        <i class="fas fa-check mr-1"></i>Tuyển
                                    </button>
                                    <button type="submit" name="status" value="rejected"
                                        class="px-3 py-2 border border-red-500 text-red-600 rounded-lg text-sm font-medium hover:bg-red-50 transition-colors">
                                        <i class="fas fa-times mr-1"></i>Từ chối
                                    </button>
                                </div>
                            </form>
                        </div>

                        <!-- File Downloads -->
                        <div>
                            <label class="block text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Tải tài
                                liệu</label>
                            <div class="space-y-2">
                                @if ($applicant->resume_path)
                                    <a href="{{ route('admin.applicants.view-resume', $applicant) }}" target="_blank"
                                        class="block w-full text-center px-4 py-2 border border-green-600 text-green-600 rounded-lg text-sm font-medium hover:bg-green-50 transition-colors">
                                        <i class="fas fa-eye mr-1"></i>Xem CV/Resume
                                    </a>
                                    <a href="{{ route('admin.applicants.download-resume', $applicant) }}" target="_blank"
                                        class="block w-full text-center px-4 py-2 border border-blue-600 text-blue-600 rounded-lg text-sm font-medium hover:bg-blue-50 transition-colors">
                                        <i class="fas fa-download mr-1"></i>Tải CV/Resume
                                    </a>
                                @else
                                    <p class="text-gray-500 text-sm text-center">Không có CV/Resume</p>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .timeline-simple {
            position: relative;
            padding-left: 2rem;
        }

        .timeline-item-simple {
            position: relative;
            padding-bottom: 1.5rem;
        }

        .timeline-item-simple:not(:last-child)::before {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: 0.5rem;
            bottom: -1rem;
            width: 2px;
            background: #e5e7eb;
        }

        .timeline-marker-simple {
            position: absolute;
            left: -1.75rem;
            top: 0.25rem;
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 0 0 2px currentColor;
        }

        .timeline-marker-simple.bg-primary {
            background: #3b82f6;
            color: #3b82f6;
        }

        .timeline-marker-simple.bg-info {
            background: #06b6d4;
            color: #06b6d4;
        }

        .timeline-marker-simple.bg-warning {
            background: #f59e0b;
            color: #f59e0b;
        }
    </style>

    <!-- Email Modal -->
    <div id="emailModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden">
        <div class="relative top-20 mx-auto p-5 border shadow-lg rounded-md bg-white" style="width: 50%;">
            <div class="mt-3">
                <!-- Modal Header -->
                <div class="flex items-center justify-between pb-3 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        <i class="fas fa-envelope text-cyan-600 mr-2"></i>Gửi email cho {{ $applicant->first_name }}
                        {{ $applicant->last_name }}
                    </h3>
                    <button onclick="closeEmailModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <!-- Modal Body -->
                <div class="mt-4">
                    <form id="emailForm" class="space-y-4">
                        @csrf
                        <input type="hidden" name="applicant_id" value="{{ $applicant->id }}">

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Gửi đến</label>
                            <input type="email" name="to_email" value="{{ $applicant->email }}" readonly
                                class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-600">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Tiêu đề</label>
                            <input type="text" name="subject" id="emailSubject" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-cyan-500 focus:border-cyan-500"
                                placeholder="Nhập tiêu đề email...">
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nội dung</label>
                            <textarea name="message" id="emailMessage" rows="6" required
                                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-cyan-500 focus:border-cyan-500"
                                placeholder="Nhập nội dung email..."></textarea>
                        </div>

                        <!-- Template Buttons -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Mẫu email nhanh</label>
                            <div class="grid grid-cols-2 gap-2">
                                <button type="button" onclick="loadTemplate('interview')"
                                    class="px-3 py-2 bg-blue-100 text-blue-700 rounded-md text-sm hover:bg-blue-200 transition-colors">
                                    <i class="fas fa-calendar mr-1"></i>Mời phỏng vấn
                                </button>
                                <button type="button" onclick="loadTemplate('reject')"
                                    class="px-3 py-2 bg-red-100 text-red-700 rounded-md text-sm hover:bg-red-200 transition-colors">
                                    <i class="fas fa-times mr-1"></i>Từ chối
                                </button>
                                <button type="button" onclick="loadTemplate('hired')"
                                    class="px-3 py-2 bg-green-100 text-green-700 rounded-md text-sm hover:bg-green-200 transition-colors">
                                    <i class="fas fa-check mr-1"></i>Chúc mừng
                                </button>
                                <button type="button" onclick="loadTemplate('info')"
                                    class="px-3 py-2 bg-gray-100 text-gray-700 rounded-md text-sm hover:bg-gray-200 transition-colors">
                                    <i class="fas fa-info mr-1"></i>Thông tin
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Modal Footer -->
                <div class="flex justify-end space-x-3 mt-6 pt-4 border-t border-gray-200">
                    <button onclick="closeEmailModal()"
                        class="px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors">
                        Hủy
                    </button>
                    <button onclick="sendEmail()" id="sendEmailBtn"
                        class="px-4 py-2 bg-blue-600 text-white rounded-md  transition-colors">
                        <i class="fas fa-paper-plane mr-2"></i>
                        <span id="sendBtnText">Gửi email</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function openEmailModal() {
            document.getElementById('emailModal').classList.remove('hidden');
            document.getElementById('emailSubject').focus();
        }

        function closeEmailModal() {
            document.getElementById('emailModal').classList.add('hidden');
            document.getElementById('emailForm').reset();
        }

        function loadTemplate(type) {
            const subjectField = document.getElementById('emailSubject');
            const messageField = document.getElementById('emailMessage');

            const templates = {
                interview: {
                    subject: 'Mời phỏng vấn - {{ $applicant->jobPosition->title ?? 'Vị trí ứng tuyển' }}',
                    message: `Xin chào {{ $applicant->first_name }} {{ $applicant->last_name }},
                        Cảm ơn bạn đã quan tâm đến vị trí {{ $applicant->jobPosition->title ?? 'tại công ty chúng tôi' }}.

                        Chúng tôi rất ấn tượng với hồ sơ của bạn và muốn mời bạn đến phỏng vấn.

                        Thời gian: {{ \Carbon\Carbon::now()->addDays(2)->format('d/m/Y') }}
                        Địa điểm: 14c Ng. 89 Đ. Lê Đức Thọ, Mỹ Đình, Từ Liêm, Hà Nội, Vietnam
                        Người phụ trách: chiennq@lvtapp.com

                        Vui lòng xác nhận tham gia phỏng vấn qua email này.

                        Trân trọng,
                        Bộ phận Nhân sự
                        LVT Global Technologies Group`
                },
                reject: {
                    subject: 'Thông báo kết quả ứng tuyển - {{ $applicant->jobPosition->title ?? 'Vị trí ứng tuyển' }}',
                    message: `Xin chào {{ $applicant->first_name }} {{ $applicant->last_name }},

Cảm ơn bạn đã quan tâm đến vị trí {{ $applicant->jobPosition->title ?? 'tại công ty chúng tôi' }}.

Sau khi xem xét kỹ lưỡng, chúng tôi rất tiếc phải thông báo rằng chúng tôi đã lựa chọn ứng viên khác phù hợp hơn cho vị trí này.

Chúng tôi đánh giá cao sự quan tâm của bạn và hy vọng có cơ hội hợp tác trong tương lai.

Trân trọng,
Bộ phận Nhân sự
LVT Global Technologies Group`
                },
                hired: {
                    subject: 'Chúc mừng! Bạn đã được tuyển dụng - {{ $applicant->jobPosition->title ?? 'Vị trí ứng tuyển' }}',
                    message: `Xin chào {{ $applicant->first_name }} {{ $applicant->last_name }},

Chúc mừng bạn! Chúng tôi rất vui mừng thông báo rằng bạn đã được chọn cho vị trí {{ $applicant->jobPosition->title ?? 'tại công ty chúng tôi' }}.

Chúng tôi sẽ liên hệ với bạn trong thời gian sớm nhất để thảo luận về các bước tiếp theo.

Chào mừng bạn đến với gia đình LVT Global Technologies Group!

Trân trọng,
Bộ phận Nhân sự
LVT Global Technologies Group`
                },
                info: {
                    subject: 'Thông tin bổ sung về ứng tuyển',
                    message: `Xin chào {{ $applicant->first_name }} {{ $applicant->last_name }},

Cảm ơn bạn đã quan tâm đến vị trí {{ $applicant->jobPosition->title ?? 'tại công ty chúng tôi' }}.

Chúng tôi cần một số thông tin bổ sung từ bạn:

[Vui lòng điền thông tin cần thiết]

Vui lòng phản hồi trong thời gian sớm nhất.

Trân trọng,
Bộ phận Nhân sự
LVT Global Technologies Group`
                }
            };

            if (templates[type]) {
                subjectField.value = templates[type].subject;
                messageField.value = templates[type].message;
            }
        }

        function sendEmail() {
            const form = document.getElementById('emailForm');
            const btn = document.getElementById('sendEmailBtn');
            const btnText = document.getElementById('sendBtnText');

            // Validation
            const subject = document.getElementById('emailSubject').value;
            const message = document.getElementById('emailMessage').value;

            if (!subject || !message) {
                alert('Vui lòng điền đầy đủ tiêu đề và nội dung email!');
                return;
            }

            // Show loading state
            btn.disabled = true;
            btnText.textContent = 'Đang gửi...';
            btn.classList.add('opacity-50', 'cursor-not-allowed');

            // Create form data
            const formData = new FormData(form);

            // Send AJAX request
            fetch('{{ route('admin.applicants.send-email', $applicant) }}', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        alert('✅ Email đã được gửi thành công!');
                        closeEmailModal();
                    } else {
                        alert('❌ Lỗi: ' + (data.message || 'Có lỗi xảy ra khi gửi email'));
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('❌ Lỗi kết nối: ' + error.message);
                })
                .finally(() => {
                    // Reset button state
                    btn.disabled = false;
                    btnText.textContent = 'Gửi email';
                    btn.classList.remove('opacity-50', 'cursor-not-allowed');
                });
        }
    </script>
@endsection