@extends('layout.layout')

{{-- css --}}
@push('links')
  <link href="{{ Module::asset('user:css/login.css') }}" rel="stylesheet" type="text/css">
  <style nonce="{{ csp_nonce() }}">
    .container-fluid main {
      margin-left: 0;
      width: 100%;
    }
  </style>
@endpush

{{-- Content --}}
@section('content')
<div class="d-flex flex-column justify-content-center align-items-center mt-5 mb-5">
  <div class="align-self-center steps-border">
    @include('component.alert', ['session_name' => 'errorlogin'])
    <div class="text-center">
      <img src="{{URL::asset('images/logo.png')}}" width="150px" />
    </div>
    <div class="login-title-bar mt-3">TEST SAML Login</div>
    <input type="hidden" id="captcha-refresh-url" value="{{route('capcha.referesh')}}" />
    @php
    $authTab = 'authDB-tab';
    if(Session::has('nav')&&Session::get('nav') == 'authCDC-tab'){
      $authTab = 'authCDC-tab';
    }
    @endphp
    <ul class="nav nav-tabs" id="authTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link {{($authTab == 'authDB-tab')? 'active': ''}}" id="authDB-tab" data-toggle="tab" href="#authDB-content" role="tab" aria-controls="authDB-content" aria-selected="true">一般帳號</a>
      </li>
      <li class="nav-item">
        <a class="nav-link {{($authTab == 'authCDC-tab')? 'active': ''}}" id="authCDC-tab" data-toggle="tab" href="#authCDC-content" role="tab" aria-controls="authCDC-content" aria-selected="false">自然人憑證</a>
      </li>
    </ul>

    <div class="tab-content" id="authTabContent">
      <div class="tab-pane pt-3 {{($authTab == 'authDB-tab')? 'active': ''}}" id="authDB-content" role="tabpanel" aria-labelledby="authDB-tab">
        <form method="post" action="{{$auth_url}}">
          {{csrf_field()}}
          @include('user::component/login-input', ['name' => 'uid', 'type' => 'text', 'value' => old('uid'), 'placeholder' => '帳號', 'required' => 'required'])
          @include('user::component/login-input', ['name' => 'password', 'type' => 'password', 'value' => '', 'placeholder' => '密碼', 'required' => 'required'])
          <div class="form-group">
            <input class="form-control {{ $errors->has('captcha') ? ' is-invalid' : '' }}" name="captcha" type="text" value="" placeholder="驗證碼" required>
            @if ($errors->has('captcha'))
              @foreach($errors->get('captcha') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
            <img src="" class="captcha-image" />
            <button type="button" class="btn btn-link captcha-refresh" id='authDB-captcha'>
              <span class="fas fa-sync-alt fa-2x"></span>
            </button>
          </div>
          <div class="form-group">
            <button class="btn btn-primary btn-block" type="submit">登入</button>
          </div>
          <div class="row">
            <div class="col">
              <a class="btn btn-outline-dark btn-block" href="{{route('user.forget')}}">忘記密碼</a>
            </div>
          </div>
        </form>
      </div>

      <div class="tab-pane pt-3 {{($authTab == 'authCDC-tab')? 'active': ''}}" id="authCDC-content" role="tabpanel" aria-labelledby="authCDC-tab">
        <form method="post" action="{{route('authCDC.login')}}">
          {{csrf_field()}}
          @include('user::component/login-input', ['name' => 'idno', 'type' => 'password', 'value' => '', 'placeholder' => '請輸入身分證字號', 'required' => 'required'])
          @include('user::component/login-input', ['name' => 'pin', 'type' => 'password', 'value' => '', 'placeholder' => '請輸入憑證PIN碼', 'required' => 'required'])
          @include('user::component/login-input', ['name' => 'tbs', 'type' => 'hidden', 'value' => config('authcdc.tbs'), 'placeholder' => ''])
          @include('user::component/login-input', ['name' => 'tbsEncoding', 'type' => 'hidden', 'value' => config('authcdc.tbs_encode'), 'placeholder' => ''])
          @include('user::component/login-input', ['name' => 'hashAlgorithm', 'type' => 'hidden', 'value' => config('authcdc.hash'), 'placeholder' => ''])
          @include('user::component/login-input', ['name' => 'returnCode', 'type' => 'hidden', 'value' => '', 'placeholder' => ''])
          <textarea id="b64Signature" name="b64Signature" readonly="true" rows="8" cols="65" class="d-none"></textarea>
          <textarea id="b64Cert" name="b64Cert" readonly="true" rows="8" cols="65" class="d-none"></textarea>
          <div class="form-group">
            <input class="form-control {{ $errors->has('captcha') ? ' is-invalid' : '' }}" name="captcha" type="text" value="" placeholder="驗證碼" required>
            @if ($errors->has('captcha'))
              @foreach($errors->get('captcha') as $error)
              <div class="invalid-feedback">
                {{ $error }}
              </div>
              @endforeach
            @endif
            <img src="" class="captcha-image" />
            <button type="button" class="btn btn-link captcha-refresh" id='authCDC-captcha'>
              <span class="fas fa-sync-alt fa-2x"></span>
            </button>
          </div>
          <div class="form-group">
            @if(!env('TEST_MODE',false))
            <button class="btn btn-primary btn-block" id="btn-authCDC" type="button">登入</button>
            @else
            <button class="btn btn-primary btn-block" id="btn-authCDC" type="submit">登入</button>
            @endif
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
  <div class="d-none" id="cdc-description">
    <div>
      <p class="m-0">注意事項：</p>
      <ul class="text-secondary cdc-description-list">
        <li>若IC卡密碼(PIN Code)連續三次輸入錯誤，將造成IC卡個人密碼被鎖住，請洽發卡單位處理解碼事宜</li>
        <li>若出現【尚未安裝元件】錯誤，<a href="https://api-hisecurecdn.cdn.hinet.net/HiPKILocalSignServer/downloadMain.html" target="_blank">請先安裝跨平台網頁元件</a>，再進行認證</li>
        <li>若使用IE時畫面會停在【簽章中…】，請將本網站加入IE【信任的網站】內，重開IE再驗證，或改用其他瀏覽器</li>
      </ul>
    </div>
  </div>
@endsection

{{-- Script --}}
@push('scripts')
  <script type="text/javascript" src="{{ Module::asset('authcdc:js/errorcode.js') }}"></script>
  <script type="text/javascript" src="{{ Module::asset('authcdc:js/auth.js') }}"></script>
  <script type="text/javascript" src="{{ Module::asset('user:js/login.js') }}"></script>
@endpush