@extends('layout.layout')

{{-- css --}}
@push('links')
  <link href="{{ Module::asset('user:css/login.css') }}" rel="stylesheet" type="text/css">
  <style nonce="{{ csp_nonce() }}">
    .user-select-section{
      cursor: pointer;
    }
    .user-select-section:hover{
      color: #fff;
      background-color: #28A8C8;
    }
  </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">{{env('APP_NAME', '智新資通')}}</div>
    <form method="post" id="acc_form">
      {{csrf_field()}}
      @if (request()->has('redirect_uri'))
        <input type="hidden" name="redirect_uri" value="{{request()->get('redirect_uri')}}">
      @endif
      <input type="hidden" name="login_type" value="{{$login_type}}">
      <input type="hidden" name="back_url" value="{{$back_url}}">
      <input type="hidden" name="code" value="">
    </form>
    <div>
      <p class="text-danger">該自然人憑證有多個帳號，</br>請點選以下任一個帳號進行登入。</p>
    </div>
    @foreach($verifys as $verify)
    <div class="user-select-section steps-border border rounded px-3 py-2 mt-3" data-code="{{$verify->value}}">
      使用者：{{$verify->user->name}}</br>
      職位：{{$verify->user->positions_output()}}
    </div>
    @endforeach

  </div>
</div>
@endsection

{{-- Script --}}
@push('scripts')
<script nonce="{{ csp_nonce() }}">
$(document).ready(function () {
  $(".user-select-section").on('click', function () {
    var code = $(this).data('code');
    $('[name=code]').val(code);
    var form = $('#acc_form');
    form.submit();
  });
});
</script>
@endpush