@extends('auth.main', [
    'class' => 'register-page'
])

@section('content')
    <div class="content" style="padding-top: 50px;">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-12 mr-auto">
                    <div class="card card-signup">
                        <div class="card-header ">
                            <h4 class="card-title text-center">{{ __('Register') }}</h4>
                        </div>
                        @if (session()->has('success'))
                        <div class="container">
                            <div class="alert alert-success fade show" role="alert">
                                <strong>Success!</strong><br />
                                {{ __('SuccessMessageRegister') }}
                                <div class="text-center">
                                    <a href="{{ route('ebook') }}" class="btn btn-default">Go to E-library</a>
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="card-body ">
                            @if(request()->is('en/register') || request()->is('my/register'))
                            <form class="form" method="POST" action="{{ route('register') }}" enctype="multipart/form-data">
                            @else
                            <form class="form" method="POST" action="{{ route('register.for.ebook') }}" enctype="multipart/form-data">
                            @endif
                                @csrf
                                <div class="form-group {!! $errors->first('name', 'has-error') !!}">
                                    <label for="name">@lang('Name') <span class="text-danger"> * </span></label>
                                    <input type="text" placeholder="" name="name" id="name" class="form-control" value="{{ old('name') }}" >
                                    @if ($errors->has('name'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </div> 
                                <div class="form-group {!! $errors->first('phone', 'has-error') !!}">
                                    <label for="phone">@lang('Phone') <span class="text-danger"> * </span></label>
                                    <input type="text" placeholder="09564564534" name="phone" id="phone" class="form-control" value="{{ old('phone') }}" >
                                    @if ($errors->has('phone'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('phone') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group {!! $errors->first('nrc', 'has-error') !!}">
                                    <label for="nrc">@lang('NRC') <span class="text-danger"> * </span></label>
                                    <input type="text" name="nrc" id="nrc" class="form-control" value="{{ old('nrc') }}" placeholder="5/HtaKhaNa(5)065463" >
                                    @if ($errors->has('nrc'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('nrc') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <div class="form-group {!! $errors->first('front_nrc_photo', 'has-error') !!}">
                                          <label for="front_nrc_photo">@lang('Front Nrc Photo') <span class="text-danger"> * </span></label>
                                          <input type="file" class="form-control file" id="front_nrc_photo" name="front_nrc_photo" >
                                          <img id="front_nrc_photo_view" src="#" alt="your image" style="display: none; width: 100%; height: auto;"  />
                                            @if ($errors->has('front_nrc_photo'))
                                                <span class="invalid-feedback d-block" role="alert">
                                                    <strong>{{ $errors->first('front_nrc_photo') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <div class="form-group {!! $errors->first('back_nrc_photo', 'has-error') !!}">
                                            <label for="back_nrc_photo">@lang('Back Nrc Photo') <span class="text-danger"> * </span></label>
                                            <input type="file" class="form-control file" id="back_nrc_photo" name="back_nrc_photo" >
                                            <img id="back_nrc_photo_view" src="#" alt="your image" style="display: none; width: 100%; height: auto;"  />
                                            @if ($errors->has('back_nrc_photo'))
                                                <span class="invalid-feedback d-block" role="alert">
                                                    <strong>{{ $errors->first('back_nrc_photo') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group {!! $errors->first('address', 'has-error') !!}">
                                    <label for="address">@lang('Address') <span class="text-danger"> * </span></label>
                                    <textarea name="address" rows="5" class="form-control" placeholder="" autofocus>{{ old('address') }}</textarea>
                                    @if ($errors->has('address'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('address') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group {!! $errors->first('email', 'has-error') !!}">
                                    <label for="email">@lang('Email') <span class="text-danger"> * </span></label>
                                    <input type="email" placeholder="" name="email" id="email" class="form-control" value="{{ old('email') }}" >
                                    @if ($errors->has('email'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group {!! $errors->first('username', 'has-error') !!}">
                                    <label for="username">@lang('Username') <span class="text-danger"> * </span></label>
                                    <input type="text" placeholder="" name="username" id="username" class="form-control" value="{{ old('username') }}" >
                                    @if ($errors->has('username'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('username') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group {!! $errors->has('password', 'has-error') !!}">
                                    <label for="password">@lang('Password') <span class="text-danger"> * </span></label>
                                    <input type="password" placeholder="" name="password" id="password" class="form-control" >
                                    @if ($errors->has('password'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('password') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="form-group {!! $errors->has('password_confirmation', 'has-error') !!}">
                                    <label for="name">@lang('Password Confirmation') <span class="text-danger"> * </span></label>
                                    <input type="password" placeholder="" name="password_confirmation" id="password_confirmation" class="form-control" >
                                    @if ($errors->has('password_confirmation'))
                                        <span class="invalid-feedback d-block" role="alert">
                                            <strong>{{ $errors->first('password_confirmation') }}</strong>
                                        </span>
                                    @endif
                                </div>
                                <div class="card-footer text-center">
                                    <button type="submit" class="btn btn-info btn-round">{{ __('Register') }}</button>
                                </div>
                            </form>
                            <div class="text-center">
                                If you have user account, 
                                @if(request()->is('en/register') || request()->is('my/register'))
                                    <a href="{{ route('login') }}" > {{ __('Sign in') }}. </a>
                                @else
                                    <a href="{{ route('login.for.ebook') }}" > {{ __('Sign in') }}. </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
             </div>
        </div>
     </div> 
@endsection

@push('scripts')
    <script>
        $(function(){
            console.log("REG")

            $("#front_nrc_photo").change(function(){
                readFrontNrcImageUrl(this);
            });

            $("#back_nrc_photo").change(function(){
                readBackNrcImageUrl(this);
            });

            function readFrontNrcImageUrl(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#front_nrc_photo_view').attr('src', e.target.result);
                        $('#front_nrc_photo_view').css('display', 'block')
                    }

                    reader.readAsDataURL(input.files[0]);
                }else{
                    $('#front_nrc_photo_view').attr('src', '#');
                    $('#front_nrc_photo_view').css('display', 'none')
                }
            }
            
            function readBackNrcImageUrl(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#back_nrc_photo_view').attr('src', e.target.result);
                        $('#back_nrc_photo_view').css('display', 'block')
                    }

                    reader.readAsDataURL(input.files[0]);
                }else{
                    $('#back_nrc_photo_view').attr('src', '#');
                    $('#back_nrc_photo_view').css('display', 'none')
                }
            }
        })
    </script>
@endpush