{% extends "base.html" %}

{% block head %}
<link rel="stylesheet" href="/plugins/customizer/assets/css/customizer.ui.css">
{% endblock %}

{% block content %}
<div class="blocks-workspace cz-container mx-auto w-full max-w-7xl px-4 py-6 sm:px-6" id="customizer-take"
     data-currency="{{ currency_symbol | default(value='₹') }}">

{% if is_not_enrolled %}
<div class="cz-access-denied grid justify-items-center gap-4 py-12 text-center">
    <h1 class="mb-0 text-2xl font-bold">Access restricted</h1>
    <p class="m-0 text-muted">You are not enrolled as an <strong>order taker</strong>. Ask an administrator to grant the role under Customizer → Staff.</p>
    <a href="/" class="btn">Home</a>
</div>
{% else %}

<div>
    <div class="cz-page-header">
        <h1 class="cz-title">Take Custom Order</h1>
        <p class="m-0 text-muted">Select a template to configure and send directly to production.</p>
    </div>
    
    <div class="cz-order-layout mt-4">
        <!-- Templates Column -->
        <div class="cz-templates-column" id="cz-templates-list"></div>
        
        <!-- Config & Dispatch Column -->
        <div class="cz-config-column blocks-workspace-panel">
            <div id="cz-config-panel">
                <p class="text-muted">Select a template from the left to configure.</p>
            </div>
            
            <div id="cz-dispatch-controls" class="cz-hidden mt-4 border-t border-divider pt-4">
                <div class="blocks-workspace-field mb-4">
                    <label class="font-semibold">Quantity</label>
                    <input type="number" id="cz-qty" class="form-control" value="1" min="1">
                </div>
                <div class="blocks-workspace-field mb-4">
                    <label class="font-semibold">Customer Identifier (Optional)</label>
                    <input type="text" id="cz-customer-label" class="form-control" placeholder="e.g. John Doe, Table 4">
                </div>
                <button type="button" class="btn btn-primary mt-2 w-full" id="cz-direct-dispatch-btn">Send to Production</button>
            </div>
        </div>
    </div>
</div>

{% endif %}
</div>
<script type="application/json" id="customizer-templates-json">{{ templates | json_encode | safe }}</script>
<script src="/plugins/customizer/assets/js/configurator.js" defer></script>
<script src="/plugins/customizer/assets/js/take.js" defer></script>
{% endblock %}