{% extends "base.html" %}

{% block title %}Job Seeker Dashboard{% endblock %}

{% block content %}
<div class="row g-4">
    <!-- LEFT COLUMN (Sidebar) -->
    <div class="col-12 col-md-4 col-lg-3">
        <!-- Profile Completion Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-body text-center">
                <h5>Profile Completion</h5>
                <div class="progress mb-2" style="height: 25px;">
                    <div class="progress-bar" style="width: {{ completeness }}%">{{ completeness }}%</div>
                </div>
                <div class="d-flex flex-wrap justify-content-center gap-2">
                    {% if completeness < 100 %}
                        <a href="{{ url_for('edit_profile') }}" class="btn btn-warning btn-sm">Complete Profile</a>
                    {% else %}
                        <span class="badge bg-success py-2">Ready to Apply!</span>
                    {% endif %}
                    <a href="{{ url_for('edit_profile') }}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-edit"></i> Edit Profile
                    </a>
                </div>
            </div>
        </div>

        <!-- Companies I Follow Card -->
        <div class="card shadow-sm">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-building"></i> Companies I Follow</h5>
            </div>
            <div class="card-body p-2">
                {% if interested_companies %}
                    <div class="list-group list-group-flush">
                        {% for company in interested_companies %}
                            <div class="list-group-item d-flex justify-content-between align-items-center px-2 py-2">
                                <span class="fw-bold">{{ company.name }}</span>
                                <a href="{{ url_for('remove_company_interest', company_id=company.id) }}" 
                                   class="btn btn-sm btn-danger"
                                   onclick="return confirm('Stop following {{ company.name }}?')">
                                    <i class="fas fa-trash-alt"></i> Remove
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-muted mb-2">No companies followed yet.</p>
                {% endif %}
                <a href="{{ url_for('add_company_interest') }}" class="btn btn-outline-primary w-100 mt-3">
                    <i class="fas fa-plus-circle"></i> Follow a Company
                </a>
            </div>
        </div>
    </div>

    <!-- RIGHT COLUMN (Jobs Table) -->
    <div class="col-12 col-md-8 col-lg-9">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white d-flex flex-wrap justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-briefcase"></i> Jobs Matching Your Categories</h5>
                <span class="badge bg-light text-dark mt-2 mt-sm-0">{{ jobs|length }} jobs found</span>
            </div>
            <div class="card-body p-0">
                {% if jobs %}
                    <div class="table-responsive">
                        <table class="table table-striped table-hover mb-0 w-100" id="jobsTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Title</th>
                                    <th>Company</th>
                                    <th>Category</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for job in jobs %}
                                <tr>
                                    <td class="fw-bold">
                                        <a href="{{ url_for('view_job_post', job_id=job.id) }}" class="text-decoration-none">
                                            {{ job.title }}
                                        </a>
                                    </td>
                                    <td>
                                        {% if job.is_linked and job.company %}
                                            {{ job.company.name }}
                                        {% elif job.manual_company_name %}
                                            {{ job.manual_company_name }}
                                        {% else %}
                                            Confidential
                                        {% endif %}
                                    </td>
                                    <td><span class="badge bg-secondary">{{ job.category.name }}</span></td>
                                    <td>
                                        {% if job.status == 'Active' %}
                                            <span class="badge bg-success">Active</span>
                                        {% elif job.status == 'Closed' %}
                                            <span class="badge bg-danger">Closed</span>
                                        {% else %}
                                            <span class="badge bg-warning text-dark">Draft</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if job.id in applied_jobs %}
                                            <span class="badge bg-secondary"><i class="fas fa-check-circle"></i> Applied</span>
                                        {% elif completeness == 100 and job.status == 'Active' %}
                                            <button class="btn btn-sm btn-success apply-btn" 
                                                    data-job-id="{{ job.id }}" 
                                                    data-job-title="{{ job.title|escape }}">
                                                <i class="fas fa-paper-plane"></i> Apply Now
                                            </button>
                                        {% else %}
                                            <button class="btn btn-sm btn-secondary" disabled>
                                                <i class="fas fa-lock"></i> Not Available
                                            </button>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="alert alert-info m-3 text-center">
                        <i class="fas fa-info-circle"></i> No jobs match your categories. 
                        <a href="{{ url_for('edit_profile') }}">Update your categories</a> or 
                        <a href="{{ url_for('add_company_interest') }}">follow companies</a>.
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Apply Modal with Drag & Drop -->
<div class="modal fade" id="applyModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="fas fa-paper-plane"></i> Apply for Job</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <form method="POST" enctype="multipart/form-data" id="applyForm">
                <div class="modal-body">
                    <p>You are applying for: <strong id="jobTitle" class="text-primary"></strong></p>
                    <div class="mb-3">
                        <label class="form-label fw-bold">Optional Cover Letter</label>
                        <div class="dropzone p-3 text-center border rounded bg-light" 
                             id="coverLetterDropzone" 
                             style="border: 2px dashed #ccc; cursor: pointer;">
                            <i class="fas fa-cloud-upload-alt fa-3x text-muted"></i>
                            <p class="mb-0 mt-2">Drag & drop or click to upload</p>
                            <p class="small text-muted">PDF, DOC, DOCX</p>
                            <input type="file" name="cover_letter" id="coverLetterInput" accept=".pdf,.doc,.docx" style="display:none;">
                        </div>
                        <small class="text-muted">If not provided, your generic cover letter will be used.</small>
                    </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>

