{% extends 'layout_default.html.twig' %}

{% import 'macro_functions.html.twig' as mf %}

{% set active_menu = 'products' %}

{% block meta_title %}{{ 'Product Configuration'|trans }}{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="{{ '/'|url }}">
                <svg class="icon">
                    <use xlink:href="#home" />
                </svg>
            </a>
        </li>
        <li class="breadcrumb-item">
            <a href="{{ 'product'|url }}">{{ 'Products'|trans }}</a>
        </li>
        <li class="breadcrumb-item active">{{ product.title }}</li>
    </ol>
{% endblock %}

{% block content %}
{% embed 'partial_admin_detail_tabs.html.twig' with {
    title: product.title,
    subtitle: 'Manage product settings, service configuration, related addons, and upgrade paths.'|trans
} %}
    {% block detail_tabs %}
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="settings-tab" data-bs-toggle="tab" data-bs-target="#tab-settings" type="button" role="tab" aria-controls="index" aria-selected="true">{{ 'General Settings'|trans }}</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="config-tab" data-bs-toggle="tab" data-bs-target="#tab-config" type="button" role="tab" aria-controls="index" aria-selected="true">{{ 'Configuration'|trans }}</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="addons-tab" data-bs-toggle="tab" data-bs-target="#tab-addons" type="button" role="tab" aria-controls="index" aria-selected="true">{{ 'Addons'|trans }}</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="upgrades-tab" data-bs-toggle="tab" data-bs-target="#tab-upgrades" type="button" role="tab" aria-controls="index" aria-selected="true">{{ 'Upgrades'|trans }}</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="links-tab" data-bs-toggle="tab" data-bs-target="#tab-links" type="button" role="tab" aria-controls="index" aria-selected="true">{{ 'Links'|trans }}</button>
                    </li>
    {% endblock %}

    {% block detail_tab_content %}
        {% import 'macro_functions.html.twig' as mf %}
        <div class="tab-pane fade show active" id="tab-settings" role="tabpanel">
            <div class="p-3">
                <form method="post" action="admin/product/update" name="form" {{ fb_api_form({message: 'Product Configuration Updated'|trans}) }}>
                    {% embed 'partial_admin_form_card.html.twig' with {
                        title: 'Product Settings'|trans,
                        subtitle: 'Manage visibility, fulfillment behavior, stock controls, pricing, and ordering details for this product.'|trans
                    } %}
                        {% import 'macro_functions.html.twig' as mf %}
                        {% block form_content %}
                            <div class="row g-3">
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Title'|trans }}</label>
                                    <input class="form-control" type="text" name="title" value="{{ product.title }}" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Slug'|trans }}</label>
                                    <input class="form-control" type="text" name="slug" value="{{ product.slug }}" required>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Category'|trans }}</label>
                                    {{ mf.selectbox('product_category_id', guest.product_category_get_pairs, product.product_category_id, 0, 'None') }}
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Icon/Image URL'|trans }}</label>
                                    <input class="form-control" type="text" name="icon_url" id="bb-icon" value="{{ product.icon_url }}">
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Status'|trans }}</label>
                                    <select class="form-select" name="status">
                                        <option value="enabled"{% if product.status == 'enabled' %} selected{% endif %}>{{ 'Enabled'|trans }}</option>
                                        <option value="disabled"{% if product.status == 'disabled' %} selected{% endif %}>{{ 'Disabled'|trans }}</option>
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Activation'|trans }}</label>
                                    <select class="form-select" name="setup">
                                        <option value="after_order"{% if product.setup == 'after_order' %} selected{% endif %}>{{ 'After Order is Placed'|trans }}</option>
                                        <option value="after_payment"{% if product.setup == 'after_payment' %} selected{% endif %}>{{ 'After Payment is Received'|trans }}</option>
                                        <option value="manual"{% if product.setup == 'manual' %} selected{% endif %}>{{ 'Manual Activation'|trans }}</option>
                                    </select>
                                </div>
                                <div class="col-12">
                                    <input type="hidden" name="hidden" value="0">
                                    <label class="form-label d-block">{{ 'Storefront Visibility'|trans }}</label>
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" name="hidden" value="1"{% if product.hidden %} checked{% endif %} id="hidden-toggle">
                                        <span class="form-check-label">{{ 'Hide this product from public order pages'|trans }}</span>
                                    </label>
                                    <div class="form-text">{{ 'Hidden products remain usable for existing orders and direct links, but they will not appear in normal product listings.'|trans }}</div>
                                </div>
                                {% if guest.extension_is_on({ 'mod': 'formbuilder' }) %}
                                <div class="col-12">
                                    <label class="form-label">{{ 'Order Form'|trans }}</label>
                                    {% set tpl = 'mod_service' ~ product.type ~ '_order_form.html.twig' %}
                                    {% if guest.system_template_exists({ 'file': tpl }) %}
                                        <div class="border rounded p-3 bg-body-tertiary">
                                            <p class="text-secondary mb-2">{{ 'This product type uses a shared service-specific order form template.'|trans }}</p>
                                            <div class="mb-2"><code>{{ tpl }}</code></div>
                                            <div class="text-secondary">{{ 'Edit that template to change the order form for'|trans }} <strong>{{ product.type }}</strong> {{ 'products.'|trans }}</div>
                                        </div>
                                    {% else %}
                                        <div class="input-group">
                                            {{ mf.selectbox('form_id', admin.formbuilder_get_pairs, product.form_id, 0, 'None') }}
                                            <a href="{{ 'extension/settings/formbuilder'|url }}{% if product.form_id %}?id={{ product.form_id }}{% endif %}" class="btn" id="formbuilder_btn">
                                                {% if product.form_id %}
                                                <svg class="icon">
                                                    <use xlink:href="#edit" />
                                                </svg>
                                                {{ 'Edit'|trans }}
                                                {% else %}
                                                <svg class="icon">
                                                    <use xlink:href="#plus" />
                                                </svg>
                                                {{ 'Add New'|trans }}
                                                {% endif %}
                                            </a>
                                        </div>
                                    {% endif %}
                                </div>
                                {% endif %}
                            </div>

                            <div class="d-flex flex-column gap-1 mt-4 mb-4">
                                <h6 class="card-title mb-0">{{ 'Pricing and Stock Control'|trans }}</h6>
                                <p class="text-secondary mb-0">{{ 'Control inventory limits and configure how this product is priced and billed.'|trans }}</p>
                            </div>
                            <div class="row g-3">
                                <div class="col-lg-6">
                                    <input type="hidden" name="stock_control" value="0">
                                    <label class="form-label d-block">{{ 'Stock Control'|trans }}</label>
                                    <label class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="stock-control-toggle" name="stock_control" value="1"{% if product.stock_control %} checked{% endif %}>
                                        <span class="form-check-label">{{ 'Track available stock for this product'|trans }}</span>
                                    </label>
                                    <div class="form-text">{{ 'When enabled, ordering can be limited by the quantity available below.'|trans }}</div>
                                </div>
                                <div class="col-lg-6">
                                    <label class="form-label">{{ 'Quantity in Stock'|trans }}</label>
                                    <input class="form-control" type="text" name="quantity_in_stock" value="{{ product.quantity_in_stock }}">
                                </div>
                            </div>

                            <div class="mt-4">
                                {{ include('partial_pricing.html.twig', { 'product': product }) }}
                            </div>

                            <div class="mt-4">
                                <label class="form-label">{{ 'Description'|trans }}</label>
                                <div class="form-text mb-2">{{ 'Edit the client-facing description shown on the order page for this product.'|trans }}</div>
                                <textarea class="editor-textarea" name="description" rows="5">{{ product.description }}</textarea>
                            </div>

                            <input type="hidden" name="id" value="{{ product.id }}">
                        {% endblock %}

                        {% block form_actions %}
                            <button type="submit" class="btn btn-primary">{{ 'Update'|trans }}</button>
                        {% endblock %}
                    {% endembed %}
                </form>
            </div>
        </div>

        <div class="tab-pane fade" id="tab-config" role="tabpanel" aria-labelledby="config-tab">
            {% set service_partial = 'mod_service' ~ product.type ~ '_config.html.twig' %}
            {% if admin.system_template_exists({ 'file': service_partial }) %}
                <div class="p-3">
                    {{ include(service_partial, { 'product': product }) }}
                </div>
            {% else %}
                <div class="p-3">
                    {% embed 'partial_admin_related_section.html.twig' with {
                        title: 'Configuration'|trans,
                        subtitle: 'This product type does not require any additional service-specific configuration.'|trans,
                        card_class: 'mb-0'
                    } %}
                        {% block section_content %}{% endblock %}
                    {% endembed %}
                </div>
            {% endif %}
        </div>

        <div class="tab-pane fade" id="tab-addons" role="tabpanel" aria-labelledby="addons-tab">
            <form method="post" action="admin/product/update" {{ fb_api_form({message: 'Product Configuration Updated'|trans}) }}>
                {% embed 'partial_admin_related_section.html.twig' with {
                    title: 'Product Addons'|trans,
                    subtitle: 'Choose which addons can be sold alongside this product and jump directly to addon editing when needed.'|trans,
                    card_class: 'm-3'
                } %}
                    {% block section_content %}
                        <input type="hidden" name="addons[]" value="">
                        {% set addon_pairs = admin.product_addon_get_pairs %}
                        {% if addon_pairs|length > 0 %}
                            <div class="list-group list-group-flush">
                                {% for addon_id, addon_title in addon_pairs %}
                                <div class="list-group-item d-flex align-items-center gap-3">
                                    <input class="form-check-input mt-0" type="checkbox" name="addons[]" value="{{ addon_id }}" id="addon_{{ addon_id }}"{% if addon_id in assigned_addons %} checked{% endif %}>
                                    <label class="mb-0 flex-grow-1" for="addon_{{ addon_id }}">{{ addon_title }}</label>
                                    <a class="btn btn-icon" href='{{ "product/addon/#{addon_id}"|url }}'>
                                        <svg class="icon">
                                            <use xlink:href="#edit" />
                                        </svg>
                                    </a>
                                </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="card-body pt-0">
                                <p class="text-muted mb-0">{{ 'The list is empty'|trans }}</p>
                            </div>
                        {% endif %}
                    {% endblock %}

                    {% block section_footer %}
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{{ 'product/addons'|url }}#tab-new" class="btn btn-primary">
                                <svg class="icon">
                                    <use xlink:href="#plus" />
                                </svg>
                                {{ 'Create New Addon'|trans }}
                            </a>
                            <input type="hidden" name="id" value="{{ product.id }}">
                            <input type="submit" value="{{ 'Update'|trans }}" class="btn btn-primary">
                        </div>
                    {% endblock %}
                {% endembed %}
            </form>
        </div>

        <div class="tab-pane fade" id="tab-upgrades" role="tabpanel">
            <form method="post" action="admin/product/update" {{ fb_api_form({message: 'Product Configuration Updated'|trans}) }}>
                {% embed 'partial_admin_related_section.html.twig' with {
                    title: 'Product Upgrades'|trans,
                    subtitle: 'Choose which other products this product can upgrade to for existing clients.'|trans,
                    card_class: 'm-3'
                } %}
                    {% block section_content %}
                        <input type="hidden" name="upgrades[]" value=""/>
                        {% set products = admin.product_get_pairs %}
                        <div class="list-group list-group-flush">
                            {% for id,ptitle in products %}
                            {% if id != product.id %}
                            <div class="list-group-item d-flex align-items-center gap-3">
                                <input class="form-check-input mt-0" type="checkbox" name="upgrades[]" value="{{id}}" id="upgrades{{ id }}" {% if product.upgrades[id] %} checked{% endif %}>
                                <label class="mb-0 flex-grow-1" for="upgrades{{ id }}">{{ ptitle }}</label>
                            </div>
                            {% endif %}
                            {% endfor %}
                        </div>
                    {% endblock %}

                    {% block section_footer %}
                        <div class="d-flex justify-content-end">
                            <input type="hidden" name="id" value="{{ product.id }}">
                            <button type="submit" class="btn btn-primary">{{ 'Update'|trans }}</button>
                        </div>
                    {% endblock %}
                {% endembed %}
            </form>
        </div>

        <div class="tab-pane fade" id="tab-links" role="tabpanel">
            {% embed 'partial_admin_related_section.html.twig' with {
                title: 'Product Links'|trans,
                subtitle: 'Use these client-facing links to open the product order page directly or share it externally.'|trans,
                card_class: 'm-3'
            } %}
                {% block section_content %}
                    <div class="px-3 pb-3">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">{{ 'Order Page (via ID)'|trans }}</label>
                                <input class="form-control" type="text" value='{{ "order/#{product.id}"|url(area: 'client') }}' readonly>
                            </div>
                            <div class="col-12">
                                <label class="form-label">{{ 'Order Page (via Link)'|trans }}</label>
                                <input class="form-control" type="text" value='{{ "order/#{product.slug}"|url(area: 'client') }}' readonly>
                            </div>
                        </div>
                    </div>
                {% endblock %}

                {% block section_footer %}
                    <div class="d-flex justify-content-end">
                        <a href='{{ "order/#{product.slug}"|url(area: 'client') }}' class="btn btn-primary" target="_blank">
                            <svg class="icon" width="24" height="24">
                                <use xlink:href="#search" />
                            </svg>
                            <span>{{ 'View as Client'|trans }}</span>
                        </a>
                    </div>
                {% endblock %}
            {% endembed %}
        </div>
    {% endblock %}
{% endembed %}
{% endblock %}

{% block head %}{{ wysiwyg('.editor-textarea') }}{% endblock %}

{% block js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (document.querySelector("[name='form_id']")) {
            const formId = document.querySelector("[name='form_id']").value;
            const btn = document.getElementById("formbuilder_btn");

            if (formId !== "") {
                btn.innerHTML = "{{ 'Edit Form'|trans }}";
                const href = "{{ 'extension/settings/formbuilder'|url(query: { 'id': '' }) }}" + formId;
                btn.setAttribute('href', href);
            } else {
                btn.innerHTML = "{{ 'Add New Form'|trans }}";
                btn.setAttribute('href', "{{ 'extension/settings/formbuilder'|url }}");
            }
        }
    });
</script>
{% endblock %}
