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

{% block title %}Kassa - {{ order.orderNr }}{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('webshop/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('webshop/css/common.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('webshop/css/standard.css') }}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block body %}
    <div class="checkout-page" style="max-width: 900px; margin: 0 auto; padding: 20px;">
        <div class="d-flex justify-content-between align-items-center" style="margin-bottom: 20px;">
            <img src="{{ asset('logo-tshirt.png') }}" alt="" style="height: 50px; width: auto;"/>
            <div class="text-end">
                <h1 class="page__title page__title--h1" style="margin: 0;">Kassa</h1>
                <p style="margin: 0;">
                    Order: <strong>{{ order.orderNr }}</strong>
                    {% if order.dateOrder %}<br/>Datum: {{ order.dateOrder | date('Y-m-d') }}{% endif %}
                    {% if order.totalSumInclTax %}<br/>Att betala: {{ order.totalSumInclTax | number_format(2, ',', ' ') }} kr{% endif %}
                </p>
            </div>
        </div>

        <div class="card" style="margin-bottom: 20px;">
            <div class="card-body">
                <h2 class="page__title page__title--h3">Dina Produkter</h2>
                <div class="table-responsive">
                    <table class="table table--checkout">
                        <thead>
                        <tr>
                            <th>Produkter</th>
                            <th class="text-end">Antal</th>
                            <th class="text-end">Pris</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for item in order.items %}
                            <tr>
                                <td>
                                    <p class="title">
                                        {{ item.productName }}{{ item.productSizeText is not empty ? ' - ' ~ item.productSizeText : '' }}
                                        <br/>Sku: {{ item.productSku }}
                                    </p>
                                </td>
                                <td class="text-end">{{ item.quantity }}</td>
                                <td class="text-end">{{ (item.price * item.quantity) | number_format(2, ',', ' ') }} kr</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
                {#
                    Read-only order summary — this page is pay-only, nothing here is editable. Coupon/discount is
                    shown only if the order already has one applied (order.couponCode/discount, no input to apply
                    a new one — order total is already fixed, applying a new coupon here would mean recalculating
                    the whole order, out of scope for this page). Shipping/tax/total are always shown so the
                    customer sees exactly what they're paying for, matching the mockup's summary column.
                #}
                <div class="d-flex flex-column align-items-end" style="margin-top: 15px; gap: 4px;">
                    {% if order.couponCode is not empty %}
                        <p style="margin: 0;">Rabattkod ({{ order.couponCode }}): <strong>-{{ order.discount | number_format(2, ',', ' ') }} kr</strong></p>
                    {% endif %}
                    <p style="margin: 0;">Frakt: <strong>{{ order.shippingFee | number_format(2, ',', ' ') }} kr</strong></p>
                    <p style="margin: 0;">Varav moms: <strong>{{ order.totalTax | number_format(2, ',', ' ') }} kr</strong></p>
                    <p style="margin: 0; font-size: 1.15em;">Att betala: <strong>{{ order.totalSumInclTax | number_format(2, ',', ' ') }} kr</strong></p>
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom: 20px;">
            <div class="card-body">
                <h2 class="page__title page__title--h3">Betalning</h2>
                {#
                    Only "Svea payment" today (matches the mockup — card/Swish/Trustly all live inside Svea's own
                    iframe). No radio checked by default — the Svea session is only created after the customer
                    actively picks a method (change event), same as the main ecom checkout (webshop/checkout.html.twig
                    -> loadSvea(), default paymentMethod is 'swish' so nothing loads until the customer switches to
                    'svea'). Structured as a radio group so a second method can be added later without restructuring.
                #}
                <div class="d-flex justify-content-start align-items-center gap-3">
                    <div class="form-check">
                        <input type="radio" name="paymentMethod" id="paymentMethod_svea" class="form-check-input paymentMethod" value="svea"/>
                        <label class="form-check-label" for="paymentMethod_svea">Svea payment</label>
                    </div>
                    <img src="{{ asset('webshop/images/svea.jpg') }}" alt="" style="height: 40px; width: auto;"/>
                </div>
            </div>
        </div>

        <div class="card" style="margin-bottom: 20px;">
            <div class="card-body">
                <h2 class="page__title page__title--h3">Kunduppgifter</h2>
                {#
                    Read-only, sourced straight from the order (order.customerName/Address/...) — NOT from Svea
                    presetValues. This block has nothing to do with which payment method is picked: it always
                    shows, regardless of whether the Svea iframe below loads successfully or not. Svea's own
                    presetValues API only supports prefilling emailAddress/phoneNumber/postalCode (see
                    "Self-review round 1" in the ticket doc) — it cannot prefill name/address/city at all, so
                    that data is shown here on our own page instead of relying on Svea to do it.
                #}
                <div class="row">
                    <div class="col-md-6"><strong>Namn:</strong> {{ order.customerName }}</div>
                    <div class="col-md-6"><strong>Email:</strong> {{ order.customerEmail }}</div>
                </div>
                <div class="row">
                    <div class="col-md-6"><strong>Adress:</strong> {{ order.customerAddress }}</div>
                    <div class="col-md-6"><strong>Postkod:</strong> {{ order.customerPostCode }}</div>
                </div>
                <div class="row">
                    <div class="col-md-6"><strong>Stad:</strong> {{ order.customerCity }}</div>
                    <div class="col-md-6"><strong>Land:</strong> {{ order.customerCountry }}</div>
                </div>
                <div class="row">
                    <div class="col-md-6"><strong>Mobil:</strong> {{ order.customerMobile }}</div>
                </div>
            </div>
        </div>

        <div class="card show-svea" style="display: none;">
            <div class="card-body">
                <h2 class="page__title page__title--h3">Svea Kassa</h2>
                <div id="svea-checkout-iframe"></div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('webshop/js/jquery-3.5.1.min.js') }}"></script>
{% endblock %}

{% block custom_javascripts %}
    <script>
        $(document).ready(function () {
            $('body').on('change', '.paymentMethod', function () {
                loadSvea();
            });

            function loadSvea() {
                var paymentMethod = $('input[name="paymentMethod"]:checked').val();
                if (paymentMethod !== 'svea') {
                    $('.show-svea').hide();
                    $('#svea-checkout-iframe').html('');
                    return;
                }
                $('.show-svea').show();
                $('#svea-checkout-iframe').html('<div style="margin-top: 30px; text-align: center">{{ 'Loading SVEA payment' | trans }}</div>');
                $.ajax({
                    url: "{{ path('payment_link_svea_generate_order', {'token': token}) }}",
                    type: 'POST',
                    dataType: 'json',
                    success: function (response) {
                        $('#svea-checkout-iframe').html(response.html);
                    },
                    error: function (xhr) {
                        $('#svea-checkout-iframe').html('<div class="alert alert-danger" role="alert">' + xhr.responseJSON.message + '</div>');
                    }
                });
            }
        });
    </script>
{% endblock %}