@extends('web.layouts.layout')

@section('container_content')
<section class="box valign">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="content">
                    <div class="dots wow zoomIn">
                        <span class="dot active" data-step="1_step"></span>
                        <span class="dot" data-step=""></span>
                        <span class="dot" data-step=""></span>
                        <span class="dot" data-step=""></span>
                        <span class="dot" data-step=""></span>
                        <span class="dot" data-step=""></span>
                        <span class="dot" data-step=""></span>
                        <span class="dot" data-step=""></span>
                        <span class="dot" data-step=""></span>
                    </div>
                    <div class="reg">
                        <form action="{{route('user.register')}}" method="post" enctype="multipart/form-data" class="register_phase_form">
                            @csrf
                            <div class="row">
                                <div class="alert alert-danger ajaxErrorResponse col-md-12 d-none"></div>
                                <div class="alert alert-success ajaxResponse col-md-12 d-none"></div>
                                <div class="register_phase row" id="1_step">
                                    <h3 class="title wow fadeInUp col-md-12">Registration</h3>
                                    <input type="hidden" name="register_steps[]" value="registration">
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="user_name">User Name</label>
                                            <input class="required" id="user_name" type="text" name="user_name" placeholder="User name" value="{{old('user_name')}}">
                                        </div>
                                        <div class="form-group">
                                            <label for="email">E-Mail</label>
                                            <input class="required" id="email" type="email" name="email" placeholder="E-Mail" value="{{old('email')}}">
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="id_number">ID Number</label>
                                            <input class="required" id="id_number" type="tel" name="id_number" placeholder="12012125521" value="{{old('id_number')}}">
                                            <small class="guide">10 Numbers Only</small>
                                        </div>
                                        <div class="form-group">
                                            <label for="phone">Phone Number</label>
                                            <input class="required" id="phone" type="tel" name="phone" placeholder="055045698" value="{{old('phone')}}">
                                            <small class="guide">EX: 05********</small>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="password">Password</label>
                                            <input class="required" id="password" type="password" name="password" placeholder="*******" >
                                            <small class="guide">At least s8 chars containes Number and Letter </small>
                                        </div>
                                        <div class="form-group">
                                            <label for="password_confirmation">Password Confirmation</label>
                                            <input id="password_confirmation" class="required" type="password" name="password_confirmation" placeholder="*******" >
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <label for="birth_date">date of birth</label>
                                            <input class="required" id="birth_date" name="birth_date" type="date" placeholder="12-1-1990" max="{{ date('Y-m-d', strtotime('-15 years')) }}" value="{{old('birth_date')}}">
                                        </div>
                                    </div>
                                    <div class="col-md-8"></div>
                                    <div class="col-lg-4">
                                        <div class="form-group">
                                            <a href="#" data-step="2_step" class="butn mt-5 gray steps_link sendButton">next</a>
                                        </div>
                                    </div>
                                </div>

                                {{--Start 2 step--}}
                                @include('web.register.2_step')
                                {{--End 2 step--}}

                                {{--Start 3 step--}}
                                @include('web.register.3_step')
                                {{--End 3 step--}}

                                {{--Start 4 step--}}
                                @include('web.register.4_step')
                                {{--End 4 step--}}

                                {{--Start 5 step--}}
                                @include('web.register.5_step')
                                {{--End 5 step--}}

                                {{--Start 6 step--}}
                                @include('web.register.6_step')
                                {{--End 6 step--}}

                                {{--Start 7 step--}}
                                @include('web.register.7_step')
                                {{--End 7 step--}}

                                {{--Start 8 step--}}
                                @include('web.register.8_step')
                                {{--End 8 step--}}

                                {{--Start 9 step--}}
                                @include('web.register.9_step')
                                {{--End 9 step--}}

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

{{-- Extend @section from parent --}}
@section('container_js')
    <script src="{{asset('assets/web/js/register_phase.js')}}"></script>
@endsection