{% extends "admin_base.html" %}

{% block page_title %}Master Data Management{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/employee-attendance/assets/css/attendance.css">
<link rel="stylesheet" href="/static/css/availability-grid.css">
{% endblock %}

{% block admin_content %}
<div class="attendance-page">
    <div class="attendance-toolbar">
        <h1>Master Data Management</h1>
    </div>

    <div class="masters-grid">
        <!-- Entitlement Profiles -->
        <div class="master-card master-card--wide">
            <h2>
                Entitlement Profiles
                <button class="blocks-button blocks-button-sm blocks-button-primary" data-open-modal="entitlement-profile-create-modal">+</button>
            </h2>
            <p class="master-card-subtitle">Each profile maps leave types to entitled days and is assigned to employees.</p>
            <div class="table-responsive">
                <table class="blocks-admin-table responsive-table">
                    <thead><tr><th>Profile Name</th><th>Leave Entitlements</th><th>Actions</th></tr></thead>
                    <tbody>
                        {% for row in entitlement_profiles %}
                        <tr>
                            <td data-label="Profile Name">{{ row.name }}</td>
                            <td data-label="Leave Entitlements" class="entitlement-breakup">
                                {% if row.entitlement_breakup and row.entitlement_breakup != "" %}
                                {{ row.entitlement_breakup | replace(from=", ", to="<br>") | safe }}
                                {% else %}
                                <span class="text-muted">No leave types configured yet</span>
                                {% endif %}
                            </td>
                            <td data-label="Actions" class="master-actions-cell">
                                <button class="blocks-button blocks-button-sm blocks-button-secondary"
                                        data-open-modal="entitlement-profile-edit-modal"
                                        data-id="{{ row.id }}"
                                        data-name="{{ row.name }}"
                                        data-entitlement_items="{{ row.entitlement_items | default(value='') }}">Edit</button>
                                <form data-form="entitlement-profile-delete">
                                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-entitlements-delete/{{ row.id }}">
                                    <button class="blocks-button blocks-button-sm blocks-button-danger" type="submit">Delete</button>
                                </form>
                            </td>
                        </tr>
                        {% else %}
                        <tr>
                            <td colspan="3" class="attendance-empty-cell">No entitlement profiles found. Create one to start assigning leave policies.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Teams -->
        <div class="master-card">
            <h2>Teams <button class="blocks-button blocks-button-sm blocks-button-primary" data-open-modal="team-create-modal">+</button></h2>
            <table class="blocks-admin-table">
                <thead><tr><th>Name</th><th>Actions</th></tr></thead>
                <tbody>
                    {% for row in teams %}
                    <tr>
                        <td>{{ row.name }}</td>
                        <td>
                            <button class="blocks-button blocks-button-sm blocks-button-secondary" 
                                    data-open-modal="master-edit-modal" 
                                    data-id="{{ row.id }}" 
                                    data-name="{{ row.name }}" 
                                    data-table="employee_attendance_team_master">Edit</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Designations -->
        <div class="master-card">
            <h2>Designations <button class="blocks-button blocks-button-sm blocks-button-primary" data-open-modal="designation-create-modal">+</button></h2>
            <table class="blocks-admin-table">
                <thead><tr><th>Name</th><th>Actions</th></tr></thead>
                <tbody>
                    {% for row in designations %}
                    <tr>
                        <td>{{ row.name }}</td>
                        <td>
                            <button class="blocks-button blocks-button-sm blocks-button-secondary" 
                                    data-open-modal="master-edit-modal" 
                                    data-id="{{ row.id }}" 
                                    data-name="{{ row.name }}" 
                                    data-table="employee_attendance_designation_master">Edit</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Leave Types -->
        <div class="master-card">
            <h2>Leave Types <button class="blocks-button blocks-button-sm blocks-button-primary" data-open-modal="leave-type-create-modal">+</button></h2>
            <table class="blocks-admin-table">
                <thead><tr><th>Name</th><th>Actions</th></tr></thead>
                <tbody>
                    {% for row in leave_types %}
                    <tr>
                        <td>{{ row.name }}</td>
                        <td>
                            <button class="blocks-button blocks-button-sm blocks-button-secondary"
                                    data-open-modal="master-edit-modal"
                                    data-id="{{ row.id }}"
                                    data-name="{{ row.name }}"
                                    data-table="employee_attendance_leave_type_master">Edit</button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- Shifts -->
        <div class="master-card">
            <h2>Shifts <button class="blocks-button blocks-button-sm blocks-button-primary" data-open-modal="shift-create-modal">+</button></h2>
            <table class="blocks-admin-table">
                <thead><tr><th>Name</th><th>Type</th><th>Actions</th></tr></thead>
                <tbody>
                    {% for row in shifts %}
                    <tr>
                        <td>{{ row.shift_name }}</td>
                        <td>{{ row.schedule_type }}</td>
                        <td>
                            <button class="blocks-button blocks-button-sm blocks-button-secondary" type="button"
                                    data-open-modal="shift-edit-modal"
                                    data-id="{{ row.id }}"
                                    data-shift_name="{{ row.shift_name }}"
                                    data-schedule_type="{{ row.schedule_type | default(value='fixed') }}"
                                    data-schedule_data='{{ row.schedule_data | default(value="[]") }}'
                                    data-start_time="{{ row.start_time }}"
                                    data-end_time="{{ row.end_time }}"
                                    data-grace_minutes="{{ row.grace_minutes }}"
                                    data-half_day_minutes="{{ row.half_day_minutes }}"
                                    data-full_day_minutes="{{ row.full_day_minutes }}"
                                    data-requires_gps="{{ row.requires_gps == 1 }}"
                                    data-requires_token="{{ row.requires_token == 1 }}"
                                    data-requires_selfie="{{ row.requires_selfie == 1 }}"
                                    data-is_active="{{ row.is_active == 1 }}">Edit</button>
                            <form data-form="shift-update">
                                <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-shifts-update/{{ row.id }}">
                                <input type="hidden" name="shift_name" value="{{ row.shift_name }}">
                                <input type="hidden" name="schedule_type" value="{{ row.schedule_type | default(value='fixed') }}">
                                <input type="hidden" name="schedule_data" value='{{ row.schedule_data | default(value="[]") }}'>
                                <input type="hidden" name="start_time" value="{{ row.start_time }}">
                                <input type="hidden" name="end_time" value="{{ row.end_time }}">
                                <input type="hidden" name="grace_minutes" value="{{ row.grace_minutes }}">
                                <input type="hidden" name="half_day_minutes" value="{{ row.half_day_minutes }}">
                                <input type="hidden" name="full_day_minutes" value="{{ row.full_day_minutes }}">
                                <input type="hidden" name="requires_gps" value="{{ row.requires_gps == 1 }}">
                                <input type="hidden" name="requires_token" value="{{ row.requires_token == 1 }}">
                                <input type="hidden" name="requires_selfie" value="{{ row.requires_selfie == 1 }}">
                                <input type="hidden" name="is_active" value="{% if row.is_active == 1 %}false{% else %}true{% endif %}">
                                <button class="blocks-button blocks-button-sm blocks-button-secondary" type="submit">{% if row.is_active == 1 %}Deactivate{% else %}Activate{% endif %}</button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

    </div>

    <!-- Edit Modal -->
    <div id="master-edit-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Edit Master Entry</h3>
                <button class="close-btn" type="button" data-close-modal>&times;</button>
            </div>
            <div class="modal-body">
                <form id="master-edit-form" data-form="master-update" class="attendance-form-grid">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-masters-update">
                    <input type="hidden" name="table">
                    <label>Name <input name="name" required class="blocks-input"></label>
                </form>
            </div>
            <div class="modal-footer">
                <form data-form="master-delete">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-masters-delete">
                    <input type="hidden" name="table">
                    <button class="blocks-button blocks-button-danger" type="submit">Delete</button>
                </form>
                <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                <button class="blocks-button blocks-button-primary" type="submit" form="master-edit-form">Save Changes</button>
            </div>
        </div>
    </div>

    <!-- Create Modals (simplified, they use the inline creation logic essentially) -->
    <!-- But having an explicit way is good too -->
    <!-- Create Modals -->
    <div id="team-create-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header"><h3>Add Team</h3><button class="close-btn" type="button" data-close-modal>&times;</button></div>
            <form id="team-create-form" data-form="master-create">
                <div class="modal-body attendance-form-grid">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-masters-create">
                    <input type="hidden" name="table" value="employee_attendance_team_master">
                    <label>Team Name</label>
                    <input name="name" required placeholder="Enter team name" class="blocks-input">
                </div>
                <div class="modal-footer">
                    <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                    <button class="blocks-button blocks-button-primary" type="submit">Create</button>
                </div>
            </form>
        </div>
    </div>

    <div id="designation-create-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header"><h3>Add Designation</h3><button class="close-btn" type="button" data-close-modal>&times;</button></div>
            <form id="designation-create-form" data-form="master-create">
                <div class="modal-body attendance-form-grid">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-masters-create">
                    <input type="hidden" name="table" value="employee_attendance_designation_master">
                    <label>Designation Name</label>
                    <input name="name" required placeholder="Enter designation name" class="blocks-input">
                </div>
                <div class="modal-footer">
                    <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                    <button class="blocks-button blocks-button-primary" type="submit">Create</button>
                </div>
            </form>
        </div>
    </div>

    <div id="leave-type-create-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header"><h3>Add Leave Type</h3><button class="close-btn" type="button" data-close-modal>&times;</button></div>
            <form id="leave-type-create-form" data-form="master-create">
                <div class="modal-body attendance-form-grid">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-masters-create">
                    <input type="hidden" name="table" value="employee_attendance_leave_type_master">
                    <label>Leave Type Name</label>
                    <input name="name" required placeholder="Enter leave type" class="blocks-input">
                </div>
                <div class="modal-footer">
                    <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                    <button class="blocks-button blocks-button-primary" type="submit">Create</button>
                </div>
            </form>
        </div>
    </div>

    <div id="entitlement-profile-create-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header"><h3>Add Entitlement Profile</h3><button class="close-btn" type="button" data-close-modal>&times;</button></div>
            <form id="entitlement-profile-create-form" data-form="entitlement-profile-create">
                <div class="modal-body attendance-form-grid">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-entitlements-create">
                    <label>Profile Name <input name="name" required class="blocks-input"></label>
                    {% for lt in leave_types %}
                    <label>{{ lt.name }} Days <input name="leave_type_{{ lt.id }}" type="number" min="0" step="0.5" value="0" class="blocks-input"></label>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                    <button class="blocks-button blocks-button-primary" type="submit">Create</button>
                </div>
            </form>
        </div>
    </div>

    <div id="entitlement-profile-edit-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header"><h3>Edit Entitlement Profile</h3><button class="close-btn" type="button" data-close-modal>&times;</button></div>
            <form id="entitlement-profile-edit-form" data-form="entitlement-profile-update">
                <div class="modal-body attendance-form-grid">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-entitlements-update">
                    <label>Profile Name <input name="name" required class="blocks-input"></label>
                    {% for lt in leave_types %}
                    <label>{{ lt.name }} Days <input name="leave_type_{{ lt.id }}" type="number" min="0" step="0.5" value="0" class="blocks-input"></label>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                    <button class="blocks-button blocks-button-primary" type="submit">Save</button>
                </div>
            </form>
        </div>
    </div>

    <div id="shift-edit-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header"><h3>Edit Shift</h3><button class="close-btn" type="button" data-close-modal>&times;</button></div>
            <form id="shift-edit-form" data-form="shift-update" class="attendance-form-grid">
                <div class="modal-body attendance-form-grid">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-shifts-update">
                    <input type="hidden" name="schedule_data">
                    <label>Shift Name <input name="shift_name" required class="blocks-input"></label>
                    <label>Schedule Type
                        <select name="schedule_type" class="blocks-input">
                            <option value="fixed">Fixed</option>
                            <option value="flexible">Flexible</option>
                        </select>
                    </label>
                    <label>Start Time <input name="start_time" type="time" class="blocks-input"></label>
                    <label>End Time <input name="end_time" type="time" class="blocks-input"></label>
                    <label>Grace Minutes <input name="grace_minutes" type="number" min="0" class="blocks-input"></label>
                    <label>Half-day Minutes <input name="half_day_minutes" type="number" min="0" class="blocks-input"></label>
                    <label>Full-day Minutes <input name="full_day_minutes" type="number" min="0" class="blocks-input"></label>
                    <label><input name="requires_gps" type="checkbox"> Require GPS</label>
                    <label><input name="requires_token" type="checkbox"> Require QR</label>
                    <label><input name="requires_selfie" type="checkbox"> Require Selfie</label>
                    <label><input name="is_active" type="checkbox"> Active</label>
                </div>
                <div class="modal-footer">
                    <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                    <button class="blocks-button blocks-button-primary" type="submit">Save</button>
                </div>
            </form>
        </div>
    </div>

    <div id="shift-create-modal" class="crud-modal">
        <div class="modal-content">
            <div class="modal-header"><h3>Add Shift</h3><button class="close-btn" type="button" data-close-modal>&times;</button></div>
            <form id="shift-create-form" data-form="shift-create" class="attendance-form-grid">
                <div class="modal-body attendance-form-grid">
                    <input type="hidden" name="_endpoint" value="/plugins/employee-attendance/api/admin-shifts-create">
                    <label>Shift Name <input name="shift_name" required class="blocks-input"></label>
                    <label>Schedule Type
                        <select name="schedule_type" class="blocks-input">
                            <option value="fixed">Fixed</option>
                            <option value="flexible">Flexible</option>
                        </select>
                    </label>
                    <div style="grid-column: span 2;">
                        <label>Attendance Punch Allowed Window (QR/GPS)</label>
                        <div id="shift-schedule-grid"></div>
                        <input type="hidden" name="schedule_data" value='["000000000000000000000000","000000000000000000000000","000000000000000000000000","000000000000000000000000","000000000000000000000000","000000000000000000000000","000000000000000000000000"]'>
                    </div>
                    <label>Start Time <input name="start_time" type="time" value="09:00" class="blocks-input"></label>
                    <label>End Time <input name="end_time" type="time" value="18:00" class="blocks-input"></label>
                    <label>Grace Minutes <input name="grace_minutes" type="number" value="10" class="blocks-input"></label>
                    <label>Half-day Minutes <input name="half_day_minutes" type="number" value="240" class="blocks-input"></label>
                    <label>Full-day Minutes <input name="full_day_minutes" type="number" value="480" class="blocks-input"></label>
                    <label><input name="requires_gps" type="checkbox" checked> Require GPS</label>
                    <label><input name="requires_token" type="checkbox" checked> Require QR</label>
                    <label><input name="requires_selfie" type="checkbox"> Require Selfie</label>
                </div>
                <div class="modal-footer">
                    <button class="blocks-button blocks-button-secondary" type="button" data-close-modal>Cancel</button>
                    <button class="blocks-button blocks-button-primary" type="submit">Create</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/availability-grid.js"></script>
<script src="/plugins/employee-attendance/assets/js/attendance.js"></script>
{% endblock %}