{# views/product/details.twig #}
{% extends 'layouts/base.twig' %}

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

{% block page_heading %}
    <div class="page-heading">
        <h3>{{ translations.order }}</h3>
    </div>

    {% if errors is not empty %}
        <div class="row">
            <div class="col-12 col-md-4 offset-md-4">
                <div class="alert alert-danger text-center" role="alert">{{ errors|join('<br>')|raw }}</div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block content %}

    {# === SEKCJA FILTRÓW === #}
    <div class="row mb-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ translations.search }}</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-6 col-lg-4">
                                <label class="form-label">{{ translations.product }}</label>
                                <select class="form-select choices" id="materialSelect">
                                    <option value="">{{ translations.select_product }}</option>
                                    {% for material in ordered_materials %}
                                        <option value="{{ material.id_material }}">{{ material.material_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-auto">
                                <button class="btn btn-primary" id="searchByMaterialBtn" type="button">
                                    <i class="bi bi-search"></i> {{ translations.search }}
                                </button>
                            </div>
                            <div class="col-md-auto" id="clearFilterWrapper" style="display: none;">
                                <button class="btn btn-outline-secondary" id="clearFilterBtn" type="button">
                                    <i class="bi bi-x-circle"></i> {{ translations.clear_filters }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# === SEKCJA WYNIKÓW === #}
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">
                        {{ translations.realised_orders }}
                        <span id="filterBadge" class="badge bg-primary ms-2" style="display: none;"></span>
                    </h4>
                    <a href="{{ root }}/material-complaints" class="btn btn-primary btn-sm">
                        {{ translations.view_complaints }}
                    </a>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12">
                                <table class="table table-hover text-sm">
                                    <thead>
                                    <th style="width: 20%">{{ translations.supplier_name }}</th>
                                    <th style="width: 20%">{{ translations.order_key }}</th>
                                    <th style="width: 15%">{{ translations.order_date }}</th>
                                    <th style="width: 15%">{{ translations.acceptance_date }}</th>
                                    <th style="width: 15%">{{ translations.approximate_value }}</th>
                                    <th style="width: 15%"></th>
                                    </thead>
                                    <tbody id="realisedOrdersTbody">
                                    {% for order in realised_orders %}
                                        <tr>
                                            <td>{{ order.getSupplierName() }}</td>
                                            <td>{{ order.getOrderKey() }}</td>
                                            <td>{{ order.getOrderDate()|date("d-m-Y") }}</td>
                                            <td>{{ order.getDeliveredOnDate()|date("d-m-Y") }}</td>
                                            <td>{{ order.getApproximateValueNet() ~ constant('APP_CURRENCY_SYMBOL') }}</td>
                                            <td>
                                                <div class="btn-group" role="group" aria-label="Actions">
                                                    <button class="btn btn-outline-info btn-sm" type="button"
                                                            onclick="getOrderSummary({{ order.getId() }})">
                                                        {{ translations.pdf }}
                                                    </button>
                                                    <button class="btn btn-outline-primary btn-sm" type="button"
                                                            data-bs-toggle="modal" data-bs-target="#orderSummaryModal"
                                                            onclick="showOrderSummary({{ order.getId() }})">
                                                        {{ translations.details }}
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                    </tbody>
                                </table>
                                <div id="realisedOrdersEmpty" class="text-center text-muted py-4" style="display: none;">
                                    {{ translations.items_not_found }}
                                </div>
                                <div id="realisedOrdersLoader" class="text-center py-4" style="display: none;">
                                    <div class="spinner-border text-primary" role="status">
                                        <span class="visually-hidden">{{ translations.loading }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# === MODAL SZCZEGÓŁÓW === #}
    <div class="modal fade" id="orderSummaryModal" tabindex="-1" aria-labelledby="orderSummaryModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="orderSummaryModalLabel">{{ translations.order_summary }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12 mt-3">
                            <span class="font-bold">{{ translations.order_date }}:</span> <span id="order_date"></span>
                        </div>
                        <div class="col-12 mt-3">
                            <span class="font-bold">{{ translations.total }}:</span> <span id="total_order_value"></span>
                        </div>
                        <div class="col-12 mt-3">
                            <span class="font-bold">{{ translations.expected_delivery_date }}:</span> <span id="expected_date"></span>
                        </div>
                        <div class="col-12 mt-3">
                            <span class="font-bold">{{ translations.delivered }}:</span> <span id="delivered_on_date"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-hover text-sm">
                                <thead>
                                <th style="width: 30%">{{ translations.item }}</th>
                                <th style="width: 10%" class="text-center">{{ translations.ordered }}</th>
                                <th style="width: 10%" class="text-center">{{ translations.delivered }}</th>
                                <th style="width: 10%" class="text-center">{{ translations.difference }}</th>
                                <th style="width: 15%" class="text-end">{{ translations.single_pack_price }}</th>
                                <th style="width: 15%" class="text-end">{{ translations.total_price }}</th>
                                <th style="width: 25%" class="text-end"></th>
                                </thead>
                                <tbody id="orderSummaryTbody">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ translations.close }}</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block scripts %}

    <script src="{{ root }}/assets/js/bootstrap.bundle.min.js"></script>

    <script type="text/javascript">

        // =============================================
        // MODAL
        // =============================================
        var orderSummaryModal = new bootstrap.Modal(document.getElementById('orderSummaryModal'), {
            keyboard: false
        });

        // =============================================
        // WIERSZE TABELI — szablony pomocnicze
        // =============================================
        const currencySymbol = '{{ app_currency_symbol }}';
        const root = '{{ root }}';

        function buildOrderRow(order) {
            const orderDate  = order.order_date  ? new Date(order.order_date).toLocaleDateString('pl-PL')  : '—';
            const deliveredOn = order.delivered_on ? new Date(order.delivered_on).toLocaleDateString('pl-PL') : '—';
            const value = order.approximate_value_net !== null
                ? Number(order.approximate_value_net).toFixed(2) + ' ' + currencySymbol
                : '—';

            return `<tr>
                <td>${order.supplier_name ?? '—'}</td>
                <td>${order.order_key ?? '—'}</td>
                <td>${orderDate}</td>
                <td>${deliveredOn}</td>
                <td>${value}</td>
                <td>
                    <div class="btn-group" role="group">
                        <button class="btn btn-outline-info btn-sm" type="button"
                                onclick="getOrderSummary(${order.id})">
                            {{ translations.pdf }}
                        </button>
                        <button class="btn btn-outline-primary btn-sm" type="button"
                                data-bs-toggle="modal" data-bs-target="#orderSummaryModal"
                                onclick="showOrderSummary(${order.id})">
                            {{ translations.details }}
                        </button>
                    </div>
                </td>
            </tr>`;
        }

        function renderOrdersTable(orders) {
            const tbody = document.getElementById('realisedOrdersTbody');
            const emptyMsg = document.getElementById('realisedOrdersEmpty');

            if (!orders || orders.length === 0) {
                tbody.innerHTML = '';
                emptyMsg.style.display = '';
            } else {
                emptyMsg.style.display = 'none';
                tbody.innerHTML = orders.map(buildOrderRow).join('');
            }
        }

        // =============================================
        // FILTROWANIE
        // =============================================
        const searchBtn      = document.getElementById('searchByMaterialBtn');
        const clearBtn       = document.getElementById('clearFilterBtn');
        const clearWrapper   = document.getElementById('clearFilterWrapper');
        const filterBadge    = document.getElementById('filterBadge');
        const loader         = document.getElementById('realisedOrdersLoader');
        const materialSelect = document.getElementById('materialSelect');

        searchBtn.addEventListener('click', function () {
            const idMaterial = materialSelect.value;

            if (!idMaterial) {
                return;
            }

            loader.style.display = '';
            document.getElementById('realisedOrdersTbody').innerHTML = '';
            document.getElementById('realisedOrdersEmpty').style.display = 'none';

            api(`/ajax/material-orders/realised/by-material?id_material=${idMaterial}`, {
                method: 'GET'
            })
                .then(result => {
                    loader.style.display = 'none';

                    if (result.ok) {
                        renderOrdersTable(result.data);

                        // pokaż nazwę w badge
                        const selectedOption = materialSelect.options[materialSelect.selectedIndex];
                        filterBadge.textContent = selectedOption.text;
                        filterBadge.style.display = '';
                        clearWrapper.style.display = '';
                    } else {
                        showSnack(false);
                    }
                })
                .catch(err => {
                    loader.style.display = 'none';
                    console.error(err);
                    showSnack(false);
                });
        });

        clearBtn.addEventListener('click', function () {
            // Przywróć oryginalną zawartość — przeładuj stronę
            window.location.reload();
        });

        // =============================================
        // SZCZEGÓŁY ZAMÓWIENIA
        // =============================================
        function showOrderSummary(idOrder) {
            let tbody = document.getElementById('orderSummaryTbody');
            tbody.innerHTML = '';
            document.getElementById('total_order_value').innerText = '';
            document.getElementById('order_date').innerText = '';

            api(`/ajax/material-deliveries/${idOrder}`, { method: 'GET' })
                .then(result => {
                    document.getElementById('total_order_value').innerText = result.data.total_order_value.toFixed(2) + ' ' + currencySymbol;
                    document.getElementById('order_date').innerText = result.data.order_date;
                    document.getElementById('expected_date').innerText = result.data.expected_date;
                    document.getElementById('delivered_on_date').innerText = result.data.delivered_on;

                    if (result.ok && result.data?.products) {
                        result.data.products.forEach(item => {
                            let tr = document.createElement('tr');

                            let tdName = document.createElement('td');
                            tdName.innerText = item.material_name;
                            tdName.classList.add('font-bold');
                            tr.appendChild(tdName);

                            let tdOrdered = document.createElement('td');
                            tdOrdered.classList.add('text-center');
                            tdOrdered.innerHTML = item.ordered_pack_qty + `<p class="text-muted text-sm"> (${item.ordered_quantity_in_base_unit} ${item.unit_name})</p>`;
                            tr.appendChild(tdOrdered);

                            let tdDelivered = document.createElement('td');
                            tdDelivered.classList.add('text-center');
                            tdDelivered.innerHTML = item.delivered_pack_qty + `<p class="text-muted text-sm"> (${item.delivered_quantity_in_base_unit} ${item.unit_name})</p>`;
                            tr.appendChild(tdDelivered);

                            let tdDiff = document.createElement('td');
                            tdDiff.classList.add('text-center');
                            tdDiff.innerHTML = item.pack_diff_qty + `<p class="text-muted text-sm"> (${item.diff_quantity_in_base_unit} ${item.unit_name})</p>`;
                            tr.appendChild(tdDiff);

                            if (item.pack_diff_qty < 0) {
                                tr.classList.add('bg-light-danger');
                            } else if (item.pack_diff_qty > 0) {
                                tr.classList.add('bg-light-success');
                            }

                            let tdNetPrice = document.createElement('td');
                            tdNetPrice.classList.add('text-end');
                            tdNetPrice.innerText = Number(item.pack_price).toFixed(2) + ' ' + currencySymbol;
                            tr.appendChild(tdNetPrice);

                            let tdTotalNetValue = document.createElement('td');
                            tdTotalNetValue.classList.add('text-end');
                            tdTotalNetValue.innerText = Number(item.delivered_pack_qty * item.pack_price).toFixed(2) + ' ' + currencySymbol;
                            tr.appendChild(tdTotalNetValue);

                            if (item.delivered_quantity_in_base_unit > 0) {
                                let tdComplaint = document.createElement('td');
                                tdComplaint.classList.add('text-end');
                                tdComplaint.innerHTML = `<a href='${root}/material-orders/${idOrder}/material/${item.id_material}/complaint' class='btn btn-secondary btn-sm'>{{ translations.complaint }}</a>`;
                                tr.appendChild(tdComplaint);
                            } else {
                                tr.appendChild(document.createElement('td'));
                            }

                            tbody.appendChild(tr);
                        });
                    } else {
                        let tr = document.createElement('tr');
                        let td = document.createElement('td');
                        td.colSpan = 7;
                        td.classList.add('text-center');
                        td.innerText = '{{ translations.items_not_found }}';
                        tr.appendChild(td);
                        tbody.appendChild(tr);
                    }
                })
                .catch(err => {
                    console.error(err);
                    showSnack(false);
                });
        }

        // =============================================
        // PDF
        // =============================================
        function getProforma(idOrder, btn) {
            btn.disabled = true;
            btn.innerHTML = `<div class="spinner-border" style="width: 1rem; height: 1rem;" role="status"><span class="visually-hidden">{{ translations.loading }}</span></div>`;

            return api(`/ajax/material-orders/${idOrder}/proforma/presigned-url`, { method: 'GET' })
                .then(result => {
                    if (result.ok && result.data?.url) {
                        const link = document.createElement('a');
                        link.href = result.data.url;
                        link.setAttribute('download', '');
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                        showSnack(true, result.description);
                    } else {
                        showSnack(false, result.description || 'Błąd pobierania pliku');
                    }
                    btn.disabled = false;
                    btn.innerHTML = `{{ translations.get_proforma }}`;
                })
                .catch(err => {
                    console.error(err);
                    showSnack(false);
                });
        }

        async function getOrderSummary(idOrder) {
            try {
                await downloadPdf(
                    `/ajax/material-orders/${idOrder}/document`,
                    {},
                    `order_${idOrder}.pdf`
                );

            } catch (err) {
                console.error(err);
                showSnack(false, err.message || '{{ translations.something_went_wrong }}');
            }
        }

    </script>

{% endblock %}