{% extends 'base.html' %}

{% block body %}

<div id="wrapper">
    {% include 'navbar.html' %}

    <div id="page-wrapper" class="gray-bg">
        {% include 'header.html' %}
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-12">
                <h2>Project Custom Fields</h2>
            </div>
        </div>
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="row">
                <div class="col-lg-5">
                    <div class="ibox">
                        <div class="ibox-title"><h5>Add Custom Field</h5></div>
                        <div class="ibox-content">
                            <form method="POST" action="/admin/program-department/custom-fields">
                                {% csrf_token %}
                                <div class="form-group d-flex flex-column">
                                    <label>Project</label>
                                    <select name="project" class="select2 form-control" required>
                                        <option value="">Select Project</option>
                                        {% for p in projects %}
                                            <option value="{{ p.id }}">{{ p.project }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="form-group d-flex flex-column">
                                    <label>Field Label</label>
                                    <input type="text" name="label" class="form-control" required>
                                </div>
                                <div class="form-group d-flex flex-column">
                                    <label>Field Type</label>
                                    <select name="field_type" id="field_type" class="form-control" required>
                                        <option value="text">Text</option>
                                        <option value="number">Number</option>
                                        <option value="select">Select</option>
                                        <option value="date">Date</option>
                                    </select>
                                </div>
                                <div class="form-group d-flex flex-column" id="options_group" style="display:none;">
                                    <label>Options (comma-separated)</label>
                                    <input type="text" name="options" class="form-control" placeholder="Option A, Option B, Option C">
                                </div>
                                <div class="form-group">
                                    <label><input type="checkbox" name="required"> Required</label>
                                </div>
                                <button type="submit" class="btn btn-w-s btn-primary">Add Field</button>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="ibox">
                        <div class="ibox-title"><h5>Existing Custom Fields</h5></div>
                        <div class="ibox-content" style="overflow-x: auto;">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Project</th>
                                        <th>Label</th>
                                        <th>Type</th>
                                        <th>Required</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for field in custom_fields %}
                                    <tr>
                                        <td>{{ field.project.project }}</td>
                                        <td>{{ field.label }}</td>
                                        <td>{{ field.get_field_type_display }}</td>
                                        <td>{% if field.required %}Yes{% else %}No{% endif %}</td>
                                        <td><a href="/admin/program-department/custom-fields/delete/{{ field.id }}" class="btn btn-xs btn-danger">Delete</a></td>
                                    </tr>
                                    {% empty %}
                                    <tr><td colspan="5">No custom fields defined yet.</td></tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.select2').select2();
    });
    $(document).on('change', '#field_type', function() {
        $('#options_group').toggle($(this).val() === 'select');
    });
</script>

{% for message in messages %}
    <script>
        showNotification('{{message}}', '{{message.tags}}')
    </script>
{% endfor %}

{% endblock %}