@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card logincard">
                    <div class="card-header">News & Events</div>

                    <div class="card-body">
                        <ul style="list-style:none;">
                            @foreach($news as $n)
                            <li><a class="text-white" href="{{ URL('press-release/'.$n->slug)}}">{{ $n->title }}</a></li><p></p>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card logincard">
                    <div class="card-header">{{ __('Login') }}</div>

                    <div class="card-body">

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        <form method="POST" action="{{ route('login') }}">
                            @csrf

                            <div class="row mb-3">
                                {{-- <label for="email"
                                    class="col-md-4 col-form-label text-md-end">{{ __('Email Address') }}</label> --}}

                                <div class="col-md-12">
                                    <input id="email" type="email"
                                        class="form-control @error('email') is-invalid @enderror" name="email"
                                        value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="Email Address">

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

                            <div class="row mb-3">
                                {{-- <label for="password"
                                    class="col-md-4 col-form-label text-md-end">{{ __('Password') }}</label> --}}

                                <div class="col-md-12">
                                    <input id="password" type="password"
                                        class="form-control @error('password') is-invalid @enderror" name="password"
                                        required autocomplete="current-password" placeholder="Password">

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

                            <div class="row mb-3">
                                {{-- <label class="col-md-4 col-form-label text-md-end">Captcha</label> --}}
                                <div class="col-md-12">
                                    <div class="captcha-box">
                                        <canvas id="canvas"></canvas>

                                        <a href="javascript:;" class="p-2" id="refreshcaptcha">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
                                                <path fill-rule="evenodd"
                                                    d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z" />
                                                <path
                                                    d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466" />
                                            </svg>
                                        </a>

                                        <input name="code" class="form-control" id="code" placeholder="Captcha">
                                        <p class="text-danger captchaerror d-none">Wrong Captcha</p>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="remember" id="remember"
                                            {{ old('remember') ? 'checked' : '' }}>

                                        <label class="form-check-label" for="remember">
                                            {{ __('Remember Me') }}
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="row mb-0">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary" disabled id="loginbtn">
                                        {{ __('Login') }}
                                    </button>

                                    <a class="btn btn-link" href="javascript:;" data-bs-toggle="modal"
                                        data-bs-target="#forgotPasswordModal">
                                        {{ __('Forgot Your Password?') }}
                                    </a>
                                    {{-- @if (Route::has('password.request'))
                                    <a class="btn btn-link" href="{{ route('password.request') }}">
                                        {{ __('Forgot Your Password?') }}
                                    </a>
                                @endif --}}
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="col-sm-12 text-center">
            <img src="{{ asset('image/loginbanner.png') }}" class="m-3"/>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-body">
                    <h4 class="text-center text-primary">To update your password, please reach out to the administrator at
                        garcadmin@yopmail.com.</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
    </script>
    <script type="text/javascript" src="{{ asset('js/jquery-captcha.min.js') }}"></script>
    <script>
        // step-1
        const captcha = new Captcha($('#canvas'), {
            length: 4
        });
        // api
        //captcha.refresh();
        //captcha.getCode();
        //captcha.valid("");

        $('#code').on('change', function() {
            const ans = captcha.valid($('input[name="code"]').val());
            if (ans == true) {
                $('.captchaerror').addClass('d-none');
                $('#loginbtn').attr('disabled', false);
            } else {
                $('.captchaerror').removeClass('d-none');
                $('#loginbtn').attr('disabled', true);
            }
            //captcha.refresh();
        });

        $('body').on('click', '#refreshcaptcha', function() {
            captcha.refresh();
        });
    </script>
@endpush