{% if product.type != 'domain' %}
{% set currency_code = admin.currency_get_default.code %}

<div class="d-flex flex-column gap-1 mb-4">
    <h6 class="card-title mb-0">{{ 'Billing Model'|trans }}</h6>
    <p class="text-secondary mb-0">{{ 'Choose whether this product is free, billed once, or billed on a recurring schedule.'|trans }}</p>
</div>

<div class="pp_type mb-4">
    <div class="d-flex flex-wrap gap-3">
        <label class="form-check">
            <input class="form-check-input" type="radio" name="pricing[type]" value="free"{% if product.pricing.type == 'free' %} checked{% endif %} id="pricing-free">
            <span class="form-check-label">{{ 'Free'|trans }}</span>
        </label>
        <label class="form-check">
            <input class="form-check-input" type="radio" name="pricing[type]" value="once"{% if product.pricing.type == 'once' %} checked{% endif %} id="pricing-once">
            <span class="form-check-label">{{ 'One Time'|trans }}</span>
        </label>
        <label class="form-check">
            <input class="form-check-input" type="radio" name="pricing[type]" value="recurrent"{% if product.pricing.type == 'recurrent' %} checked{% endif %} id="pricing-recurrent">
            <span class="form-check-label">{{ 'Recurrent'|trans }}</span>
        </label>
    </div>
</div>

<div class="pp-pane free"{% if product.pricing.type != 'free' %} style="display:none;"{% endif %}>
    <div class="border rounded p-3 bg-body-tertiary text-secondary">
        {{ 'This product will be available without charge.'|trans }}
    </div>
</div>

