@extends('layouts.'.getAppLayout())

@section('script')
    <script type="text/javascript" src="{{ mix('js/daterangepicker/daterangepicker.js') }}"></script>
    <link rel="stylesheet" type="text/css" href="{{ mix('css/daterangepicker/daterangepicker.css') }}" />
    <script type="text/javascript" src="/js/rolldate.js"></script>
    <script src="{{ asset('js/main/dob.js') }}"></script>
@endsection

@section('content')
    @component('components.main.main_ui')

        @slot('nav')
            <x-main._nav/>
        @endslot

        @slot('masthead')
            <x-main._masthead-main/>
        @endslot

            <div class="container my-5">
                <img id="progressBar" src="/assets/images/SurveyBar-Loop-Forever.gif" style="width: 100%; height: auto; display: block; margin-bottom: 20px;">
                <h2 class="text-center">{{ __('heading.dob_header') }}</h2>
                <h6 class="text-center">{{ __('heading.dob_subheader') }}</h6>
                <form id="form-dob" class="col mx-auto mt-3 mb-5" action="{{ route('questions.store_birth') }}" method="POST">
                    @csrf
                    @if(config('sys.reg_enable_dob'))
                    <div class="form-group">
                        <label for="dob-input"></label>
                        <input type="text" class="form-control required" id="dob-input" aria-describedby="dobHelp" placeholder="{{ __('label.placeholder_date_of_birth') }}" name="birthday">
                    </div>
                    @endif
                    <button type="submit" id="btn-dob" class="btn btn-primary my-3">{{ __('label.btn_registration_cta') }}</button>
                </form>
            </div>

        <x-main.error-msg/>

        @slot('footer')
            <x-main._footer/>
        @endslot
    @endcomponent
@endsection