{% extends "base.html" %}

{% block title %}{{ job.title }} – Workforce{% endblock %}

{% block content %}
{% set badge = get_deadline_badge(job.deadline) if job.deadline else None %}
{% set days_left = (job.deadline - today).days if job.deadline and job.deadline >= today else None %}

<div class="job-detail-container">
    <!-- Sticky Header with Company Name and Apply Button -->
    <div class="sticky-top bg-white shadow-sm py-3 mb-4" style="background-color: #ffffff !important; border-bottom: 1px solid #e9ecef;">
        <div class="container d-flex flex-wrap justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
                {% if job.is_linked and job.company and job.company.logo_path %}
                    <img src="{{ url_for('static', filename='uploads/'+job.company.logo_path) }}" alt="{{ job.company.name }}" style="height: 50px; width: auto;">
                {% elif not job.is_linked and job.manual_company_logo %}
                    <img src="{{ url_for('static', filename='uploads/'+job.manual_company_logo) }}" alt="{{ job.manual_company_name }}" style="height: 50px; width: auto;">
                {% else %}
                    <i class="fas fa-building fa-2x text-muted"></i>
                {% endif %}
                <div>
                    
                    <h4 class="mb-0">{{ job.title }}</h4>{% if match_score > 0 %}
    <span class="badge bg-info ms-2">Match: {{ match_score }}%</span>
{% endif %}
                    <div class="text-muted small">
                        {% if job.is_linked and job.company %}{{ job.company.name }}{% elif job.manual_company_name %}{{ job.manual_company_name }}{% else %}Confidential{% endif %}
                        {% if badge %}
                            <span class="badge bg-{{ badge[1] }} ms-2">{{ badge[0] }}</span>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="mt-2 mt-sm-0">
                {% if can_apply %}
                    <button class="btn btn-success btn-lg" data-bs-toggle="modal" data-bs-target="#applyModal">
                        <i class="fas fa-paper-plane"></i> Apply Now
                    </button>
                {% elif current_user.is_authenticated and current_user.role == 'job_seeker' %}
                    <button class="btn btn-secondary btn-lg" disabled>Complete Profile to Apply</button>
                {% else %}
                    <a href="{{ url_for('job_seeker_login', next=next_url) }}" class="btn btn-outline-primary btn-lg">
                        Login to Apply
                    </a>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row g-4">
            <!-- MAIN CONTENT (Left column) -->
            <div class="col-lg-8">
                <!-- Job Description Card -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-body p-4">
                        <h5 class="card-title fw-bold mb-3"><i class="fas fa-align-left text-primary me-2"></i> Job Description</h5>
                        <div class="job-description">
                            {{ job.description|safe }}
                        </div>
                    </div>
                </div>
            </div>

            <!-- RIGHT SIDEBAR -->
            <div class="col-lg-4">
                <!-- Company Profile Card (with expandable description) -->
                <div class="card shadow-sm border-0 mb-4">
                    <div class="card-header bg-white border-0 pt-4 text-center">
                        {% if job.is_linked and job.company and job.company.logo_path %}
                            <img src="{{ url_for('static', filename='uploads/'+job.company.logo_path) }}" alt="{{ job.company.name }}" style="max-height: 80px; width: auto;">
                        {% elif not job.is_linked and job.manual_company_logo %}
                            <img src="{{ url_for('static', filename='uploads/'+job.manual_company_logo) }}" alt="{{ job.manual_company_name }}" style="max-height: 80px; width: auto;">
                        {% else %}
                            <i class="fas fa-building fa-3x text-muted"></i>
                        {% endif %}
                        <h5 class="mt-3 mb-0">
                            {% if job.is_linked and job.company %}{{ job.company.name }}{% elif job.manual_company_name %}{{ job.manual_company_name }}{% else %}Confidential{% endif %}
                        </h5>
                        <div class="text-muted small mt-1">Since {{ job.created_at.year }}</div>
                    </div>
                    <div class="card-body">
                        <div class="company-info">
                            <p><i class="fas fa-envelope text-primary me-2"></i> 
                                {% if job.is_linked and job.company %}{{ job.company.email }}{% else %}–{% endif %}
                            </p>
                            <p><i class="fas fa-phone-alt text-primary me-2"></i> 
                                {% if job.is_linked and job.company and job.company.phone %}{{ job.company.phone }}{% else %}Not provided{% endif %}
                            </p>
                            <p><i class="fas fa-map-marker-alt text-primary me-2"></i> 
                                {% if job.is_linked and job.company and job.company.address %}{{ job.company.address }}{% elif not job.is_linked and job.manual_company_address %}{{ job.manual_company_address }}{% else %}–{% endif %}
                            </p>
                        </div>
                        {% if company_description %}
                            <hr>
                            <div class="company-description">
                                <div id="companyDescShort" class="short-text">{{ company_description|striptags|truncate(120) }}</div>
                                <div id="companyDescFull" class="full-text" style="display: none;">{{ company_description|safe }}</div>
                                <button id="toggleDescBtn" class="btn btn-link btn-sm p-0 mt-1 text-primary">Read more</button>
                            </div>
                        {% endif %}
                    </div>
                </div>

                <!-- Recommended Jobs -->
                {% if recommended_jobs %}
                <div class="card shadow-sm border-0">
                    <div class="card-header bg-white border-0 pt-4">
                        <h5 class="mb-0"><i class="fas fa-star text-warning me-2"></i> Recommended for you</h5>
                    </div>
                    <div class="card-body p-0">
                        <div class="list-group list-group-flush">
                            {% for rec in recommended_jobs %}
                            <a href="{{ url_for('view_job_post', job_id=rec.id, next=request.full_path) }}" class="list-group-item list-group-item-action d-flex gap-3 py-3">
                                <div class="flex-shrink-0">
                                    {% if rec.is_linked and rec.company and rec.company.logo_path %}
                                        <img src="{{ url_for('static', filename='uploads/'+rec.company.logo_path) }}" style="height: 40px; width: auto;">
                                    {% else %}
                                        <i class="fas fa-building fa-2x text-muted"></i>
                                    {% endif %}
                                </div>
                                <div class="flex-grow-1">
                                    <h6 class="mb-1">{{ rec.title }}</h6>
                                    <small class="text-muted">
                                        {{ rec.company.name if rec.is_linked and rec.company else rec.manual_company_name or 'Confidential' }}
                                    </small>
                                </div>
                                <i class="fas fa-chevron-right text-primary align-self-center"></i>
                            </a>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Apply Modal (with optional cover letter) -->
