@extends('layouts.app')

@section('styles')
<style type="text/css">
    .input-group > .select2-container {
        width: auto !important;
        flex: 1 1 auto !important;
    }

    .input-group > .select2-container.select2-selection--single {
        height: 100% !important;
        line-height: inherit !important;
    }
</style>
@endsection

@section('content')

<div class="row justify-content-center">
    <div class="col-md-6">

        <div class="card mx-4">
            <div class="card-body p-4">

                <form method="POST" action="{{ route('register') }}">
                    {{ csrf_field() }}

                    <h1>{{ trans('panel.site_title') }}</h1>
                    <p class="text-muted">{{ trans('global.register') }}</p>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-user fa-fw"></i>
                            </span>
                        </div>
                        <input type="text" name="name" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" required autofocus placeholder="{{ trans('global.user_name') }}" value="{{ old('name', null) }}">
                        @if($errors->has('name'))
                            <div class="invalid-feedback">
                                {{ $errors->first('name') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-envelope fa-fw"></i>
                            </span>
                        </div>
                        <input type="email" name="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" required placeholder="{{ trans('global.login_email') }}" value="{{ old('email', null) }}">
                        @if($errors->has('email'))
                            <div class="invalid-feedback">
                                {{ $errors->first('email') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-phone fa-fw"></i>
                            </span>
                        </div>
                        <input type="text" name="phone" class="form-control{{ $errors->has('phone') ? ' is-invalid' : '' }}" required placeholder="{{ trans('global.phone') }}" value="{{ old('phone', null) }}">
                        @if($errors->has('phone'))
                            <div class="invalid-feedback">
                                {{ $errors->first('phone') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-id-card fa-fw"></i>
                            </span>
                        </div>
                        <input type="text" name="identity_card_number" class="form-control{{ $errors->has('identity_card_number') ? ' is-invalid' : '' }}" required placeholder="{{ trans('global.identity_card_number') }}" value="{{ old('identity_card_number', null) }}">
                        @if($errors->has('identity_card_number'))
                            <div class="invalid-feedback">
                                {{ $errors->first('identity_card_number') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-calendar fa-fw"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control date {{ $errors->has('dob') ? ' is-invalid' : '' }}" name="dob" required placeholder="{{ trans('global.dob') }}" value="{{ old('dob', null) }}">
                        @if($errors->has('dob'))
                            <div class="invalid-feedback">
                                {{ $errors->first('dob') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-address-book fa-fw"></i>
                            </span>
                        </div>
                        <input type="text" name="address_1" class="form-control {{ $errors->has('address_1') ? ' is-invalid' : '' }}" required placeholder="{{ trans('global.address_1') }}" value="{{ old('address_1', null) }}">
                        @if($errors->has('address_1'))
                            <div class="invalid-feedback">
                                {{ $errors->first('address_1') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-address-book fa-fw"></i>
                            </span>
                        </div>
                        <input type="text" name="address_2" class="form-control {{ $errors->has('address_2') ? ' is-invalid' : '' }}" placeholder="{{ trans('global.address_2') }}" value="{{ old('address_2', null) }}">
                        @if($errors->has('address_2'))
                            <div class="invalid-feedback">
                                {{ $errors->first('address_2') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fas fa-flag-usa fa-fw"></i>
                            </span>
                        </div>
                        <select class="custom-select select2 {{ $errors->has('state') ? 'is-invalid' : '' }}" name="state" id="state" required>
                            @foreach($states as $id => $entry)
                                <option value="{{ $id }}" {{ old('state') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('state'))
                            <div class="invalid-feedback">
                                {{ $errors->first('state') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fas fa-city fa-fw"></i>
                            </span>
                        </div>
                        <select class="custom-select select2 {{ $errors->has('city') ? 'is-invalid' : '' }}" name="city" id="city" required>
                            @foreach($cities as $id => $entry)
                                <option value="{{ $id }}" {{ old('city_id') == $id ? 'selected' : '' }}>{{ $entry }}</option>
                            @endforeach
                        </select>
                        @if($errors->has('city'))
                            <div class="invalid-feedback">
                                {{ $errors->first('city') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-lock fa-fw"></i>
                            </span>
                        </div>
                        <input type="password" name="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" required placeholder="{{ trans('global.login_password') }}">
                        @if($errors->has('password'))
                            <div class="invalid-feedback">
                                {{ $errors->first('password') }}
                            </div>
                        @endif
                    </div>

                    <div class="input-group mb-4">
                        <div class="input-group-prepend">
                            <span class="input-group-text">
                                <i class="fa fa-lock fa-fw"></i>
                            </span>
                        </div>
                        <input type="password" name="password_confirmation" class="form-control" required placeholder="{{ trans('global.login_password_confirmation') }}">
                    </div>

                    <button class="btn btn-block btn-primary">
                        {{ trans('global.register') }}
                    </button>
                </form>

            </div>
        </div>

    </div>
</div>

@endsection

@section('scripts')
<script type="text/javascript">
// Select Dependent Dropdowns
$("#state").change(function(){
    $.ajax({
        url: "{{ route('cities.get_by_state') }}?state=" + $(this).val(),
        method: 'GET',
        success: function(data) {
            $('#city').html(data.html);
        }
    });
});
</script>
@endsection