{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}
{% import "macros/loading_spinner.html" as spinner %}

{% block page_title %}Delivery Profiles{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/dist/platform-ui/platform.css">
<link rel="stylesheet" href="/plugins/delivery-slot/assets/css/delivery-slot.ui.css">
{% endblock %}

{% block admin_content %}
<div id="profile-container">
    {{ crud::shell_open(config_url="/plugins/delivery-slot/assets/admin/profiles_list.json", mount_id="delivery-profiles-list", custom_mount=true) }}

    <div class="table-container">
        <table>
            <thead></thead>
            <tbody>
                {{ spinner::table_skeleton(colspan=5, lines=3, label="Loading delivery profiles…") }}
            </tbody>
        </table>
    </div>

    {{ crud::shell_close() }}
</div>

<div id="profileModal" class="crud-modal" aria-hidden="true">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modalTitle">Create Delivery Profile</h2>
            <button type="button" class="close-btn" aria-label="Close">&times;</button>
        </div>
        <form id="profileForm">
            <div class="grid gap-4 p-4 sm:p-6">
                <div class="ds-field">
                    <label for="name">Profile Name</label>
                    <input type="text" id="name" name="name" class="blocks-input" required placeholder="e.g. Perishable Goods">
                </div>

                <div class="ds-form-grid">
                    <div class="ds-field">
                        <label for="lead_time_minutes">Lead Time (minutes)</label>
                        <input type="number" id="lead_time_minutes" name="lead_time_minutes" class="blocks-input" value="60" min="0" required>
                        <span class="ds-help">Minimum delay before scheduling.</span>
                    </div>
                    <div class="ds-field">
                        <label for="cutoff_time">Cut-off Time</label>
                        <input type="time" id="cutoff_time" name="cutoff_time" class="blocks-input">
                        <span class="ds-help">Daily order cutoff hour.</span>
                    </div>
                </div>

                <div class="text-sm font-semibold uppercase tracking-wide text-muted">Allowed Slots</div>
                <p class="ds-help mb-3">If no slots are selected, all slots will be available.</p>
                <div class="ds-slot-grid" id="slotsGrid"></div>

                <div class="ds-field mt-5">
                    <label class="checkbox-container">
                        <input type="checkbox" name="is_active" id="is_active" checked>
                        <span class="checkmark"></span>
                        Profile is Active
                    </label>
                </div>
            </div>
            <div class="flex flex-wrap justify-end gap-3 border-t border-divider p-4">
                <button type="button" class="blocks-button blocks-button-secondary cancel-btn">Cancel</button>
                <button type="submit" class="blocks-button blocks-button-primary">Save Profile</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/plugins/delivery-slot/assets/js/profiles_list.js" defer></script>
<script src="/plugins/delivery-slot/assets/js/admin_profiles.js" defer></script>
{% endblock %}