{% extends "base.html" %}
{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="mb-0">Salary Slip Template Master</h3>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="card shadow-sm mb-3">
                <div class="card-header">Existing Templates</div>
                <div class="card-body">
                    <div class="list-group">
                        {% for t in templates %}
                        <a href="{{ url_for('salary_slip_template.manage_templates', template_id=t.id) }}"
                           class="list-group-item list-group-item-action {% if selected_template and selected_template.id == t.id %}active{% endif %}">
                            {{ t.template_name }}
                            <small class="d-block">
                                {{ t.scope_type }}
                                {% if t.location %} | {{ t.location }}{% endif %}
                                {% if t.institute %} | {{ t.institute }}{% endif %}
                            </small>
                        </a>
                        {% else %}
                        <div class="text-muted">No templates found.</div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <form method="POST">
                {% if selected_template %}
                <input type="hidden" name="template_id" value="{{ selected_template.id }}">
                {% endif %}

                <div class="card shadow-sm mb-3">
                    <div class="card-header">Template Details</div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Template Name</label>
                                <input type="text" class="form-control" name="template_name"
                                       value="{{ selected_template.template_name if selected_template else '' }}" required>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Scope Type</label>
                                <select class="form-select" name="scope_type">
                                    {% set scope = selected_template.scope_type if selected_template else 'global' %}
                                    <option value="global" {% if scope == 'global' %}selected{% endif %}>Global</option>
                                    <option value="location" {% if scope == 'location' %}selected{% endif %}>Location</option>
                                    <option value="institute" {% if scope == 'institute' %}selected{% endif %}>Institute</option>
                                    <option value="location_institute" {% if scope == 'location_institute' %}selected{% endif %}>Location + Institute</option>
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Location</label>
                                <select class="form-select" name="location">
                                    <option value="">-- Select --</option>
                                    {% for loc in locations %}
                                    <option value="{{ loc }}" {% if selected_template and selected_template.location == loc %}selected{% endif %}>{{ loc }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Institute</label>
                                <select class="form-select" name="institute">
                                    <option value="">-- Select --</option>
                                    {% for inst in institutes %}
                                    <option value="{{ inst }}" {% if selected_template and selected_template.institute == inst %}selected{% endif %}>{{ inst }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <div class="col-md-12">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="is_active" {% if not selected_template or selected_template.is_active %}checked{% endif %}>
                                    <label class="form-check-label">Active</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="show_company_section" {% if not selected_template or selected_template.show_company_section %}checked{% endif %}>
                                    <label class="form-check-label">Show Company Section</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="show_employee_section" {% if not selected_template or selected_template.show_employee_section %}checked{% endif %}>
                                    <label class="form-check-label">Show Employee Section</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="show_attendance_section" {% if not selected_template or selected_template.show_attendance_section %}checked{% endif %}>
                                    <label class="form-check-label">Show Attendance Section</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="checkbox" name="show_ctc_section" {% if selected_template and selected_template.show_ctc_section %}checked{% endif %}>
                                    <label class="form-check-label">Show CTC Section</label>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">Company Name</label>
                                <input type="text" class="form-control" name="company_name"
                                       value="{{ selected_template.company_name if selected_template else '' }}">
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">Company Address</label>
                                <textarea class="form-control" name="company_address" rows="2">{{ selected_template.company_address if selected_template else '' }}</textarea>
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Company Contact</label>
                                <input type="text" class="form-control" name="company_contact"
                                       value="{{ selected_template.company_contact if selected_template else '' }}">
                            </div>

                            <div class="col-md-6">
                                <label class="form-label">Footer Text</label>
                                <input type="text" class="form-control" name="footer_text"
                                       value="{{ selected_template.footer_text if selected_template else '' }}">
                            </div>
                        </div>
                    </div>
                </div>

                {% macro render_field_section(title, section_name, fields) %}
                <div class="card shadow-sm mb-3">
                    <div class="card-header">{{ title }}</div>
                    <div class="card-body">
                        <table class="table table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 100px;">Show</th>
                                    <th>Field</th>
                                    <th>Display Label</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for key, label in fields %}
                                {% set cfg = field_map.get((section_name, key)) %}
                                <tr>
                                    <td>
                                        <input type="checkbox" name="field_visible__{{ section_name }}__{{ key }}"
                                               {% if not selected_template or (cfg and cfg.is_visible) %}checked{% endif %}>
                                    </td>
                                    <td>{{ label }}</td>
                                    <td>
                                        <input type="text" class="form-control"
                                               name="field_label__{{ section_name }}__{{ key }}"
                                               value="{{ cfg.display_label if cfg else label }}">
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endmacro %}

                {{ render_field_section('Employee Fields', 'employee', employee_fields) }}
                {{ render_field_section('Company Fields', 'company', company_fields) }}
                {{ render_field_section('Attendance Fields', 'attendance', attendance_fields) }}

                {% macro render_component_section(title, ctype, heads) %}
                <div class="card shadow-sm mb-3">
                    <div class="card-header">{{ title }}</div>
                    <div class="card-body">
                        <table class="table table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 100px;">Show</th>
                                    <th>Component</th>
                                    <th>Display Label</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for h in heads %}
                                {% set cfg = component_map.get((ctype, h.name)) %}
                                <tr>
                                    <td>
                                        <input type="checkbox" name="{{ ctype }}_visible__{{ h.name }}"
                                               {% if not selected_template or (cfg and cfg.is_visible) %}checked{% endif %}>
                                    </td>
                                    <td>{{ h.name }}</td>
                                    <td>
                                        <input type="text" class="form-control"
                                               name="{{ ctype }}_label__{{ h.name }}"
                                               value="{{ cfg.display_label if cfg else h.name }}">
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% endmacro %}

                {{ render_component_section('Earning Components', 'earning', earning_heads) }}
                {{ render_component_section('Deduction Components', 'deduction', deduction_heads) }}
                {{ render_component_section('CTC Components', 'ctc', ctc_heads) }}

                <div class="text-end mb-4">
                    <button type="submit" class="btn btn-primary">Save Template</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}