@extends('layouts.auth')

@section('styles')
    <style>
        body {
            background: url('img/Auth/background_login.jpg?t=20230922');
            background-size: cover;
            background-attachment: fixed;
            background-position: center;
        }

        .main_box {
            float: right;
            margin-right: 5vw;
            margin-top: 15vh;
            width: 550px;
        }

        .bg_box {
            background: url('img/Auth/background_login_box.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            padding: 15% 12% 15% 15%;
            filter: drop-shadow(8px 8px 30px rgba(47, 163, 206, 0.5));
        }

        .logo {
            max-width: 310px;
        }

        #checkEye {
            position: absolute;
            top: 50%;
            right: 30px;
            transform: translateY(-50%);
            cursor: pointer;
            color: #0a3a74;
        }
        @media (max-width: 1440px) {
            .main_box {
                margin-top: 10vh;
            }
        }
        @media (max-width: 600px) {

            .main_box {
                float: none;
                margin-right:auto;
                margin-left:1%;
                margin-top: 10%;
                width: 98%;
            }
            .bg_box {
                background:rgba(163, 237, 255, 0.6);
                border-radius: 10px;
                background-size: 100%;
                padding: 5%;
            }
            .logo{
                width: 90%;
            }
        }
    </style>
@endsection
@section('scripts')
    <script>
        $("#checkEye").click(function() {
            if ($(this).hasClass('fa-eye')) {
                $("#password").attr('type', 'text');
                $("#checkEye").attr('title', '隱藏密碼');
            } else {
                $("#password").attr('type', 'password');
                $("#checkEye").attr('title', '顯示密碼');
            }
            $(this).toggleClass('fa-eye').toggleClass('fa-eye-slash');
        });
    </script>
@endsection

@section('content')
    <div class="main_box">
        <div class="bg_box">
            <div style='text-align:center;margin-bottom:15px;'><img src="{{ asset('img/logo.svg?t=20230922') }}" class='logo'></div>
            <form method="POST" action="{{ route('login') }}">
                <div class="card">
                    <div class="card-header w-100 text-center" style="background:#1672CCDD;"><u>登入</u></div>
                    <div class="card-body">
                        @csrf
                        <!-- {{ dump($errors) }} -->

                        <div class="form-group row">
                            <label for="account" class="col-md-12 col-form-label">帳號</label>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <input id="account" type="text"
                                    class="form-control @error('account') is-invalid @enderror" name="account"
                                    value="{{ old('account') != '' ? old('account') : Cookie::get('ck_act') }}" required
                                    autocomplete="account" autofocus>

                                @error('account')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="password" class="col-md-12 col-form-label">密碼</label>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12">
                                <input id="password" type="password"
                                    class="form-control @error('password') is-invalid @enderror" name="password" required
                                    autocomplete="current-password">
                                <i id="checkEye" class="fa fa-eye" title='顯示密碼'></i><!--密碼顯示-->

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="form-group row align-items-center">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember_acc" id="remember_acc"
                                        {{ old('ck_rem') || Cookie::get('ck_rem') ? 'checked' : '' }}>

                                    <label class="ml-2" for="remember_acc">
                                        <small>記住帳號</small>
                                    </label>
                                    <!--<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>

                                                <label class="ml-2" for="remember">
                                                    <small>記住密碼</small>
                                                </label>-->
                                </div>
                            </div>
                            <div class="col-md-6 text-right">
                                <a class="btn btn-link" href="{{ route('password.request') }}">
                                    <small><u>忘記密碼?</u></small>
                                </a>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-md-12 col-form-label">驗證碼</label>
                        </div>
                        <div class="form-group row">
                            <div class="col-md-12 text-center">
                                <div class="g-recaptcha" data-sitekey="{{ Config::get('services.recaptcha_site_key') }}"
                                    data-theme="light" data-size="normal" data-expired-callback="expired"
                                    data-error-callback="error">
                                </div>

                                @error('g-recaptcha-response')
                                    <strong class='text-danger'>{{ $message }}</strong>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 text-center">
                        <button type="submit" class='btn'>
                            <img src="{{ asset('img/Auth/button_login.svg') }}" width="160" height="50" />
                        </button>
                    </div>
                    <!--<div class='col-md-12 text-center'>
                                    <a href="{{ route('register') }}" class='text-white'>
                                        <small>註冊新帳號</small>
                                    </a>
                                </div>-->
                </div>
            </form>
        </div>
    </div>
@endsection