<div class="pp-pane once"{% if product.pricing.type != 'once' %} style="display:none;"{% endif %}>
    <div class="table-responsive border rounded">
        <table class="pp table card-table table-vcenter mb-0">
            <thead>
                <tr>
                    <th>{{ 'Billing Period'|trans }}</th>
                    <th>{{ 'Setup Price'|trans }} ({{ currency_code }})</th>
                    <th>{{ 'Price'|trans }} ({{ currency_code }})</th>
                    <th>{{ 'Total'|trans }}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="fw-medium">{{ 'One Time'|trans }}</td>
                    <td>
                        <input type="text" class="form-control price setup_price" name="pricing[once][setup]" value="{{ product.pricing.once.setup }}">
                    </td>
                    <td>
                        <input type="text" class="form-control price bill_price" name="pricing[once][price]" value="{{ product.pricing.once.price }}">
                    </td>
                    <td>
                        <input type="text" class="form-control total price" readonly disabled>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="pp-pane recurrent"{% if product.pricing.type != 'recurrent' %} style="display:none;"{% endif %}>
    <div class="table-responsive border rounded">
        <table class="pp table card-table table-vcenter mb-0">
            <thead>
                <tr>
                    <th>{{ 'Billing Period'|trans }}</th>
                    <th>{{ 'Setup Price'|trans }} ({{ currency_code }})</th>
                    <th>{{ 'Price for Period'|trans }} ({{ currency_code }})</th>
                    <th>{{ 'First Payment Sum'|trans }}</th>
                    <th class="w-1 text-center">{{ 'Enabled'|trans }}</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="fw-medium">{{ 'Weekly'|trans }}</td>
                    <td><input class="form-control price setup_price" type="text" name="pricing[recurrent][1W][setup]" value="{{ product.pricing.recurrent['1W'].setup }}"></td>
                    <td><input class="form-control price bill_price" type="text" name="pricing[recurrent][1W][price]" value="{{ product.pricing.recurrent['1W'].price }}"></td>
                    <td><input class="form-control total price" type="text" readonly disabled></td>
                    <td class="text-center"><input class="form-check-input" type="checkbox" name="pricing[recurrent][1W][enabled]" value="1"{% if (product.pricing.type == 'recurrent') and (product.pricing.recurrent['1W'].enabled) %} checked{% endif %}></td>
                </tr>
                <tr>
                    <td class="fw-medium">{{ 'Monthly'|trans }}</td>
                    <td><input type="text" class="form-control price setup_price" name="pricing[recurrent][1M][setup]" value="{{ product.pricing.recurrent['1M'].setup }}"></td>
                    <td><input type="text" class="form-control price bill_price" name="pricing[recurrent][1M][price]" value="{{ product.pricing.recurrent['1M'].price }}"></td>
                    <td><input type="text" class="form-control total price" readonly disabled></td>
                    <td class="text-center"><input class="form-check-input" type="checkbox" name="pricing[recurrent][1M][enabled]" value="1"{% if (product.pricing.type == 'recurrent') and (product.pricing.recurrent['1M'].enabled) %} checked{% endif %}></td>
                </tr>
                <tr>
                    <td class="fw-medium">{{ 'Every 3 Months'|trans }}</td>
                    <td><input type="text" class="form-control price setup_price" name="pricing[recurrent][3M][setup]" value="{{ product.pricing.recurrent['3M'].setup }}"></td>
                    <td><input type="text" class="form-control price bill_price" name="pricing[recurrent][3M][price]" value="{{ product.pricing.recurrent['3M'].price }}"></td>
                    <td><input type="text" class="form-control total price" readonly disabled></td>
                    <td class="text-center"><input class="form-check-input" type="checkbox" name="pricing[recurrent][3M][enabled]" value="1"{% if (product.pricing.type == 'recurrent') and (product.pricing.recurrent['3M'].enabled) %} checked{% endif %}></td>
                </tr>
                <tr>
                    <td class="fw-medium">{{ 'Every 6 Months'|trans }}</td>
                    <td><input type="text" class="form-control price setup_price" name="pricing[recurrent][6M][setup]" value="{{ product.pricing.recurrent['6M'].setup }}"></td>
                    <td><input type="text" class="form-control price bill_price" name="pricing[recurrent][6M][price]" value="{{ product.pricing.recurrent['6M'].price }}"></td>
                    <td><input type="text" class="form-control total price" readonly disabled></td>
                    <td class="text-center"><input class="form-check-input" type="checkbox" name="pricing[recurrent][6M][enabled]" value="1"{% if (product.pricing.type == 'recurrent') and (product.pricing.recurrent['6M'].enabled) %} checked{% endif %}></td>
                </tr>
                <tr>
                    <td class="fw-medium">{{ 'Every Year'|trans }}</td>
                    <td><input type="text" class="form-control price setup_price" name="pricing[recurrent][1Y][setup]" value="{{ product.pricing.recurrent['1Y'].setup }}"></td>
                    <td><input type="text" class="form-control price bill_price" name="pricing[recurrent][1Y][price]" value="{{ product.pricing.recurrent['1Y'].price }}"></td>
                    <td><input type="text" class="form-control total price" readonly disabled></td>
                    <td class="text-center"><input class="form-check-input" type="checkbox" name="pricing[recurrent][1Y][enabled]" value="1"{% if (product.pricing.type == 'recurrent') and (product.pricing.recurrent['1Y'].enabled) %} checked{% endif %}></td>
                </tr>
                <tr>
                    <td class="fw-medium">{{ 'Every 2 Years'|trans }}</td>
                    <td><input type="text" class="form-control price setup_price" name="pricing[recurrent][2Y][setup]" value="{{ product.pricing.recurrent['2Y'].setup }}"></td>
                    <td><input type="text" class="form-control price bill_price" name="pricing[recurrent][2Y][price]" value="{{ product.pricing.recurrent['2Y'].price }}"></td>
                    <td><input type="text" class="form-control total price" readonly disabled></td>
                    <td class="text-center"><input class="form-check-input" type="checkbox" name="pricing[recurrent][2Y][enabled]" value="1"{% if (product.pricing.type == 'recurrent') and (product.pricing.recurrent['2Y'].enabled) %} checked{% endif %}></td>
                </tr>
                <tr>
                    <td class="fw-medium">{{ 'Every 3 Years'|trans }}</td>
                    <td><input type="text" class="form-control price setup_price" name="pricing[recurrent][3Y][setup]" value="{{ product.pricing.recurrent['3Y'].setup }}"></td>
                    <td><input type="text" class="form-control price bill_price" name="pricing[recurrent][3Y][price]" value="{{ product.pricing.recurrent['3Y'].price }}"></td>
                    <td><input type="text" class="form-control total price" readonly disabled></td>
                    <td class="text-center"><input class="form-check-input" type="checkbox" name="pricing[recurrent][3Y][enabled]" value="1"{% if (product.pricing.type == 'recurrent') and (product.pricing.recurrent['3Y'].enabled) %} checked{% endif %}></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        document.querySelectorAll('.pp input.price:not(:disabled)').forEach(function(input) {
            function updateTotal() {
                const row = input.closest('tr');
                const setupPrice = row.querySelector('input.setup_price').value;
                const billPrice = row.querySelector('input.bill_price').value;
                const total = countTotal(billPrice, setupPrice);
                const totalInput = row.querySelector('input.total');
                totalInput.value = total;
            }

            input.addEventListener('input', updateTotal);
            updateTotal();
        });

        document.querySelectorAll('.pp input.price:not(:disabled)').forEach(function(input) {
            input.addEventListener('change', function() {
                const row = this.closest('tr');
                const setupPrice = row.querySelector('input.setup_price').value;
                const billPrice = row.querySelector('input.bill_price').value;
                const total = countTotal(billPrice, setupPrice);
                const checkbox = row.querySelector('input.form-check-input');
                if (checkbox) {
                    checkbox.checked = total > 0;
                }
            });
        });

        document.querySelectorAll('.pp_type input').forEach(function(input) {
            input.addEventListener('click', function() {
                document.querySelectorAll('.pp-pane').forEach(function(pane) {
                    pane.style.display = 'none';
                });

                const nextPane = document.querySelector('.pp-pane.' + this.value);
                if (nextPane) {
                    nextPane.style.display = '';
                }
            });
        });
    });

    function countTotal(p, s) {
        p = parseFloat(p);
        s = parseFloat(s);

        const num = p + s;

        if (!isNaN(num)) {
            return num.toFixed(2);
        }

        return (0).toFixed(2);
    }
</script>
{% endif %}
