%# /templates/medication.html.ep

% layout 'default';
% title icon('medication') . ' Medication Tracker';

% content_for 'head' => begin
    <link rel="stylesheet" href="/css/medication.css">
    <script src="/js/medication.js"></script>
% end

<div class="medication-container">
    <div class="header-bar">
        <h1><%= icon('medication') %> <span>Family Medication</span></h1>
        <div class="manage-actions">
            % if (is_admin) {
                <button class="action-btn" style="background:#64748b;" onclick="openRegistryModal()"><%= icon('settings') %> Registry</button>
            % }
            <button class="btn-primary" onclick="openDoseModal()"><%= icon('add') %> Log</button>
        </div>
    </div>

    <% if (my $msg = flash('message')) { %>
        <script>document.addEventListener('DOMContentLoaded', () => showToast("<%= $msg %>", 'success'));</script>
    <% } %>
    <% if (my $err = flash('error')) { %>
        <script>document.addEventListener('DOMContentLoaded', () => showToast("<%= $err %>", 'error'));</script>
    <% } %>

    <!-- Main Dynamic Container -->
    <div id="medication-grid" class="medication-grid">
        <p class="loading">Loading family data...</p>
    </div>
</div>

<!-- Add Dose Modal -->
<div id="doseModal" class="modal-overlay" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3><%= icon('add') %> Log Medication Dose</h3>
            <span class="close-btn" onclick="closeDoseModal()">&times;</span>
        </div>
        <form id="doseForm" onsubmit="submitForm(event, '/medication/add')">
            <div class="modal-body">
                <div class="form-group">
                    <label>Who took it?</label>
                    <select name="family_member_id" id="add_member_select" class="game-input" required>
                        <option value="" disabled selected>Select family member</option>
                        % for my $m (@$members) {
                            <option value="<%= $m->{id} %>" <%= $m->{username} eq session('user') ? 'selected' : '' %>><%= icon($m->{username}) %> <%= $m->{username} %></option>
                        % }
                    </select>
                </div>

                <div class="form-group">
                    <label>Quick Select Medication</label>
                    <select id="add_quick_select" class="game-input" onchange="fillForm('add', this.value, this.options[this.selectedIndex].dataset.dosage)">
                        <option value="" selected>-- Select existing --</option>
                        <!-- Populated via AJAX -->
                    </select>
                </div>

                <div class="form-group">
                    <label>Medication Name</label>
                    <input type="text" name="medication_name" id="add_med_name" class="game-input" required placeholder="e.g. Ibuprofen" autocomplete="off">
                </div>

                <div class="form-group">
                    <label>Dosage (mg)</label>
                    <input type="number" name="dosage" id="add_dosage" class="game-input" required min="1" placeholder="e.g. 200">
                </div>

                <div class="form-group">
                    <label>Time Taken</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="time" name="taken_at_time" id="add_taken_at_time" class="game-input" required>
                        <input type="date" name="taken_at_date" id="add_taken_at_date" class="game-input" required>
                    </div>
                </div>
            </div>
            <div class="modal-actions">
                <button type="submit" class="btn-primary"><%= icon('save') %> Save Log</button>
                <button type="button" class="btn-secondary" onclick="closeDoseModal()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Dose Modal -->
