@extends('master', [ 'showBreadcrumb' => false])

@section('title', 'Checkout')
@section('meta_description', 'Description')

@section('content')
    <div class="l-contain js-confirmation-screen">
        <form method="post" action="{{ route('checkout.start_payment') }}" class="o-confirmation">
            @csrf
            <div class="o-confirmation__back">
                @include('components.button', [
                    'modifiers' => 'text',
                    'buttonText' => __('checkout.change'),
                    'buttonLink' => $checkoutRoute,
                    'testKey' => 'change-details'
                ])
            </div>
            <h2 class="o-confirmation__title">@lang('checkout.confirmation')</h2>
            <div class="o-confirmation__grid">
                <div class="o-confirmation__side"><name-and-address/></div>
                <div class="o-confirmation__cart">
                    <h3 class="o-confirmation__subheading">@lang('checkout.order_details')</h3>
                    <div><order/></div>

                    <div class="o-confirmation__remarks">
                        @include('components.form.textarea', ['formElementCodeName' => 'remarks'])
                    </div>

                    <div class="o-confirmation__agree">
                        <label class="c-checkbox">
                            <input class="c-checkbox__input" type="checkbox" name="terms_and_conditions" data-test="terms-and-conditions">
                            <span class="c-checkbox__text">Ik ga akkoord met de algemene voorwaarden</span>
                        </label>
                    </div>
                    @if($errors->has('terms_and_conditions'))
                        <p class="c-form-feedback  u-spacing-mt3" data-test="terms_and_conditions-error">
                            {{ucfirst($errors->first('terms_and_conditions'))}}
                        </p>
                    @endif

                    <div class="o-confirmation__action">
                        @include('components.button', [
                            'buttonTagName' => 'button',
                            'buttonText' => 'Bevestig en betaal',
                            'testKey' => 'confirm-and-pay'
                        ])
                    </div>
                </div>
            </div>
        </form>
    </div>

@endsection