@extends('layout.layout')

@php
  $pageTitle = '登入';
@endphp

@push('links')
  <link href="{{ Module::asset('user:css/login.css') }}" rel="stylesheet" type="text/css">
  <style>
    .register.btn{
      width: calc(50% - 0.125rem);
      color: #fff;
    }
    .form-control.is-invalid{
      padding-right: calc(0.75rem);
    }
  </style>
@endpush

@section('content')
<div class="d-flex justify-content-center align-items-center" style="height: 80vh;">
  <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" alt="國立體育大學校徽" />
    </div>
    <div class="login-title-bar mt-3">場地租借平台</div>
    <form method="post">
      {{csrf_field()}}
      <div class="form-group">
        <input class="form-control {{ $errors->has('uid') ? ' is-invalid' : '' }}" name="uid" type="text" value="{{old('uid')}}" placeholder="帳號" title="帳號">
        @if ($errors->has('uid'))
          @foreach($errors->get('uid') as $error)
          <div class="invalid-feedback">
            {{ $error }}
          </div>
          @endforeach
        @endif
      </div>
      <div class="form-group">
        <input class="form-control {{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" type="password" value="" placeholder="密碼" autocomplete="current-password"  title="密碼" />
        @if ($errors->has('password'))
          @foreach($errors->get('password') as $error)
          <div class="invalid-feedback">
            {{ $error }}
          </div>
          @endforeach
        @endif
      </div>

      @if(Session::get('login_count') >= 3)
      <div class="form-group">
        <div>
          <input class="form-control" name="captcha" type="text" value="" placeholder="驗證碼">
        </div>
        <div class="d-flex justify-content-around mt-1" >
          <img src="{{captcha_src('flat')}}" id="captcha-image" title="驗證碼" />
          <button class="btn" type="button" id="captcha-refresh">
            <input type="hidden" id="captcha-refresh-url" value="{{route('capcha.referesh')}}" />
            <i class="fas fa-sync-alt fa-2x"></i>
          </button>
        </div>
      </div>
      @endif
      <div class="form-group">
        <button class="btn btn-success btn-block" type="submit" title="登入">登入</button>
        <a class="btn btn-secondary btn-block" href="{{route('user.forget')}}" title="忘記密碼">忘記密碼</a>
      </div>
    </form>
    <div class="row">
      <div class="col">
        <div class="d-flex justify-content-between">
          <a class="register btn btn-primary mr-1" href="{{route('user.normalTerms')}}" title="個人註冊">個人註冊</a>
          <a class="register btn btn-primary" href="{{route('user.terms')}}" title="廠商註冊">廠商註冊</a>
        </div>
        @if(\Module::has('Google'))
          <a class="btn btn-outline-dark btn-block" href="{{route('google.login')}}">
            <i class="fab fa-google fa-fw">&ensp;</i>Google
          </a>
        @endif
        @if(\Module::has('Line'))
          <a class="btn btn-outline-line btn-block" href="{{route('line.login')}}">
            <i class="fab fa-line fa-fw">&ensp;</i>Line
          </a>
        @endif
        @if(\Module::has('Facebook'))
          <a class="btn btn-outline-facebook btn-block" href="{{route('facebook.login')}}">
            <i class="fab fa-facebook fa-fw">&ensp;</i>Facebook
          </a>
        @endif
      </div>
    </div>
    <div class="row mt-4 d-none">
      <div class="col text-center">
      </div>
    </div>
  </div>
</div>
@endsection

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