@extends('frontend.layouts.app')

@section('title')
    Register
@stop

@section('content')

<div id="banner" style="background-image: url({{ asset('images/inside_banner_touse_1.jpg') }}); position: relative; margin-top: -50px;">
  <h1 class="text-center text-white mt-5">REGISTER</h1>
</div>

  <div class="container my-5">
    <div class="row">
      <div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2 col-sm-12 mr-auto">
        @if (session()->has('success'))
          <div class="alert alert-success fade show" role="alert">
              <strong>Success!</strong><br />
              {{ __('SuccessMessageRegister') }}
              <br />
              <div class="text-center">
                  <a href="{{ route('ebook') }}" class="btn btn-primary">Go to E-library</a>
              </div>
          </div>
        @endif
        <div class="card card-signup">
            <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" >
                            <span class="text-danger" id="front_photo_file_type_error" style="display: none;" role="alert">
                                File type must be image.
                            </span>
                            <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" >
                              <span class="text-danger" id="back_photo_file_type_error" style="display: none;" role="alert">
                                  File type must be image.
                              </span>
                              <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="">
                        <button type="submit" class="btn btn-info btn-round text-white float-right">{{ __('Register') }}</button>
                    </div>
                </form>
                <div class="">
                    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>
@stop

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

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

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

            function readFrontNrcImageUrl(input) {
              var _validFileExtensions = ['image/png','image/jpg','image/jpeg','image/gif','image/svg']
                if (input.files && input.files[0]) {
                  var reader = new FileReader();
                  if(_validFileExtensions.includes(input.files[0].type)){
                    reader.onload = function (e) {
                        $('#front_nrc_photo_view').attr('src', e.target.result);
                        $('#front_nrc_photo_view').css('display', 'block')
                        $('#front_photo_file_type_error').css('display', 'none')
                        console.log("TRUE")
                    }
                    reader.readAsDataURL(input.files[0]);
                  }else{
                    $('#front_nrc_photo_view').attr('src', '#');
                    $('#front_nrc_photo_view').css('display', 'none')
                    $('#front_photo_file_type_error').css('display', 'block')
                    console.log("FALSE")
                  }
                }else{
                    $('#front_nrc_photo_view').attr('src', '#');
                    $('#front_nrc_photo_view').css('display', 'none')
                    $('#front_photo_file_type_error').css('display', 'none')
                }
            }
            
            function readBackNrcImageUrl(input) {
              var _validFileExtensions = ['image/png','image/jpg','image/jpeg','image/gif','image/svg']
              if (input.files && input.files[0]) {
                var reader = new FileReader();
                if(_validFileExtensions.includes(input.files[0].type)){
                  reader.onload = function (e) {
                      $('#back_nrc_photo_view').attr('src', e.target.result);
                      $('#back_nrc_photo_view').css('display', 'block')
                      $('#back_photo_file_type_error').css('display', 'none')
                      console.log("TRUE")
                  }
                  reader.readAsDataURL(input.files[0]);
                }else{
                  $('#back_nrc_photo_view').attr('src', '#');
                  $('#back_nrc_photo_view').css('display', 'none')
                  $('#back_photo_file_type_error').css('display', 'block')
                  console.log("FALSE")
                }
              }else{
                  $('#back_nrc_photo_view').attr('src', '#');
                  $('#back_nrc_photo_view').css('display', 'none')
                  $('#back_photo_file_type_error').css('display', 'none')
              }
            }
        })
    </script>
@endpush