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

{% block content %}
    {{ form_start(form) }}
    <input type="hidden" class="shippingFee" value="0"/>
    <input type="hidden" class="discount" value="0"/>
    <input type="hidden" class="couponFreeShip" value="0"/>
    <div class="checkout-page">
        <div class="d-flex justify-content-between align-items-center gap-3">
            <h1 class="page__title page__title--h1">{{ 'Pay your order' | trans }}</h1>
            <div class="mb-4">
                <a href="{{ path('ecom_index', {'channelEcomId': app.request.get('channelEcomId')}) }}"
                   class="back-button">
                    {{ 'Continue shopping' | trans }}
                </a>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h2 class="page__title page__title--h3">{{ 'Products list' | trans }}</h2>
                <div class="table-responsive">
                    <table class="table table--checkout">
                        <thead>
                        <tr>
                            <th>{{ 'Product' | trans }}</th>
                            <th width="200" class="mobile-hide">{{ 'Kategori' | trans }}</th>
                            <th width="150" class="text-end mobile-hide">{{ 'Quantity' | trans }}</th>
                            <th width="100" class="text-end mobile-hide">{{ 'Price' | trans }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% set sum = 0 %}
                        {% set productTax = 0 %}
                        {% for key, item in cartData['items'] %}
                            {% set sum = sum + item['subTotal'] %}
                            {% set productTax = productTax + item['productTax'] %}
                            <tr>
                                <td class="td-product-name">
                                    {% if item['addOn'] == false %}
                                        <div class="d-flex justify-content-start align-items-center gap-3">
                                            {% if item['productThumbnail'] is not empty %}
                                                <img src="{{ asset(item['productThumbnail']) }}" class="cart-thumbnail"
                                                     height="70" alt=""/>
                                            {% endif %}
                                            <p class="title">
                                                <span>{{ item['productName'] }} {{ item['size'] is not empty ? ' - ' ~ item['size'] : '' }}</span>
                                                <br/>{{ 'Sku' | trans }}: {{ item['productSku'] }}
                                            </p>
                                        </div>
                                    {% else %}
                                        <div class="d-flex justify-content-start align-items-center gap-3">
                                            <p class="title">
                                                <span>{{ item['productName'] }} - {{ item['productSku'] }}</span>
                                                {% if item['addOnInputAllLetterInputCapital'] %}
                                                    <br/>{{ item['addOnText'] | upper }}
                                                {% else %}
                                                    <br/>{{ item['addOnText'] }}
                                                {% endif %}
                                            </p>
                                        </div>
                                    {% endif %}
                                </td>
                                <td class="td-category">
                                    {% if productCategories[item['productId']] is not empty %}
                                        {% set tempIndex = 0 %}
                                        {% for productCategory in productCategories[item['productId']] %}
                                            {% if tempIndex > 0 %},&nbsp;{% endif %}
                                            {{ productCategory['name'] }}
                                            {% set tempIndex = tempIndex + 1 %}
                                        {% endfor %}
                                    {% endif %}
                                </td>
                                <td class="text-end td-with-header"
                                    data-header="{{ 'Quantity' | trans }}">{{ item['quantity'] }}</td>
                                <td class="text-end td-with-header td-price"
                                    data-header="{{ 'Price' | trans }}">{{ item['productPriceEcomIncTax'] }} {{ 'kr' | trans }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                        <tr>
                            <td class="td-foot-comment">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="form-group mb-3">
                                            <label for="checkout_comment">{{ 'Coupon code' | trans }}</label>
                                            <input type="text" name="couponCode" class="form-control couponCode mb-1"/>
                                            <p class="coupon-error mb-1" style="display: none"></p>
                                            <button type="button" class="btn btn-warning btn-apply-coupon">
                                                {{ 'Apply coupon' | trans }}
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-lg-6">
                                        {{ form_row(form.comment) }}
                                    </div>
                                </div>
                            </td>
                            <td class="pe-0 ps-0 td-foot-sum" colspan="2">
                                <table class="table">
                                    <tfoot>
                                    <tr>
                                        <th class="text-end border-0 pb-0 td-with-header"
                                            data-header="{{ 'Quantity' | trans }}">{{ cartData['quantity'] }}</th>
                                        <th class="text-end border-0 pb-0 td-with-header" width="100"
                                            data-header="{{ 'Subtotal' | trans }}">{{ sum | number_format(2, '.', ',') }} {{ 'kr' | trans }}</th>
                                    </tr>
                                    <tr>
                                        <th class="text-end border-0 pb-0 mobile-hide">{{ 'Shipping fee' | trans }}</th>
                                        <th class="text-end border-0 pb-0 td-with-header"
                                            data-header="{{ 'Shipping fee' | trans }}"><span
                                                    class="shipping-fee-value">0</span> {{ 'kr' | trans }}
                                        </th>
                                    </tr>
                                    <tr class="discount-row d-none">
                                        <th class="text-end border-0 pb-0 mobile-hide">{{ 'Discount' | trans }}</th>
                                        <th class="text-end border-0 pb-0 td-with-header"
                                            data-header="{{ 'Discount' | trans }}"><span
                                                    class="discount-value">0</span> {{ 'kr' | trans }}
                                        </th>
                                    </tr>
                                    <tr>
                                        <th class="text-end border-0 pb-0 mobile-hide">{{ 'Tax' | trans }}</th>
                                        <th class="text-end border-0 pb-0 td-with-header"
                                            data-header="{{ 'Tax' | trans }}">{{ (productTax + channel.getShippingFeeEcomTax(tax_default)) | number_format(2, '.', ',') }} {{ 'kr' | trans }}</th>
                                    </tr>
                                    <tr>
                                        <th class="text-end border-0 mobile-hide">{{ 'Totalt' | trans }}</th>
                                        <th class="text-end border-0 td-with-header"
                                            data-header="{{ 'Totalt' | trans }}"><span class="sum-value"
                                                                                       data-sum="{{ sum }}">{{ sum | number_format(2, '.', ',') }}</span> {{ 'kr' | trans }}
                                        </th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </td>
                        </tr>

                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <h2 class="page__title page__title--h3">{{ 'Shipping' | trans }}</h2>
                <div class="text-content mb-3">
                    {% if channel.ecomShippingText is empty %}
                        {{ 'shipping text here' | trans }}
                    {% else %}
                        {{ channel.ecomShippingText | raw }}
                    {% endif %}
                </div>
                <div>
                    {% for index, shippingType in shippingTypes %}
                        <div class="form-check">
                            <input type="radio" {{ index == 0 ? 'checked': '' }}
                                   class="form-check-input form-shipping-type"
                                   data-shipping-fee="{{ shippingType.shippingFeeIncTax }}"
                                   name="shippingTypeId" value="{{ shippingType.id }}"
                                   id="shippingType{{ shippingType.id }}">
                            <label class="form-check-label"
                                   for="shippingType{{ shippingType.id }}">{{ shippingType.name }}
                                ({{ shippingType.shippingFeeIncTax }} {{ 'kr' | trans }})</label>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="card card--payment">
            <div class="card-body">
                <h2 class="page__title page__title--h3">{{ 'Payment' | trans }}</h2>

                {% for choice in form.paymentMethod %}
                    {% if choice.vars.label == 'swish' %}
                        {#                        <div class="d-flex justify-content-start align-items-center gap-3"> #}
                        {#                            <div> #}
                        {#                                {{ form_widget(choice, { #}
                        {#                                    attr: { class: 'paymentMethod' } #}
                        {#                                }) }} #}
                        {#                                {{ form_label(choice, null, { #}
                        {#                                    label_attr: { class: 'form-check-label' } #}
                        {#                                }) }} #}
                        {#                            </div> #}
                        {#                            <div> #}
                        {#                                <img src="{{ asset('webshop/images/swish.png') }}" alt="" #}
                        {#                                     style="height: 40px; width: auto;"/> #}
                        {#                            </div> #}
                        {#                        </div> #}
                        {#                        <div class="not-show-svea"> #}
                        {#                            {{ form_row(form.swishPhoneNr) }} #}
                        {#                        </div> #}
                    {% elseif choice.vars.label == 'svea' %}
                        <div class="d-flex justify-content-start align-items-center gap-3 svea-payment">
                            <div>
                                {{ form_widget(choice, {
                                    attr: { class: 'paymentMethod' }
                                }) }}
                                {{ form_label(choice, null, {
                                    label_attr: { class: 'form-check-label' }
                                }) }}
                            </div>
                            <div>
                                <img src="{{ asset('webshop/images/svea.jpg') }}" alt=""
                                     style="height: 40px; width: auto;"/>
                            </div>
                        </div>
                    {% else %}
                        <div class="empty-payment d-none">
                            <div>
                                {{ form_widget(choice, {
                                    attr: { class: 'paymentMethod' }
                                }) }}
                                {{ form_label(choice, null, {
                                    label_attr: { class: 'form-check-label' }
                                }) }}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
        <div class="card not-show-svea">
            <div class="card-body">
                <h2 class="page__title page__title--h3">{{ 'Delivery' | trans }}</h2>
                <div class="row">
                    <div class="col-md-6">{{ form_row(form.firstname) }}</div>
                    <div class="col-md-6">{{ form_row(form.lastname) }}</div>
                </div>
                <div class="row">
                    <div class="col-md-6">{{ form_row(form.customerAddress) }}</div>
                    <div class="col-md-6">{{ form_row(form.customerPostCode) }}</div>
                </div>
                <div class="row">
                    <div class="col-md-6">{{ form_row(form.customerCity) }}</div>
                    <div class="col-md-6">{{ form_row(form.customerCountry) }}</div>
                </div>
                <div class="row">
                    <div class="col-md-6">{{ form_row(form.customerEmail) }}</div>
                    <div class="col-md-6">{{ form_row(form.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 checkout' | trans }}</h2>
                <div id="svea-checkout-iframe"></div>
            </div>
        </div>
    </div>
    <div class="form-group mb-3 not-show-svea">
        <div class="d-flex justify-content-start align-items-start gap-1">
            {{ form_widget(form.acceptTerms) }}
            {% set link = path('ecom_wiki_page', {'channelEcomId': app.request.get('channelEcomId'), 'slug': 'anvandarvillkor'}) %}
            <label class="form-check-label"
                   for="checkout_acceptTerms">
                <p class="form-check-text">{{ 'Accept terms %link%' | trans({'%link%': link}) | raw }}</p>
            </label>
        </div>
    </div>
    <div class="text-center not-show-svea">
        <button type="submit" class="btn btn-warning">{{ 'Submit checkout' | trans }}</button>
    </div>
    {{ form_end(form) }}
{% endblock %}
{% block custom_javascripts %}
    <script>
        $(document).ready(function () {
            showSum();

            function showSum() {
                var couponFreeShipping = $('.couponFreeShip').val();
                if (couponFreeShipping == 1) {
                    var shippingFee = 0;
                } else {
                    // Get the shipping fee of the checked radio button
                    var shippingFee = $('input[name="shippingTypeId"]:checked').data('shipping-fee');
                }
                $('.shipping-fee-value').html(shippingFee);
                var discount = $('.discount').val();
                if (discount > 0) {
                    $('.discount-row').removeClass('d-none');
                } else {
                    $('.discount-row').addClass('d-none');
                }
                let sumValue = $('.sum-value').data('sum');
                sumValue += shippingFee - discount;
                if (sumValue < 0) {
                    $('.empty-payment').removeClass('d-none');
                    sumValue = 0;
                } else {
                    $('.empty-payment').addClass('d-none');
                    sumValue = parseFloat(sumValue).toFixed(2);
                }
                $('.sum-value').html(sumValue);
            }

            $('body').on('change', '.form-shipping-type', function () {
                showSum();
                loadSvea();
            });

            $('body').on('change', '.paymentMethod', function () {
                loadSvea();
            });

            $('body').on('click', '.btn-apply-coupon', function () {
                var code = $('.couponCode').val();
                var $button = $(this);
                if (code === '') {
                    return 0;
                }
                $button.html("{{ 'Applying coupon' | trans }}");
                $.ajax({
                    url: "{{ path('ecom_checkout_check_coupon', {'channelEcomId': app.request.get('channelEcomId')}) }}",  // Replace with your endpoint URL
                    type: 'POST',
                    data: {
                        coupon_code: code
                    },
                    dataType: 'json',  // Expecting JSON response; adjust as needed
                    success: function (response) {
                        if (response.type === 'discount') {
                            $('.couponFreeShip').val(0);
                            $('.discount').val(response.discount);
                            $('.discount-value').html(response.discount);
                            $('.card--payment').show();
                            loadSvea();
                        } else if (response.type === 'free_delivery') {
                            $('.couponFreeShip').val(1);
                            $('.discount').val(0);
                            $('.discount-value').html(0);
                            $('.card--payment').show();
                            loadSvea();
                        } else if (response.type === 'invoice') {
                            $('.couponFreeShip').val(0);
                            $('.discount').val(0);
                            $('.discount-value').html(0);
                            $('.card--payment').hide();
                        }
                        showSum();
                        $button.html("{{ 'Apply coupon' | trans }}");
                        $('.coupon-error').hide();
                    },
                    error: function (xhr, status, error) {
                        $('.couponFreeShip').val(0);
                        $('.discount').val(0);
                        $('.discount-value').html(0);
                        $('.card--payment').show();
                        $('.coupon-error').html(xhr.responseJSON.message).show();
                        $button.html("{{ 'Apply coupon' | trans }}");
                        showSum();
                        loadSvea();
                    }
                });
            });

            function loadSvea() {
                var couponCode = $('.couponCode').val();
                var shippingTypeId = $('input[name="shippingTypeId"]:checked').val();
                var paymentMethod = $('input[name="checkout[paymentMethod]"]:checked').val();
                var comment = $('#checkout_comment').val();
                if (paymentMethod !== 'svea') {
                    $('.not-show-svea').show();
                    $('.show-svea').hide();
                    return;
                }
                $('.not-show-svea').hide();
                $('.show-svea').show();
                $('#svea-checkout-iframe').html('<div style="margin-top: 30px; text-align: center">{{ 'Loading SVEA payment' | trans }}</div>')
                $.ajax({
                    url: "{{ path('ecom_checkout_svea_create_order', {'channelEcomId': app.request.get('channelEcomId')}) }}",  // Replace with your endpoint URL
                    type: 'POST',
                    data: {
                        couponCode: couponCode,
                        shippingTypeId: shippingTypeId,
                        comment: comment,
                        paymentMethod: paymentMethod
                    },
                    dataType: 'json',  // Expecting JSON response; adjust as needed
                    success: function (response) {
                        $('#svea-checkout-iframe').html(response.html);
                    },
                    error: function (xhr, status, error) {
                        $('#svea-checkout-iframe').html('<div class="alert alert-danger" role="alert">' + xhr.responseJSON.message + '</div>');
                    }
                });
            }
        });
    </script>
{% endblock %}