<div id="editModal" class="modal-overlay" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3><%= icon('edit') %> Edit Medication Log</h3>
            <span class="close-btn" onclick="closeEditModal()">&times;</span>
        </div>
        <form id="editForm" onsubmit="submitForm(event, this.action)">
            <div class="modal-body">
                <div class="form-group">
                    <label>Who took it?</label>
                    <select name="family_member_id" id="edit_member_select" class="game-input" required>
                        % for my $m (@$members) {
                            <option value="<%= $m->{id} %>"><%= icon($m->{username}) %> <%= $m->{username} %></option>
                        % }
                    </select>
                </div>

                <div class="form-group">
                    <label>Quick Select Medication</label>
                    <select id="edit_quick_select" class="game-input" onchange="fillForm('edit', this.value, this.options[this.selectedIndex].dataset.dosage)">
                        <option value="" selected>-- Select existing --</option>
                        <!-- Populated via AJAX -->
                    </select>
                </div>

                <div class="form-group">
                    <label>Medication Name</label>
                    <input type="text" name="medication_name" id="edit_med_name" class="game-input" required autocomplete="off">
                </div>

                <div class="form-group">
                    <label>Dosage (mg)</label>
                    <input type="number" name="dosage" id="edit_dosage" class="game-input" required min="1">
                </div>

                <div class="form-group">
                    <label>Time Taken</label>
                    <div style="display: flex; gap: 10px;">
                        <input type="time" name="taken_at_time" id="edit_taken_at_time" class="game-input" required>
                        <input type="date" name="taken_at_date" id="edit_taken_at_date" class="game-input" required>
                    </div>
                </div>
            </div>
            <div class="modal-actions">
                <button type="submit" class="btn-primary"><%= icon('save') %> Save Changes</button>
                <button type="button" class="btn-secondary" onclick="closeEditModal()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Registry Management Modal -->
<div id="registryModal" class="modal-overlay" style="display: none;">
    <div class="modal-content" style="max-width: 800px;">
        <div class="modal-header">
            <h3><%= icon('settings') %> Manage Medication Registry</h3>
            <span class="close-btn" onclick="closeRegistryModal()">&times;</span>
        </div>
        <div class="modal-body">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Default (mg)</th>
                        <th>Usage</th>
                        <th style="width: 80px; text-align: center;">Actions</th>
                    </tr>
                </thead>
                <tbody id="registry-table-body">
                    <!-- Populated via AJAX -->
                </tbody>
            </table>
        </div>
        <div class="modal-actions">
            <button type="button" class="btn-secondary" onclick="closeRegistryModal()">Close</button>
        </div>
    </div>
</div>

<!-- Edit Registry Item Modal (Sub-modal) -->
<div id="manageEditModal" class="modal-overlay" style="display: none; z-index: 11000;">
    <div class="modal-content" style="max-width: 400px; margin-top: 5rem;">
        <div class="modal-header">
            <h3><%= icon('edit') %> Edit Registry Item</h3>
            <span class="close-btn" onclick="closeManageModal()">&times;</span>
        </div>
        <form id="manageEditForm" onsubmit="submitForm(event, this.action, true)">
            <div class="modal-body">
                <input type="hidden" name="id" id="manage_id">
                <div class="form-group">
                    <label>Medication Name</label>
                    <input type="text" name="name" id="manage_name" class="game-input" required>
                </div>
                <div class="form-group">
                    <label>Default Dosage (mg)</label>
                    <input type="number" name="default_dosage" id="manage_dosage" class="game-input" required min="1">
                </div>
            </div>
            <div class="modal-actions">
                <button type="submit" class="btn-primary"><%= icon('save') %> Save</button>
                <button type="button" class="btn-secondary" onclick="closeManageModal()">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteConfirmModal" class="delete-modal-overlay">
    <div class="delete-modal-content">
        <div class="delete-modal-header">
            <h3>Confirm Deletion</h3>
            <span class="delete-modal-close" onclick="closeDeleteModal()">&times;</span>
        </div>
        <div class="delete-modal-body">
            <p>Are you sure you want to delete <strong id="deleteMedName"></strong>?</p>
        </div>
        <div class="delete-modal-actions">
            <form id="deleteForm" onsubmit="submitForm(event, this.action)">
                <button type="submit" class="btn-danger-confirm">Delete Log</button>
                <button type="button" class="btn-secondary" onclick="closeDeleteModal()" style="margin-left: 10px; height: 38px;">Cancel</button>
            </form>
        </div>
    </div>
</div>

<script>
    // Pass session user to JS for default selection logic
    const CURRENT_USER = "<%= session('user') %>";
    const IS_ADMIN = <%= is_admin ? 'true' : 'false' %>;
</script>