@php
    $formId = 'dcvForm';
@endphp

{{-- NOTE: This form will be send through ajax by the ChocolateFactory.js to prevent spam, the real post route is 'contact/process'. --}}
<form class="o-form  js-chocolate-factory" method="post" action="{{url("/dcv/send")}}" id='{{$formId}}'>

    @if( !\App::environment('production') ) {{debug($errors)}} @endif

    @include('components.form.honey')

    {{ csrf_field() }}

    <div class="o-form__header">
        <h3 class="o-form__title">{{ $formTitle ?? __('form.dcv_title')}}</h3>
    </div>

    {{-- To prevent to pass the variable to each form element individually we already name it here --}}
{{--    @php $formGroupNoErrorArea = true @endphp--}}

    @if(!isset($send))

        <input type="hidden" name="arrangement" value="{{ $dcvArrangement->translation->name }}" />

        <div class="o-form__body">
            <div class="o-form__row  o-form__row--split">
                <div class="o-form__column">
                    @include('components.form.text', ['formGroupCodeName' => 'first_name'])
                </div>
                <div class="o-form__column">
                    @include('components.form.text', ['formGroupCodeName' => 'last_name'])
                </div>
            </div>
            <div class="o-form__row">
                @include('components.form.email', ['formGroupCodeName' => 'email'])
            </div>
            <div class="o-form__row">
                <div class="o-form__row  o-form__row--split">
                    <div class="o-form__column">
                        @include('components.form.text', ['formGroupCodeName' => 'phone'])
                    </div>
                    <div class="o-form__column">
                        @include('components.form.text', ['formGroupCodeName' => 'organisation'])
                    </div>
                </div>
            </div>
            <div class="o-form__row">
                <div class="o-form__row  o-form__row--split">
                    <div class="o-form__column">
                        @include('components.form.date', ['formGroupCodeName' => 'date'])
                    </div>
                    <div class="o-form__column">
                        @include('components.form.text', ['formGroupCodeName' => 'group_size'])
                    </div>
                </div>
            </div>

            <div class="o-form__row">
                <div class="c-form-group__label  c-form-group__label--bold  js-form-label">@lang('form.timeslot.label')</div>
                @include('components.form.radio', [
                    'formGroupCodeName' => 'timeslot',
                    'formInputValue' => 'Voormiddag',
                    'formInputLabel' => 'Voormiddag',
                    'isChecked' => in_array(\Illuminate\Support\Facades\Request::old('timeslot'), ['Voormiddag', null])
                ])
                @include('components.form.radio', [
                    'formGroupCodeName' => 'timeslot',
                    'formInputValue' => 'Namiddag',
                    'formInputLabel' => 'Namiddag',
                    'isChecked' => \Illuminate\Support\Facades\Request::old('timeslot') == 'Namiddag'
                ])
                @include('components.form.radio', [
                    'formGroupCodeName' => 'timeslot',
                    'formInputValue' => 'Ganse dag',
                    'formInputLabel' => 'Ganse dag',
                    'isChecked' => \Illuminate\Support\Facades\Request::old('timeslot')  == 'Ganse dag'
                ])
            </div>

            <div class="o-form__row">
                @include('components.form.select', [
                    'formGroupCodeName' => 'cars',
                    'formGroupLabel' => __('form.cars.label'),
                    'formGroupOptions' => [
                        1 => 1,
                        2 => 2,
                        3 => 3,
                        4 => 4,
                        5 => 5,
                    ]
                ])
            </div>

            <div class="o-form__row">
                <div class="c-form-group__label  c-form-group__label--bold  js-form-label">@lang('form.with_picknick.label')</div>

                @include('components.form.checkbox', [
                    'formGroupCodeName' => 'with_picknick',
                    'formGroupLabel' => __('form.with_picknick.option'),
                ])
            </div>

{{--            <div class="o-form__row">--}}
{{--                <div class="c-form-group__label  c-form-group__label--bold  js-form-label">@lang('form.with_bbq.label')</div>--}}

{{--                @include('components.form.checkbox', [--}}
{{--                    'formGroupCodeName' => 'with_bbq',--}}
{{--                    'formGroupLabel' => __('form.with_bbq.option'),--}}
{{--                ])--}}
{{--            </div>--}}

            <div class="o-form__row">
                <div class="c-form-group__label  c-form-group__label--bold  js-form-label">@lang('form.with_gas_service.label')</div>

                @include('components.form.checkbox', [
                    'formGroupCodeName' => 'with_gas_service',
                    'formGroupLabel' => __('form.with_gas_service.option'),
                ])
            </div>

            <div class="o-form__row">
                <div class="c-form-group__label  c-form-group__label--bold  js-form-label">@lang('form.with_insurance.label')</div>

                @include('components.form.checkbox', [
                    'formGroupCodeName' => 'with_insurance',
                    'formGroupLabel' => __('form.with_insurance.option'),
                ])
            </div>

            <div class="o-form__row  u-spacing-mt2">
                @include('components.form.text', ['formGroupCodeName' => 'voucher'])
            </div>

            <div class="o-form__row  u-spacing-mt2">
                @include('components.form.textarea', ['formGroupCodeName' => 'form_message'])
            </div>
        </div>

        <div class="o-form__footer">

            {{-- NOTE: We don't use a button to prevent bots from clicking on it --}}
            @include('components.button', [
                 'buttonTagName' => 'div',
                 'buttonText' => __('form.send'),
                 'buttonClasses' => 'js-golden-ticket'
             ])

        </div>
    @else
        <h2 class="u-spacing-mt8">@lang('contact.send.title')</h2>
        <p>@lang('contact.send.description')</p><br>
    @endif
</form>