@extends('.frontend.default')

@section('content')
    <div class="container" id="register_reset">

        <div class="row justify-content-center">
            <div class="col-12 col-md-8">
                @if (!empty($null_teacher))
                    <div class="row" style="height: 100vh">
                        <div class="col-12">
                            <div class="p-2">
                                <p style="font-size:20px">{{ $null_teacher }}</p>
                                <a href="{{ route('/') }}">回到主頁</a>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="row wincaers my-5">
                        <div class="col-12">
                            <h4>密碼重設</h4>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <form action="{{ route('.register_reset.reset') }}" method="post">
                                @csrf

                                <input type="hidden" name="remember_token" value="{{ $remember_token }}">

                                <div class="row">
                                    <div class="col-12 mb-2">
                                        <h3>電郵地址</h3>
                                    </div>
                                    <div class="col-12 mb-4">
                                        <input id="email" type="email"
                                            class="form-control m-0 @error('email') is-invalid @enderror" name="email"
                                            value="{{ $email ?? old('email') }}" required autocomplete="email" autofocus
                                            {{ empty($email ?? old('email')) ? '' : 'readonly' }} style="border:unset">
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12 mb-2">
                                        <h3>密碼</h3>
                                    </div>
                                    <div class="col-12 mb-4">
                                        <input id="password" type="password"
                                            class="form-control m-0 @error('password') is-invalid @enderror" name="password"
                                            required autocomplete="new-password">
                                        <p class="text-right text-secondary">{{__('passwords.hint')}}</p>
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12 mb-2">
                                        <h3>確認密碼</h3>
                                    </div>
                                    <div class="col-12">
                                        <input id="password-confirm" type="password" class="form-control"
                                            name="password_confirmation" required autocomplete="new-password">
                                    </div>
                                </div>

                                <div class="row">
                                    <label class="col-1 checkmark_box">
                                        <input type="checkbox" name="has_agree_school_portal_statement"
                                            id="has_agree_school_portal_statement" hidden>
                                        <span class="checkmark has_agree_school_portal_statement_checkmark" style="left: 10px;"></span>
                                    </label>
                                    <div class="col-11" style="top:-10px">
                                        <span>本人已閱覽並同意有關<a href="{{route('.terms_of_use')}}" target="_blank">使用條款</a>及<a href="{{route('.private_policy')}}" target="_blank">私隱政策聲明</a>。如違反有關條款及聲明，本人明白校易網(EasySchoolConnect)有權暫停或終止本人的帳號。</span>
                                    </div>
                                    <div class="col-11">
                                        @error('has_agree_school_portal_statement')
                                            <span class="invalid-feedback d-block" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <label class="col-1 checkmark_box">
                                        <input type="checkbox" name="has_agree_promote"
                                               id="has_agree_promote" hidden>
                                        <span class="checkmark has_agree_promote_checkmark" style="left: 10px;"></span>
                                    </label>
                                    <div class="col-11">
                                        <span>本人同意香港青年協會使用本人之個人資料作推廣用途。</span>
                                    </div>
                                </div>

                                <div class="row justify-content-center">
                                    <div class="col-12 sub-btn">
                                        <button type="submit" class="btn btn-primary mt-3 mb-5"
                                            style="max-width: unset">確認</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <style>
        #register_reset input {
            max-width: 100%;
            border: 1px solid #ffc235;
            border-radius: 15px;
            background: transparent;
            position: relative;
            padding: 10px !important;
            height: 57px !important;
            margin-bottom: 30px;
            outline: none;
            box-shadow: none;
            color: #000 !important;
        }

    </style>
@endsection