<!-- CSS for mobile optimizations -->
<style>
    /* Responsive table adjustments */
    @media (max-width: 768px) {
        .table th, .table td {
            font-size: 0.85rem;
            padding: 0.5rem;
        }
        .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }
        .progress {
            height: 20px;
        }
        .progress-bar {
            font-size: 0.75rem;
            line-height: 20px;
        }
    }
    /* Make job titles wrap properly */
    .table td:first-child {
        word-break: break-word;
        min-width: 120px;
    }
    /* Improve dropzone visual feedback */
    .dropzone.drag-over {
        border-color: #0d6efd;
        background-color: rgba(13,110,253,0.05);
    }
</style>

{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // Initialize DataTable with responsive options
    $('#jobsTable').DataTable({
        responsive: true,
        pageLength: 10,
        order: [[0, 'asc']],
        language: {
            search: "Filter:",
            lengthMenu: "Show _MENU_ jobs",
            info: "Showing _START_ to _END_ of _TOTAL_ jobs",
            paginate: {
                first: "First",
                last: "Last",
                next: "→",
                previous: "←"
            }
        },
        // For small screens, make table scroll horizontally
        scrollX: true,
        autoWidth: false
    });

    // Apply modal function (used by data‑job‑id attributes)
    $('.apply-btn').click(function() {
        var jobId = $(this).data('job-id');
        var jobTitle = $(this).data('job-title');
        $('#jobTitle').text(jobTitle);
        $('#applyForm').attr('action', '/job-seeker/apply/' + jobId);
        $('#applyModal').modal('show');
    });
});

// Drag & drop for cover letter modal
const dropzone = document.getElementById('coverLetterDropzone');
const fileInput = document.getElementById('coverLetterInput');

function updateDropzoneText(files) {
    if (files && files.length > 0) {
        dropzone.innerHTML = `<i class="fas fa-file-alt fa-3x text-success"></i>
                              <p class="mb-0 mt-2"><strong>${files[0].name}</strong></p>
                              <p class="small text-muted">Click or drag to replace</p>
                              <input type="file" name="cover_letter" id="coverLetterInput" accept=".pdf,.doc,.docx" style="display:none;">`;
        // Re‑attach the file input reference because innerHTML replaced it
        const newInput = dropzone.querySelector('#coverLetterInput');
        if (newInput) {
            newInput.addEventListener('change', function(e) {
                updateDropzoneText(e.target.files);
            });
        }
    } else {
        dropzone.innerHTML = `<i class="fas fa-cloud-upload-alt fa-3x text-muted"></i>
                              <p class="mb-0 mt-2">Drag & drop or click to upload</p>
                              <p class="small text-muted">PDF, DOC, DOCX</p>
                              <input type="file" name="cover_letter" id="coverLetterInput" accept=".pdf,.doc,.docx" style="display:none;">`;
        const newInput = dropzone.querySelector('#coverLetterInput');
        if (newInput) {
            newInput.addEventListener('change', function(e) {
                updateDropzoneText(e.target.files);
            });
        }
    }
}

dropzone.addEventListener('click', function() {
    const input = fileInput || dropzone.querySelector('#coverLetterInput');
    if (input) input.click();
});

dropzone.addEventListener('dragover', function(e) {
    e.preventDefault();
    dropzone.classList.add('drag-over');
});

dropzone.addEventListener('dragleave', function(e) {
    e.preventDefault();
    dropzone.classList.remove('drag-over');
});

dropzone.addEventListener('drop', function(e) {
    e.preventDefault();
    dropzone.classList.remove('drag-over');
    const files = e.dataTransfer.files;
    if (files.length > 0) {
        const input = fileInput || dropzone.querySelector('#coverLetterInput');
        if (input) {
            input.files = files;
            updateDropzoneText(files);
        }
    }
});

// Attach initial file input change event
if (fileInput) {
    fileInput.addEventListener('change', function(e) {
        updateDropzoneText(e.target.files);
    });
}

// Ensure any dynamically added input also gets event
document.addEventListener('DOMContentLoaded', function() {
    const initialInput = document.getElementById('coverLetterInput');
    if (initialInput) {
        initialInput.addEventListener('change', function(e) {
            updateDropzoneText(e.target.files);
        });
    }
});
</script>
{% endblock %}