{% extends "base.html" %}

{% block title %}Employer Dashboard{% endblock %}

{% block content %}
<h2>Employer Dashboard</h2>
<ul class="nav nav-tabs" id="employerTabs" role="tablist">
    <li class="nav-item">
        <button class="nav-link active" id="jobs-tab" data-bs-toggle="tab" data-bs-target="#jobs" type="button" role="tab">My Job Posts</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" id="pool-tab" data-bs-toggle="tab" data-bs-target="#pool" type="button" role="tab">Ready Pool</button>
    </li>
    <li class="nav-item">
        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab">Company Profile</button>
    </li>
</ul>

<div class="tab-content mt-3">
    <!-- Tab 1: My Job Posts -->
    <div class="tab-pane fade show active" id="jobs" role="tabpanel">
        <a href="{{ url_for('employer_post_job') }}" class="btn btn-success mb-3">Post New Job</a>
        <div class="table-responsive">
            <table class="table table-striped datatable">
                <thead>
                    <tr>
                        <th>Title</th><th>Category</th><th>Status</th><th>Applicants</th><th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for job in job_posts %}
                    <tr>
                        <td>{{ job.title }}</td>
                        <td>{{ job.category.name }}</td>
                        <td>{{ job.status }}</td>
                        <td><span class="badge bg-secondary">{{ JobApplication.query.filter_by(job_post_id=job.id).count() }}</span></td>
<td>
    <a href="{{ url_for('view_applicants', job_id=job.id) }}" class="btn btn-sm btn-info">View Applicants</a>
    <a href="{{ url_for('employer_edit_job', job_id=job.id) }}" class="btn btn-sm btn-warning">Edit</a>
    <a href="{{ url_for('job_config', job_id=job.id) }}" class="btn btn-sm btn-secondary">Configurations</a>
    <form method="POST" action="{{ url_for('employer_delete_job', job_id=job.id) }}" style="display:inline;">
        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this job? All applications will be lost.')">Delete</button>
    </form>
</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Tab 2: Ready Pool -->
    <div class="tab-pane fade" id="pool" role="tabpanel">
        <div class="row mb-3">
            <div class="col-md-4">
                <select id="filterCategory" class="form-select">
                    <option value="all">All Categories</option>
                    {% for cat in categories %}
                    <option value="{{ cat.id }}">{{ cat.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <input type="number" id="filterCompleteness" class="form-control" placeholder="Min. Profile %">
            </div>
            <div class="col-md-4">
                <button class="btn btn-primary" id="applyFilter">Apply Filter</button>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-striped" id="readyPoolTable">
                <thead>
                    <tr><th>Name</th><th>Email</th><th>Phone</th><th>Profile %</th><th>Actions</th></tr>
                </thead>
                <tbody>
                    {% for candidate in interested_candidates %}
                    <tr>
                        <td>{{ candidate.user.full_name }}</td>
                        <td>{{ candidate.user.email }}</td>
                        <td>{{ candidate.phone }}</td>
                        <td><div class="progress"><div class="progress-bar" style="width: {{ candidate.completeness }}%">{{ candidate.completeness }}%</div></div></td>
                        <td><a href="{{ url_for('view_candidate', profile_id=candidate.id) }}" class="btn btn-sm btn-primary">View Profile</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Tab 3: Company Profile (read-only) -->
<!-- Tab 3: Company Profile (editable) -->
<div class="tab-pane fade" id="profile" role="tabpanel">
    <div class="card shadow-sm">
        <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
            <h4 class="mb-0"><i class="fas fa-building"></i> {{ company.name }}</h4>
            <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#editCompanyModal">
                <i class="fas fa-edit"></i> Edit Company Details
            </button>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3 text-center">
                    {% if company.logo_path %}
                        <img src="{{ url_for('static', filename='uploads/'+company.logo_path) }}" class="img-fluid rounded" style="max-height:120px;">
                    {% else %}
                        <i class="fas fa-building fa-4x text-muted"></i>
                    {% endif %}
                </div>
                <div class="col-md-9">
                    <p><strong>Email:</strong> {{ company.email }}</p>
                    <p><strong>Phone:</strong> {{ company.phone or 'Not provided' }}</p>
                    <p><strong>Address:</strong> {{ company.address or 'Not provided' }}</p>
                </div>
            </div>
            {% if company.description %}
                <hr>
                <h5>About the Company</h5>
                <div class="company-description">
                    {{ company.description|safe }}
                </div>
            {% endif %}
        </div>
        <div class="card-footer text-muted">
            Company registered on {{ company.created_at.strftime('%B %d, %Y') }}
        </div>
    </div>
</div>

<!-- Edit Company Modal -->
<div class="modal fade" id="editCompanyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('employer_edit_company') }}" enctype="multipart/form-data">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">Edit Company Details</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label>Company Name</label>
                        <input type="text" class="form-control" value="{{ company.name }}" disabled>
                        <small class="text-muted">Name cannot be changed – contact admin.</small>
                    </div>
                    <div class="mb-3">
                        <label>Email</label>
                        <input type="email" class="form-control" value="{{ company.email }}" disabled>
                    </div>
                    <div class="mb-3">
                        <label>Phone</label>
                        <input type="text" name="phone" class="form-control" value="{{ company.phone or '' }}">
                    </div>
                    <div class="mb-3">
                        <label>Address</label>
                        <textarea name="address" class="form-control" rows="3">{{ company.address or '' }}</textarea>
                    </div>
                    <div class="mb-3">
                        <label>Company Description (HTML allowed)</label>
                        <textarea name="description" id="editCompanyDesc" class="form-control" rows="5">{{ company.description or '' }}</textarea>
                        <small class="text-muted">You can use formatting like bold, lists, etc.</small>
                    </div>
                    <div class="mb-3">
                        <label>Logo (optional)</label>
                        <input type="file" name="logo" class="form-control" accept="image/*">
                        {% if company.logo_path %}
                            <div class="mt-2">Current logo: <img src="{{ url_for('static', filename='uploads/'+company.logo_path) }}" height="40"></div>
                        {% endif %}
                    </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-primary">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    // DataTables for Ready Pool (already present)
    var table = $('#readyPoolTable').DataTable({ pageLength: 10 });
    
    $('#applyFilter').click(function() {
        var category = $('#filterCategory').val();
        var completeness = $('#filterCompleteness').val();
        $.get('/employer/ready-pool/filter', { category: category, min_completeness: completeness }, function(data) {
            table.clear();
            data.forEach(function(c) {
                table.row.add([
                    c.name, c.email, c.phone,
                    '<div class="progress"><div class="progress-bar" style="width: '+c.completeness+'%">'+c.completeness+'%</div></div>',
                    '<a href="/employer/candidate/'+c.id+'" class="btn btn-sm btn-primary">View Profile</a>'
                ]).draw();
            });
        });
    });
});
</script>

<script>
$(document).ready(function() {
    // Initialize CKEditor inside the modal when it opens
    $('#editCompanyModal').on('shown.bs.modal', function() {
        if (!window.companyEditor) {
            ClassicEditor
                .create(document.querySelector('#editCompanyDesc'), {
                    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
                    height: 200
                })
                .then(editor => {
                    window.companyEditor = editor;
                })
                .catch(error => console.error(error));
        }
    });
    // Destroy editor when modal closes (optional)
    $('#editCompanyModal').on('hidden.bs.modal', function() {
        if (window.companyEditor) {
            window.companyEditor.destroy();
            window.companyEditor = null;
        }
    });
});
</script>
{% endblock %}