<div class="modal fade" id="applyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Apply for {{ job.title }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" action="{{ url_for('apply_for_job', job_id=job.id) }}" enctype="multipart/form-data">
                <input type="hidden" name="next" value="{{ next_url }}">
                <div class="modal-body">
                    <p>You are applying as <strong>{{ current_user.full_name if current_user.is_authenticated else 'Job Seeker' }}</strong>.</p>
                    <div class="mb-3">
                        <label class="form-label">Optional Cover Letter (PDF/DOC)</label>
                        <div class="dropzone" id="modalCoverDropzone" style="border: 2px dashed #ccc; padding: 20px; text-align: center; cursor: pointer;">
                            <i class="fas fa-cloud-upload-alt fa-2x"></i>
                            <p>Drag & drop or click to upload</p>
                            <input type="file" name="cover_letter" id="modalCoverInput" accept=".pdf,.doc,.docx" style="display:none;">
                        </div>
                    </div>
                </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">Submit Application</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .job-detail-container .card {
        border-radius: 16px;
        transition: box-shadow 0.2s;
    }
    .job-detail-container .card:hover {
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }
    .job-description li {
        margin-bottom: 0.5rem;
    }
    .sticky-lg-top {
        position: sticky;
        top: 100px;
    }
    .company-description .full-text img {
        max-width: 100%;
        height: auto;
    }

    .dropzone {
        transition: border-color 0.2s;
    }
    .dropzone.drag-over {
        border-color: #0d6efd;
        background-color: rgba(13,110,253,0.05);
    }
.sticky-top {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
}
/* Ensure the navbar also has proper z-index if needed */
.custom-navbar {
    z-index: 1040;
}
   /* Ensure sticky header touches the very top of viewport */
.sticky-top .container {
    padding-top: 0;
    margin-top: 0;
} 

@media (max-width: 576px) {
    .sticky-top .container {
        padding: 0.5rem 1rem;
    }
    .sticky-top .btn-lg {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
    }
}
</style>

<script>
// Toggle read more/less for company description
const shortDiv = document.getElementById('companyDescShort');
const fullDiv = document.getElementById('companyDescFull');
const toggleBtn = document.getElementById('toggleDescBtn');
if (toggleBtn && shortDiv && fullDiv) {
    toggleBtn.addEventListener('click', function() {
        if (fullDiv.style.display === 'none') {
            fullDiv.style.display = 'block';
            shortDiv.style.display = 'none';
            toggleBtn.textContent = 'Read less';
        } else {
            fullDiv.style.display = 'none';
            shortDiv.style.display = 'block';
            toggleBtn.textContent = 'Read more';
        }
    });
}

// Drag & drop for cover letter in modal
const dropzone = document.getElementById('modalCoverDropzone');
const fileInput = document.getElementById('modalCoverInput');
if (dropzone && fileInput) {
    dropzone.addEventListener('click', () => fileInput.click());
    dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('drag-over');
    });
    dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
    dropzone.addEventListener('drop', (e) => {
        e.preventDefault();
        dropzone.classList.remove('drag-over');
        const files = e.dataTransfer.files;
        if (files.length > 0) {
            fileInput.files = files;
            dropzone.innerHTML = '<i class="fas fa-file-alt fa-2x"></i><p>' + files[0].name + '</p>';
        }
    });
    fileInput.addEventListener('change', () => {
        if (fileInput.files.length > 0) {
            dropzone.innerHTML = '<i class="fas fa-file-alt fa-2x"></i><p>' + fileInput.files[0].name + '</p>';
        } else {
            dropzone.innerHTML = '<i class="fas fa-cloud-upload-alt fa-2x"></i><p>Drag & drop or click to upload</p>';
        }
    });
}
</script>
{% endblock %}