@extends('user::layouts/panel')

@push('module-links')
<link href="{{ Module::asset('user:css/panel/login.css') }}" rel="stylesheet" type="text/css">
@endpush


@section('module-content')
<div class="row justify-content-center h-80-vh">
  <div class="col-xxl-5 col-xl-4 col-lg-6 col-md-8 align-self-center text-center">
    <img src="{{ URL::asset('images/logo.png') }}" width="100" height="100" class="mb-3" alt="logo" />
    <div class="card rounded-4 shadow">
      <div class="card-body p-5">
        {{-- 首先顯示 Google 登入選項 --}}
        <div class="row mb-4">
          <div class="col-12">
            <div class="d-grid gap-2">
              <a href="{{ route('oauth.redirect', parameters: ['provider' => 'google']) }}" class="btn btn-outline-secondary btn-lg">
                <i class="fab fa-google me-2"></i>Google 登入
              </a>
            </div>
          </div>
        </div>

        <div class="separator-text">
          <span>或</span>
        </div>

        {{-- 管理員登入選項 --}}
        <div class="row mt-3">
          <div class="col-12">
            <div class="d-grid gap-2">
              <button type="button" class="btn btn-outline-primary" id="admin-login-toggle">
                <i class="fas fa-user-shield me-2"></i>管理員登入
              </button>
            </div>
          </div>
        </div>

        {{-- 管理員登入表單 (預設隱藏) --}}
        <div id="admin-login-form" class="mt-4 d-none">
          <form method="POST">
            @csrf
            <div class="form-floating">
              <input type="uid" @class(['form-control', 'is-invalid' => $errors->has('uid')]) id="text" name="uid"
                placeholder="{{ __('UID') }}" value="{{ old('uid') }}" autocomplete="uid" required>
              <label for="uid">{{ __('UID') }}</label>
              <div class="text-start">
                <x-form-invalid name="uid" class="d-block" />
              </div>
            </div>

            <div class="form-floating mt-3">
              <input type="password" @class(['form-control', 'is-invalid' => $errors->has('mima')]) id="mima" name="mima"
                placeholder="{{ __('MIMA') }}" autocomplete="current-password" required>
              <label for="mima">{{ __('MIMA') }}</label>
              <x-form-hideeye for="mima"></x-form-hideeye>
              <div class="text-start">
                <x-form-invalid name="mima" class="d-block" />
              </div>
            </div>

            @env(['testing', 'production'])
              @empty(!config('services.google.recaptcha_sitekey'))
                <div class="form-group row mt-3">
                  <div class="col-12">
                    <div class="g-recaptcha d-inline-block" data-sitekey="{{ config('services.google.recaptcha_sitekey') }}"
                      data-callback="captcha_filled" data-expired-callback="captcha_expired"></div>
                    <div class="invalid-feedback">請點選驗證</div>
                    <x-form-invalid name="g-recaptcha-response" class="d-block" />
                  </div>
                </div>
              @else
                <div class="form-group row mt-3">
                  <div class="col-lg-12 text-end">
                    <div class="input-group">
                      <input type="text" @class(['form-control', 'is-invalid' => $errors->has('captcha')]) id="captcha" name="captcha"
                        placeholder="{{ __('CAPTCHA') }}">
                      <input type="hidden" name="captcha_key" id="captcha-key" value="{{ $captcha['key'] }}">
                      <span class="input-group-append">
                        <img src="{{ $captcha['img'] }} " id="captcha-image" alt="captcha" class="" />
                      </span>
                    </div>
                    <div class="d-flex justify-content-between">
                      <div>
                        <x-form-invalid name="captcha" class="d-block" />
                      </div>
                      <small class="mt-1 cursor-pointer" id="captcha-refresh" for="captcha">
                        <i class="fa-solid fa-arrows-rotate">&ensp;</i><span>驗證碼</span>
                      </small>
                    </div>
                  </div>
                </div>
              @endempty
            @endenv

            {{-- Submit --}}
            <div class="row mt-3">
              <div class="col-12">
                <div class="d-grid gap-2">
                  <button type="submit" class="btn btn-primary">{{ __('LOGIN')}}</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection


@push('module-scripts')
<script type="text/javascript" src="{{ Module::asset('user:js/panel/login.js') }}" defer></script>
@endpush