{% extends "layouts/base.twig" %}

{% block title %}{{ translations.new_offer }}{% endblock %}

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.new_offer }}</h3>
        <p class="text-subtitle text-muted">{{ translations.create_offer_subtitle }}</p>
    </div>
{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-body">

            {% if information %}
                {% for inf in information %}
                    <div class="alert alert-info text-center col-md-4 offset-md-4">{{ inf }}</div>
                {% endfor %}
            {% endif %}

            {% if errors %}
                {% for error in errors %}
                    <div class="alert alert-danger text-center col-md-4 offset-md-4">{{ error }}</div>
                {% endfor %}
                <div class="text-center mt-4">
                    <a href="{{ root }}/client-offers" class="btn btn-secondary">{{ translations.back }}</a>
                </div>
            {% else %}
                <form method="POST" id="createOfferForm">

                    <div class="row">
                        <div class="col-md-6">
                            <label class="form-label">{{ translations.offer_name }}</label>
                            <input type="text" class="form-control" name="name" value="{{ old.name }}" required>

                            <label class="form-label mt-3">{{ translations.description }}</label>
                            <textarea class="form-control" name="description" rows="3">{{ old.description }}</textarea>

                            <label class="form-label mt-3">{{ translations.client }}</label>
                            <select class="form-select choices" name="id_client">
                                <option value="" disabled selected hidden>{{ translations.select_client }}</option>
                                {% for client in clients %}
                                    <option value="{{ client.id }}" {% if old.id_client == client.id %}selected{% endif %}>
                                        {{ client.absoluteName }}
                                    </option>
                                {% endfor %}
                            </select>

                            <div class="form-check form-switch mt-3">
                                <input class="form-check-input" type="checkbox" id="in_store_pickup" name="in_store_pickup" value="1" {% if old.in_store_pickup %}checked{% endif %}>
                                <label class="form-check-label" for="in_store_pickup">{{ translations.in_store_pickup }}</label>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-6">
                                    <label class="form-label">{{ translations.delivery_street }}</label>
                                    <input type="text" class="form-control" name="delivery_street" id="delivery_street" value="{{ old.delivery_street }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">{{ translations.delivery_zip }}</label>
                                    <input type="text" class="form-control" name="delivery_zip" id="delivery_zip" value="{{ old.delivery_zip }}">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">{{ translations.delivery_city }}</label>
                                    <input type="text" class="form-control" name="delivery_city" id="delivery_city" value="{{ old.delivery_city }}">
                                </div>
                            </div>

                            <label class="form-label mt-3">
                                {{ translations.delivery_cost }} [{{ currency_symbol }}]
                            </label>
                            <input type="number" class="form-control" name="delivery_cost" id="delivery_cost" step="0.01" value="{{ old.delivery_cost }}">
                        </div>

                        <div class="col-md-1"></div>

                        <div class="col-md-5">
                            <label class="form-label">{{ translations.conditions }}</label>
                            <textarea class="form-control" name="conditions" rows="3">{{ old.conditions }}</textarea>

                            <label class="form-label mt-3">{{ translations.event_day }}</label>
                            <input type="datetime-local" class="form-control" name="event_day" value="{{ old.event_day }}">

                            <div class="form-check form-switch mt-3">
                                <input class="form-check-input" type="checkbox" id="active" name="active" value="1" {% if old.active is not defined or old.active %}checked{% endif %}>
                                <label class="form-check-label" for="active">{{ translations.active }}</label>
                            </div>
                        </div>
                    </div>

                    <hr class="my-4">

                    <div id="productSection">
                        <h5>{{ translations.offer_products }}</h5>
                        <table class="table" id="productsTable">
                            <thead>
                            <tr>
                                <th>{{ translations.product }}</th>
                                <th>{{ translations.quantity }}</th>
                                <th>{{ translations.unit_price }} [{{ currency_symbol }}]</th>
                                <th>{{ translations.discount_type }}</th>
                                <th>{{ translations.discount_value }}</th>
                                <th>{{ translations.calculated_discount }}</th>
                                <th>{{ translations.final_price }} [{{ currency_symbol }}]</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody id="productsBody">
                            {# dynamic rows via JavaScript #}
                            </tbody>
                            <tfoot>
                            <tr>
                                <td>
                                    <select id="productSelect" class="form-select choices">
                                        <option value="" disabled selected hidden>{{ translations.select_product }}</option>
                                        {% for p in products %}
                                            <option value="{{ p.id }}" data-price="{{ p.portion_price|number_format(2, '.', '') }}">
                                                {{ p.name }}
                                            </option>
                                        {% endfor %}
                                    </select>
                                </td>
                                <td><input type="number" id="quantityInput" class="form-control" min="1" value="1"></td>
                                <td class="price-cell">—</td>
                                <td>
                                    <select id="discountType" class="form-select">
                                        <option value="1" data-sign="%">{{ translations.percentage }}</option>
                                        <option value="2" data-sign="{{ currency_symbol }}">{{ translations.fixed_amount }}</option>
                                    </select>
                                </td>
                                <td><input type="number" id="discountInput" class="form-control" step="0.01"></td>
                                <td class="calculated-discount-cell">—</td>
                                <td class="final-price-cell">—</td>
                                <td><button type="button" class="btn btn-success" id="addProductBtn">{{ translations.add }}</button></td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-6">
                            <button type="submit" class="btn btn-primary">{{ translations.create_offer }}</button>
                        </div>
                        <div class="col-md-6 text-end">
                            <a href="{{ root }}/client-offers" class="btn btn-secondary">{{ translations.back }}</a>
                        </div>
                    </div>
                </form>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        const productPrices = {
            {% for p in products %}
            "{{ p.id }}": {{ p.portionPrice|number_format(2, '.', '') }}{% if not loop.last %},{% endif %}
            {% endfor %}
        };




        const currencySymbol = '{{ currency_symbol }}';

        document.addEventListener('DOMContentLoaded', () => {
            const inStorePickup = document.getElementById('in_store_pickup');
            const deliveryFields = ['delivery_street', 'delivery_zip', 'delivery_city', 'delivery_cost'];

            function toggleDeliveryFields() {
                const disabled = inStorePickup.checked;
                deliveryFields.forEach(id => {
                    const el = document.getElementById(id);
                    if (el) el.disabled = disabled;
                });
            }

            inStorePickup.addEventListener('change', toggleDeliveryFields);
            toggleDeliveryFields();

            const productSelect = document.getElementById('productSelect');
            const quantityInput = document.getElementById('quantityInput');
            const priceCell = document.querySelector('.price-cell');
            const discountType = document.getElementById('discountType');
            const discountInput = document.getElementById('discountInput');
            const calcDiscountCell = document.querySelector('.calculated-discount-cell');
            const finalPriceCell = document.querySelector('.final-price-cell');
            const addProductBtn = document.getElementById('addProductBtn');
            const tbody = document.getElementById('productsBody');

            function refresh() {
                const price = parseFloat(productPrices[productSelect.value]) || 0;
                const qty = parseInt(quantityInput.value) || 1;
                const discountValue = parseFloat(discountInput.value) || 0;
                const discountAmt = discountType.value === '1' ? price * discountValue / 100 : discountValue;

                priceCell.textContent = price.toFixed(2);
                calcDiscountCell.textContent = discountAmt.toFixed(2) + currencySymbol;
                finalPriceCell.textContent = ((price - discountAmt) * qty).toFixed(2);
            }

            productSelect.addEventListener('change', refresh);
            quantityInput.addEventListener('input', refresh);
            discountType.addEventListener('change', refresh);
            discountInput.addEventListener('input', refresh);

            addProductBtn.addEventListener('click', () => {
                const prodId = productSelect.value;
                if (!prodId || tbody.querySelector(`[name="products[${prodId}][id_product]"]`)) {
                    alert('{{ translations.product_already_added }}');
                    return;
                }

                const name = productSelect.selectedOptions[0].text;
                const price = parseFloat(productPrices[prodId]) || 0;
                const qty = parseInt(quantityInput.value) || 1;
                const discountValue = parseFloat(discountInput.value) || 0;
                const discountAmt = discountType.value === '1' ? price * discountValue / 100 : discountValue;
                const finalPrice = (price - discountAmt) * qty;

                const row = document.createElement('tr');
                row.innerHTML = `
                <td>${name}<input type="hidden" name="products[${prodId}][product_name]" value="${name}"><input type="hidden" name="products[${prodId}][id_product]" value="${prodId}"></td>
                <td>${qty}<input type="hidden" name="products[${prodId}][quantity]" value="${qty}"></td>
                <td>${price.toFixed(2)}<input type="hidden" name="products[${prodId}][unit_price]" value="${price.toFixed(2)}"></td>
                <td>${discountType.options[discountType.selectedIndex].text}<input type="hidden" name="products[${prodId}][id_discount_type]" value="${discountType.value}"></td>
                <td>${discountValue}${discountType.options[discountType.selectedIndex].dataset.sign}<input type="hidden" name="products[${prodId}][discount_value]" value="${discountValue}"></td>
                <td>${discountAmt.toFixed(2)}${currencySymbol}<input type="hidden" name="products[${prodId}][discount_amount]" value="${discountAmt.toFixed(2)}"></td>
                <td>${finalPrice.toFixed(2)}<input type="hidden" name="products[${prodId}][final_total_price]" value="${finalPrice.toFixed(2)}"></td>
                <td><button type="button" class="btn btn-danger btn-sm" onclick="this.closest('tr').remove()">×</button></td>
            `;
                tbody.appendChild(row);

                // reset
                productSelect.selectedIndex = 0;
                quantityInput.value = 1;
                discountType.selectedIndex = 0;
                discountInput.value = '';
                refresh();
            });


            refresh();
        });


        //make form submission via AJAX
        document.getElementById('createOfferForm').addEventListener('submit', function(event) {
            event.preventDefault();
            const formData = new FormData(this);

            const data = {
                name: formData.get('name'),
                description: formData.get('description'),
                id_client: formData.get('id_client'),
                in_store_pickup: formData.get('in_store_pickup') ? 1 : 0,
                delivery_street: formData.get('delivery_street'),
                delivery_zip: formData.get('delivery_zip'),
                delivery_city: formData.get('delivery_city'),
                delivery_cost: parseFloat(formData.get('delivery_cost')) || 0,
                conditions: formData.get('conditions'),
                event_day: formData.get('event_day'),
                active: formData.get('active') ? 1 : 0,
                products: []
            }

            const rows = document.querySelectorAll('#productsBody tr');
            rows.forEach(row=>{
                const productId = row.querySelector('input[name^="products["][name$="[id_product]"]').value;
                if (productId) {
                    data.products.push({
                        id_product: productId,
                        product_name: row.querySelector('input[name^="products["][name$="[product_name]"]').value,
                        quantity: parseInt(row.querySelector('input[name^="products["][name$="[quantity]"]').value) || 1,
                        unit_price: parseFloat(row.querySelector('input[name^="products["][name$="[unit_price]"]').value) || 0,
                        id_discount_type: row.querySelector('input[name^="products["][name$="[id_discount_type]"]').value,
                        discount_value: parseFloat(row.querySelector('input[name^="products["][name$="[discount_value]"]').value) || 0,
                        discount_amount: parseFloat(row.querySelector('input[name^="products["][name$="[discount_amount]"]').value) || 0,
                        final_total_price: parseFloat(row.querySelector('input[name^="products["][name$="[final_total_price]"]').value) || 0
                    });
                }
            })

            api(`/ajax/client-offers`, {
                method: 'POST',
                data
            }).then(response => {
                if (response.ok) {
                    window.location.href = '/client-offers';
                } else {
                    return response.json().then(error => {
                        console.error('Error:', error);
                        alert('An error occurred while creating the offer.');
                    });
                }
            }).catch(error => {
                console.error('Error:', error);
                alert('An error occurred while creating the offer.');
            });
        });
    </script>
{% endblock %}