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

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

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

{% block content %}
    <div class="card">
        <div class="card-body">
            <form id="createOrderForm">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <label class="form-label">{{ translations.select_client }}</label>
                        <select class="form-select choices" id="clientSelect" name="id_client">
                            {% for client in b2b_clients %}
                                <option data-type="b2b" value="{{ client.id }}">
                                    {{ client.companyName }} ({{ client.phone }})
                                </option>
                            {% endfor %}
                            {% for client in b2c_clients %}
                                <option data-type="b2c" value="{{ client.id }}">
                                    {{ client.name }} {{ client.surname }} ({{ client.phone }})
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">{{ translations.pick_up_datetime }}</label>
                        <input type="datetime-local" class="form-control" name="pick_up_datetime" id="pickUpDateTime" required>
                    </div>
                </div>

                <div class="row mb-3">

                    <div class="col-md-6">
                        <label class="form-label">{{ translations.comment }}</label>
                        <textarea class="form-control" name="comment" rows="2"></textarea>
                    </div>
                </div>

                <hr>

                <div class="mb-3">
                    <label class="form-label">{{ translations.products }}</label>
                    <table class="table table-bordered" id="productsTable">
                        <thead>
                        <tr>
                            <th style="width: 35%">{{ translations.product }}</th>
                            <th style="width: 20%">{{ translations.quantity }}</th>
                            <th style="width: 20%">{{ translations.unit_price_short }}</th>
                            <th style="width: 20%">{{ translations.total_price_short }}</th>
                            <th style="width: 5%"></th>
                        </tr>
                        </thead>
                        <tbody id="productRows">
                        <!-- Dynamic rows -->
                        </tbody>
                        <tfoot>
                        <tr>
                            <td>
                                <select class="form-select choices" id="productSelect">
                                    <option value="">{{ translations.select_product }}</option>
                                    {% for product in products %}
                                        <option value="{{ product.id }}">
                                            {{ product.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </td>
                            <td><input type="number" class="form-control" id="productQty" min="1" value="1"></td>
                            <td><input type="number" class="form-control" id="productPrice" step="0.01" readonly></td>
                            <td></td>
                            <td><button type="button" class="btn btn-success" id="addProductBtn">{{ translations.add }}</button></td>
                        </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="mb-3 text-end">
                    <strong>{{ translations.order_value }}: </strong>
                    <span id="orderTotal">0.00</span>
                </div>

                <div class="text-end mt-5">
                    <button type="submit" class="btn btn-primary">{{ translations.submit_order }}</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script>
        let productIndex = 0;
        const products = {{ products|json_encode|raw }};
        const productSelect = document.getElementById('productSelect');
        const addProductBtn = document.getElementById('addProductBtn');
        const productRows = document.getElementById('productRows');
        const orderTotal = document.getElementById('orderTotal');

        addProductBtn.addEventListener('click', function () {
            const selectedOption = productSelect.options[productSelect.selectedIndex];
            const productId = selectedOption.value;
            const productName = selectedOption.text;
            const unitPrice = parseFloat(document.getElementById('productPrice').value);
            const quantity = parseInt(document.getElementById('productQty').value);

            if (!productId || isNaN(unitPrice) || isNaN(quantity) || quantity <= 0) return;

            const existingRow = Array.from(productRows.querySelectorAll('tr')).find(row => {
                return row.querySelector('.product-id').value === productId;
            });
            if (existingRow) {
                const existingQuantity = parseInt(existingRow.querySelector('.product-quantity').value);
                const newQuantity = existingQuantity + quantity;
                existingRow.querySelector('.product-quantity').value = newQuantity;
                const newTotalPrice = (parseFloat(existingRow.querySelector('.product-price').value) * newQuantity).toFixed(2);
                existingRow.querySelector('.product-total').value = newTotalPrice;
                calculateTotal();
                productSelect.choices.setChoiceByValue('');
                document.getElementById('productQty').value = 1;
                document.getElementById('productPrice').value = '';
                return;
            }



            const totalPrice = (unitPrice * quantity).toFixed(2);

            const row = document.createElement('tr');
            row.innerHTML = `
                    <td>
                        <input type="hidden" class="product-id" value="${productId}">
                        ${productName}
                    </td>
                    <td><input type="number" class="form-control product-quantity" value="${quantity}" readonly></td>
                    <td><input type="number" class="form-control product-price" value="${unitPrice.toFixed(2)}" readonly></td>
                    <td><input type="number" class="form-control product-total" value="${totalPrice}" readonly></td>
                    <td><button type="button" class="btn btn-danger btn-sm remove-row float-end">&times;</button></td>
                `;

            productRows.appendChild(row);
            productIndex++;

            row.querySelector('.remove-row').addEventListener('click', () => {
                row.remove();
                calculateTotal();
            });

            productRows.appendChild(row);

            calculateTotal();

            productSelect.choices.setChoiceByValue('');
            document.getElementById('productQty').value = 1;
            document.getElementById('productPrice').value = '';
        });

        window.addEventListener('DOMContentLoaded', function () {
            const now = new Date();
            const pad = (n) => n.toString().padStart(2, '0');

            const formattedNow = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;

            const input = document.getElementById('pickUpDateTime');
            if (input) {
                input.min = formattedNow;
            }
        });

        productSelect.addEventListener('change', function () {
            const productId = parseInt(this.value);
            const product = products.find(p => p.id === productId);
            const price = product ? parseFloat(product.portion_price) : 0;

            document.getElementById('productPrice').value = price.toFixed(2);
        });

        function calculateTotal() {
            let total = 0;
            productRows.querySelectorAll('tr').forEach(row => {
                const price = parseFloat(row.querySelectorAll('td')[3].querySelector('input').value);
                total += price;
            });
            orderTotal.textContent = total.toFixed(2);
        }

        const form = document.getElementById("createOrderForm");
        form.addEventListener("submit", function (e) {
            e.preventDefault();

            const formData = new FormData(form);

            const data = {
                id_client: formData.get('id_client'),
                pick_up_datetime: formData.get('pick_up_datetime'),
                comment: formData.get('comment'),
                products: []
            };

            // Zbieranie produktów
            const rows = productRows.querySelectorAll('tr');
            rows.forEach(row => {
                const id_product = parseInt(row.querySelector('.product-id').value);
                const name = row.querySelector('td').textContent.trim();
                const weight = 0;
                const item_discount_value = 0;
                const quantity = parseFloat(row.querySelector('.product-quantity').value);
                const unit_gross_price = parseFloat(row.querySelector('.product-price').value);
                const total_gross_value_after_discount = quantity* unit_gross_price;

                data.products.push({
                    id_product,
                    name,
                    weight,
                    item_discount_value,
                    quantity,
                    unit_gross_price,
                    total_gross_value_after_discount
                });
            });

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

    </script>
{% endblock %}