{% extends "layouts/layout.html.twig" %}

{% block content %}

    <h1>{{ page_title }}</h1>

    <div class="order-tabs">
        <div class="order-tab">
            <a href="{{ urls.shopping_cart }}">
                <strong>Stap 1 - </strong>
                Winkelwagen
            </a>
        </div>
        <div class="order-tab active">
            <a href="javascript:void(0);">
                <strong>Stap 2 - </strong>
                Uw gegevens
            </a>
        </div>
        <div class="order-tab {{ transaction is defined ? '' : 'disabled' }}">
            <a href="{{ transaction is defined ? urls.checkout : 'javascript:void(0);' }}">
                <strong>Stap 3 - </strong>
                Bevestigen en betalen
            </a>
        </div>
        <div class="order-tab disabled">
            <a href="javascript:void(0);">
                <strong>Stap 4 - </strong>
                Bestelling geplaatst
            </a>
        </div>
    </div>

    {% include 'blocks/flash_messages.html.twig' %}

    {% if transaction is defined and tansaction.status == "CONFIRMED" %}
        <div class="badge badge-warning">
            De bestelling is al bevestigd. U kunt deze gegevens daarom niet meer aanpassen, maar alleen lezen: <a href="{{ urls.checkout }}">klik hier om te betalen</a>.
        </div>
    {% elseif post.submit is defined %}
        <div class="badge badge-info">
            Vergeet niet onderaan de pagina op de knop "Opslaan" te drukken na het bewerken van de gegevens.
        </div>
    {% endif %}
    <div class="fill">

        {% include 'blocks/small_shoppingbag.html.twig' %}

        <form class="col-sm-7 form-horizontal register-form needs-validation" role="form" method="post">
            <input type="hidden" name="submitting" value="1" />
            <div class="register-block">
                <div class="register">
                    <fieldset>
                        <legend>Uw gegevens</legend>
                        <small><span class="font-weight-bold">*</span>&nbsp;vereist</small>
                        <div class="form-group">
                            <label class="col-form-label font-weight-bold col-xl-3 col-lg-4 col-md-5 no-padding" for="email">E-mailadres <span class="font-weight-bold">*</span></label>
                            <div class="col-xl-9 col-lg-8 col-md-7">
                                <input id="email" type="email"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                       class="form-control" name="email" value="{{ customer_details.email }}" autocomplete="off" required>
                                <div class="invalid-feedback">
                                    Vul een geldig e-mailadres in.
                                </div>
                                <p class="help-block">
                                    Op dit e-mailadres ontvangt u het besteloverzicht, het betalingsbewijs en de verzendingsinformatie.
                                </p>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-form-label font-weight-bold col-xl-3 col-lg-4 col-md-5 no-padding" for="telephone">Telefoonnummer</label>
                            <div class="col-xl-9 col-lg-8 col-md-7">
                                <input id="telephone" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                       class="form-control" name="telephone" value="{{ customer_details.telephone }}" autocomplete="off">
                                <div class="invalid-feedback">
                                    Vul een geldig telefoonnummer in.
                                </div>
                                <p class="help-block">
                                    Met dit telefoonnummer nemen wij contact op als wij u dringend willen spreken over uw bestelling.
                                </p>
                            </div>
                        </div>

                        <hr>

                        <div class="form-group fill">
                            <div class="col-12">
                                <label class="col-form-label font-weight-bold" for="billing_company">Bedrijf</label>
                                <div class="fill">
                                    <input id="billing_company" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           placeholder="" class="form-control" name="billing_company" value="{{ customer_details.billing_address.company }}" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group fill">
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="billing_first_name">Voornaam <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="billing_first_name" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           placeholder="" class="form-control" name="billing_first_name" value="{{ customer_details.first_name }}" autocomplete="off" required>
                                    <div class="invalid-feedback">
                                        Vul uw voornaam in.
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="billing_last_name">Achternaam <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="billing_last_name" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           placeholder="" class="form-control" name="billing_last_name" value="{{ customer_details.billing_address.last_name }}" autocomplete="off" required>
                                    <div class="invalid-feedback">
                                        Vul uw achternaam in.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group fill">
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="billing_postcode">Postcode <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="billing_postcode" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           placeholder="1234AB" class="form-control" name="billing_postcode" value="{{ customer_details.billing_address.postcode }}" autocomplete="off" required>
                                    <div class="invalid-feedback">
                                        Vul uw postcode in.
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="billing_house_nr">Huisnummer <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="billing_house_nr" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control" name="billing_house_nr" value="{{ customer_details.billing_address.address_house_nr }}" autocomplete="off" required>
                                    <div class="invalid-feedback">
                                        Vul uw huisnummer in.
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group fill">
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="billing_address_1">Adres <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="billing_address_1" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control" name="billing_address_1" value="{{ customer_details.billing_address.address_1 }}" autocomplete="off" required>
                                    <div class="invalid-feedback">
                                        Vul uw adres in.
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="billing_address_2">Extra adres regel</label>
                                <div class="fill">
                                    <input id="billing_address_2" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control" name="billing_address_2" value="{{ customer_details.billing_address.address_2 }}" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group fill">
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="billing_city">Woonplaats <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="billing_city" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control" name="billing_city" value="{{ customer_details.billing_address.city }}" autocomplete="off" required>
                                    <div class="invalid-feedback">
                                        Vul uw woonplaats in.
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="billing_country_id">Land <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <select id="billing_country_id" class="form-control"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }} name="billing_country_id" required>
                                        {% for country in countries %}
                                            <option value="{{ country.id }}"{{ customer_details.billing_address.country_id == country.id ? ' selected' : '' }} data-country-name="{{ country.name }}">{{ country.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="invalid-feedback">
                                        Vul uw land in.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>

                    <div class="form-group checkbox fill">
                        <div class="fill col-12">
                            <label>
                                <input type="checkbox"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                       name="has_delivery" id="deliveryAddress"{{ (customer_details.shipping_is_billing is defined and customer_details.shipping_is_billing == false) ? ' checked' : '' }} value="1">
                                Mijn bestelling op een ander adres afleveren.
                            </label>
                        </div>
                    </div>

                    <fieldset class="shipping-address fill hidden" data-toggle="">

                        <legend>Afleveradres</legend>

                        <div class="form-group fill">
                            <div class="col-12">
                                <label class="col-form-label font-weight-bold" for="shipping_company">Bedrijf</label>
                                <div class="fill">
                                    <input id="shipping_company" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           placeholder="" class="form-control" name="shipping_company" value="{{ customer_details.shipping_address.company }}" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group fill">
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="shipping_first_name">Voornaam <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="shipping_first_name" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           placeholder="" class="form-control shipping-input" name="shipping_first_name" value="{{ customer_details.shipping_address.first_name }}" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="shipping_last_name">Achternaam <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="shipping_last_name" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control shipping-input" name="shipping_last_name" value="{{ customer_details.shipping_address.last_name }}" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group fill">
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="shipping_postcode">Postcode <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="shipping_postcode" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           placeholder="1234AB" class="form-control shipping-input" name="shipping_postcode" value="{{ customer_details.shipping_address.postcode }}" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="shipping_house_nr">Huisnummer <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="shipping_house_nr" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control shipping-input" name="shipping_house_nr" value="{{ customer_details.shipping_address.address_house_nr }}" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group fill">
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="shipping_address_1">Adres <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="shipping_address_1" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control shipping-input" name="shipping_address_1" value="{{ customer_details.shipping_address.address_1 }}" autocomplete="off">
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="shipping_address_2">Extra adres regel</label>
                                <div class="fill">
                                    <input id="shipping_address_2" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control" name="shipping_address_2" value="{{ customer_details.shipping_address.address_2 }}" autocomplete="off">
                                </div>
                            </div>
                        </div>

                        <div class="form-group fill">
                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="shipping_city">Woonplaats <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <input id="shipping_city" type="text"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }}
                                           class="form-control shipping-input" name="shipping_city" value="{{ customer_details.shipping_address.city }}" autocomplete="off">
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <label class="col-form-label font-weight-bold" for="shipping_country_id">Land <span class="font-weight-bold">*</span></label>
                                <div class="fill">
                                    <select id="shipping_country_id" class="form-control"{{ (transaction is defined and transaction.status == "CONFIRMED") ? ' disabled="disabled"' : '' }} name="shipping_country_id">
                                        {% for country in countries %}
                                            <option value="{{ country.id }}"{{ customer_details.billing_address.country_id == country.id ? ' selected' : '' }} data-country-name="{{ country.name }}">{{ country.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>

                    </fieldset>
                </div>
                <div class="next-step">
                    {% if transaction is defined and transaction.status == "CONFIRMED" %}
                        <button type="submit" class="btn btn btn-block btn-primary quote-link">Naar stap 3 - Afrekenen</button>
                    {% else %}
                        <button type="submit" class="btn btn btn-block btn-primary quote-link">Opslaan en naar stap 3 - Afrekenen</button>
                    {% endif %}
                </div>
            </div>
        </form>
    </div>

{% endblock %}

{% block post_js %}
    {{ parent() }}

    <script type="text/javascript">

        $(document).ready(function() {
            if($('#deliveryAddress').is( ":checked" )) {
                $(".shipping-address").slideToggle();
            }
        });

        $(".register-form").submit(function (event) {
            // Add the selected country names as inputs to the form
            var billing_country_name = $('#billing_country_id option:selected').data('country-name');
            var shipping_country_name = $('#shipping_country_id option:selected').data('country-name');
            $(".register-form").append('' +
                '<input name="billing_country" type="hidden" value="' + billing_country_name + '" /> ' +
                '<input name="shipping_country" type="hidden" value="' + shipping_country_name + '" /> ' +
            '');
        });

        $("#deliveryAddress").click(function() {
            $(".shipping-address").slideToggle();
            if(this.checked) {
                $(".shipping-input").prop('required', true);
            } else {
                $(".shipping-input").prop('required', false);
            }
        });

    </script>

{% endblock %}