{% extends "base.html" %}

{% block title %}Admin Dashboard{% endblock %}

{% block content %}
<div class="container-fluid px-0">
    <div class="row g-0">
        <!-- Sidebar -->
        <div class="col-auto" style="background-color: #1a2a3a; min-height: 100vh;">
            <div class="sidebar-wrapper p-3" style="width: 280px;">
                <h5 class="text-white mb-4"><i class="fas fa-chart-line"></i> Admin Panel</h5>
                <ul class="nav nav-pills flex-column" id="adminSidebar">
                    <li class="nav-item">
                        <a class="nav-link text-white active" href="#companies" data-bs-toggle="pill">
                            <i class="fas fa-building me-2"></i> Companies
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#seekers" data-bs-toggle="pill">
                            <i class="fas fa-users me-2"></i> Job Seekers
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#jobs" data-bs-toggle="pill">
                            <i class="fas fa-briefcase me-2"></i> Jobs
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Main Content -->
        <div class="col p-4">
            <div class="tab-content">
                <!-- Companies Tab -->
                <div class="tab-pane fade show active" id="companies">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3><i class="fas fa-building"></i> Companies</h3>
                        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addCompanyModal">+ Add Company</button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped datatable">
                            <thead>
                                <tr><th>ID</th><th>Logo</th><th>Name</th><th>Email</th><th>Address</th><th>Actions</th></tr>
                            </thead>
                            <tbody>
                                {% for c in companies %}
                                <tr>
                                    <td>{{ c.id }}</td>
                                    <td>{% if c.logo_path %}<img src="{{ url_for('static', filename='uploads/'+c.logo_path) }}" height="40">{% else %}—{% endif %}</td>
                                    <td>{{ c.name }}</td>
                                    <td>{{ c.email }}</td>
                                    <td>{{ c.address }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-warning" data-bs-toggle="modal" data-bs-target="#editCompanyModal{{ c.id }}">Edit</button>
                                        <form method="POST" action="{{ url_for('admin_delete_company', company_id=c.id) }}" style="display:inline;">
                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this company?')">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                                <!-- Edit Company Modal -->
                                <div class="modal fade" id="editCompanyModal{{ c.id }}" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form method="POST" action="{{ url_for('admin_edit_company', company_id=c.id) }}" enctype="multipart/form-data">
                <div class="modal-header"><h5>Edit Company</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <input type="text" name="name" class="form-control mb-2" value="{{ c.name }}" required>
                    <input type="email" name="email" class="form-control mb-2" value="{{ c.email }}" required>
                    <input type="text" name="phone" class="form-control mb-2" value="{{ c.phone or '' }}">
                    <textarea name="address" class="form-control mb-2">{{ c.address or '' }}</textarea>
                    <label>Description (HTML supported)</label>
                    <textarea name="description" id="editCompanyDesc{{ c.id }}" class="form-control mb-2 company-desc-textarea" rows="4">{{ c.description or '' }}</textarea>
                    <input type="file" name="logo" class="form-control" accept="image/*">
                    {% if c.logo_path %}<p>Current: <img src="{{ url_for('static', filename='uploads/'+c.logo_path) }}" height="40"></p>{% endif %}
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Save Changes</button></div>
            </form>
        </div>
    </div>
</div>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Job Seekers Tab -->
                <div class="tab-pane fade" id="seekers">
                    <h3><i class="fas fa-users"></i> Job Seekers</h3>
                    <div class="table-responsive">
                        <table class="table table-striped datatable">
                            <thead>
                                <tr><th>ID</th><th>Name</th><th>Email</th><th>Phone</th><th>Profile %</th><th>Actions</th></tr>
                            </thead>
                            <tbody>
                                {% for profile in job_seekers %}
                                <tr>
                                    <td>{{ profile.id }}</td>
                                    <td>{{ profile.user.full_name }}</td>
                                    <td>{{ profile.user.email }}</td>
                                    <td>{{ profile.phone }}</td>
                                    <td>
                                        <div class="progress" style="height:20px;">
                                            <div class="progress-bar" style="width:{{ profile.completeness }}%">{{ profile.completeness }}%</div>
                                        </div>
                                    </td>
                                    <td>
                                        <a href="{{ url_for('admin_view_job_seeker', profile_id=profile.id) }}" class="btn btn-sm btn-info">View</a>
                                        <form method="POST" action="{{ url_for('admin_delete_job_seeker', profile_id=profile.id) }}" style="display:inline;">
                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this job seeker? All data will be lost.')">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Jobs Tab -->
                <div class="tab-pane fade" id="jobs">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h3><i class="fas fa-briefcase"></i> Jobs</h3>
                        <a href="{{ url_for('admin_post_job') }}" class="btn btn-success">+ Post New Job</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped datatable">
                            <thead>
                                <tr><th>ID</th><th>Title</th><th>Category</th><th>Status</th><th>Company</th><th>Created</th><th>Actions</th></tr>
                            </thead>
                            <tbody>
                                {% for job in job_posts %}
                                <tr>
                                    <td>{{ job.id }}</td>
                                    <td>{{ job.title }}</td>
                                    <td>{{ job.category.name }}</td>
                                    <td>{{ job.status }}</td>
                                    <td>{% if job.is_linked %}{{ job.company.name if job.company else 'N/A' }}{% else %}{{ job.manual_company_name }}{% endif %}</td>
                                    <td>{{ job.created_at.strftime('%Y-%m-%d') }}</td>
                                    <td>
                                        <a href="{{ url_for('admin_edit_job', job_id=job.id) }}" class="btn btn-sm btn-warning">Edit</a>
                                        <form method="POST" action="{{ url_for('admin_delete_job', job_id=job.id) }}" style="display:inline;">
                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this job?')">Delete</button>
                                        </form>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Company Modal -->
<div class="modal fade" id="addCompanyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form action="{{ url_for('add_company') }}" method="POST" enctype="multipart/form-data">
                <div class="modal-header"><h5>Add Company</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
                <div class="modal-body">
                    <input type="text" name="name" class="form-control mb-2" placeholder="Company Name" required>
                    <input type="email" name="email" class="form-control mb-2" placeholder="Email" required>
                    <input type="text" name="phone" class="form-control mb-2" placeholder="Phone (optional)">
                    <textarea name="address" class="form-control mb-2" placeholder="Address"></textarea>
                    <label>Description (optional) – HTML supported</label>
                    <textarea name="description" id="addCompanyDesc" class="form-control mb-2 company-desc-textarea" rows="4"></textarea>
                    <input type="file" name="logo" class="form-control" accept="image/*">
                </div>
                <div class="modal-footer"><button type="submit" class="btn btn-primary">Save</button></div>
            </form>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    $('.datatable').DataTable({ pageLength: 10, responsive: true });
});
$('a[data-bs-toggle="pill"]').on('shown.bs.tab', function (e) {
    $.fn.dataTable.tables({ visible: true }).DataTable().columns.adjust().responsive.recalc();
});
</script>

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>
<script>
$(document).ready(function() {
    // Initialize CKEditor on any modal containing textarea with class 'company-desc-textarea'
    $('.modal').on('shown.bs.modal', function() {
        $(this).find('.company-desc-textarea').each(function() {
            var textarea = $(this);
            if (!textarea.hasClass('ckeditor-initialized')) {
                ClassicEditor
                    .create(textarea[0], {
                        toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'],
                        height: 200
                    })
                    .then(editor => {
                        textarea.addClass('ckeditor-initialized');
                        textarea.data('editor', editor);
                    })
                    .catch(error => console.error(error));
            }
        });
    });
});
</script>
<style>
    .sidebar-wrapper .nav-link {
        color: #d1d8e0;
        border-radius: 8px;
        margin-bottom: 5px;
        transition: all 0.2s;
    }
    .sidebar-wrapper .nav-link:hover {
        background-color: #2c3e50;
        color: white;
    }
    .sidebar-wrapper .nav-link.active {
        background-color: #0d6efd;
        color: white;
    }
    @media (max-width: 768px) {
        .sidebar-wrapper { width: 100%; }
        .col-auto { width: 100%; }
        .nav-pills { flex-direction: row !important; justify-content: space-around; }
        .sidebar-wrapper .nav-link { display: inline-block; }
    }
</style>
{% endblock %}