@extends('layouts.login')

@section('content')
    <div class="login-box">
        <div class="login-logo">
            <a><b>So-Manager&nbsp;</b>{{ __('管理パネル') }}</a>
        </div>
        <!-- /.login-logo -->
        <div class="card">
            <div class="card-body login-card-body">
                <p class="login-box-msg">{{ __('ログインID、パスワードを入力して') }}<br
                            class="d-none d-lg-inline">{{ __('ログインボタンをクリックしてください') }}</p>

                <form action="{{ route('login') }}" method="post" novalidate>
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="input-group mb-3 {{ $errors->has('ope_id') ? 'error_input' : '' }}">
               <input type="text"
                   class="form-control form-control-lg"
                   placeholder="{{ __('ログインID') }}" name="ope_id" value="{{ old('ope_id') }}">
                        <div class="input-group-append">
                            <span class="fa fa-user input-group-text"></span>
                        </div>
                    </div>
                    @if ($errors->has('ope_id'))
                        <div class="error_login" role="alert">
                                        <strong>{{ $errors->first('ope_id') }}</strong>
                                    </div>
                    @endif

<div class="input-group mb-3 {{ $errors->has('ope_pass') ? 'error_input' : '' }}">
    <input type="password"
           id="ope_pass"
           class="form-control form-control-lg"
           placeholder="{{ __('パスワード') }}"
           name="ope_pass">

    <div class="input-group-append">
        <span class="input-group-text eye-btn"
              onmousedown="showPassword('ope_pass', this)"
              onmouseup="hidePassword('ope_pass', this)"
              onmouseleave="hidePassword('ope_pass', this)"
              ontouchstart="showPassword('ope_pass', this)"
              ontouchend="hidePassword('ope_pass', this)">
            {{-- 默认：闭眼 --}}
            <svg class="eye-off" width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
                      stroke="currentColor" stroke-width="2"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
                <line x1="3" y1="3" x2="21" y2="21"
                      stroke="currentColor" stroke-width="2"/>
            </svg>

            {{-- 按住时：睁眼 --}}
            <svg class="eye-on d-none" width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M1 12C3.5 7 7.5 4 12 4C16.5 4 20.5 7 23 12C20.5 17 16.5 20 12 20C7.5 20 3.5 17 1 12Z"
                      stroke="currentColor" stroke-width="2"/>
                <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
            </svg>
        </span>
    </div>
</div>




                    @if ($errors->has('ope_pass'))
                        <div class="error_login" role="alert">
                                        <strong>{{ $errors->first('ope_pass') }}</strong>
                                    </div>
                    @endif
                    <div class="row mt40">
                        <div class="col-12 col-lg-8 offset-0 offset-lg-2">
                            <button type="submit"
                                    class="btn btn-lg btn-primary btn-block btn-flat">{{ __('ログイン') }}</button>
                        </div>
                        <!-- /.col -->
                    </div>
                </form>
                <p class="mb-1 mt50">
                    <a href="{{route('forgot_password')}}">{{ __('パスワードを忘れた方はこちら') }}</a>
                </p>
                {{-- 「オペレータマスタ」で管理かつ設計書ない為、一時的に新規オペレーター登録をコメントアウト
                <p class="mb-0">
                    <a href="./register.html" class="text-center">{{ __('新規オペレーター登録') }}</a>
                </p>
                --}}
            </div>
            <!-- /.login-card-body -->
        </div>
    </div>

<script>
function showPassword(id, el) {
    const input = document.getElementById(id);
    if (!input) return;

    input.type = 'text';
    el.querySelector('.eye-off').classList.add('d-none');
    el.querySelector('.eye-on').classList.remove('d-none');
}

function hidePassword(id, el) {
    const input = document.getElementById(id);
    if (!input) return;

    input.type = 'password';
    el.querySelector('.eye-on').classList.add('d-none');
    el.querySelector('.eye-off').classList.remove('d-none');
}
</script>

{{-- 指摘により暫定対応  --}}
<style>
.login-card-body {
    background-color: #9ff3c4ff; 
    border-radius: 8px;
}

.login-box .card {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}
</style>
@endsection