@extends('public.skeleton')
@section('title', __('hf.menu.validate'))

@section('library-scripts')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection

@section('library-styles')

@endsection

@section('body')
    <div class="container-fluid p-0 menu_margin_top_fixed min_height_banner_inner" style="position: relative; clip-path: polygon(50% 9%, 100% 0, 100% 93%, 50% 100%, 0 93%, 0 0);">
        <img src="{{asset('images/banner_cont.jpg')}}" class="img-fluid">
        <div class="overlay_inner_img"></div>
        <div class="inner_caption">{{__('hf.menu.validate')}}</div>
    </div>
    <!---------------------------------------------------------------------->
    <div class="container-fluid"
         style="padding-top: 2.8rem; padding-bottom: 3rem">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <form id="form" action="{{route('frontend.validate_certificate_action')}}" method="POST">
                        @csrf

                        <div class="form-group">
                            <div class="mb-3 mr-5">
                                <input id="company" style="border-radius: 10px;" placeholder="{{ __('Company') }}" type="text"
                                       class="pl-2 form-control{{ $errors->has('company') ? ' is-invalid' : '' }}"
                                       name="company" value="{{session('company', '')}}" required>
                            </div>
                            <div class="mb-3 mr-5">
                                <input id="certificate_number" style="border-radius: 10px;" placeholder="{{ __('Certificate Number') }}" type="text"
                                       class="pl-2 form-control{{ $errors->has('certificate_number') ? ' is-invalid' : '' }}"
                                       name="certificate_number" value="{{session('certificate_number', '')}}" required>
                            </div>

                            <div class="g-recaptcha mb-3" data-callback="recaptchaGood" data-expired-callback="recaptchaExpired"
                                 data-sitekey="{{env('RECAPTCHA_SITEKEY')}}"></div>

                            <div class="mr-5">
                                <button id="submitBtn" class="btn btn-secondary" disabled style="width: 100%;">
                                    {{ __('Validate') }}
                                </button>
                            </div>

                        </div>

                    </form>
                </div>
                <div class="col-md-8">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if ($certificate = session('certificate', false))
                        <div>
                            @if($certificate->expires_at->diffInSeconds(now(), false) <= 0)
                                <h4  style="color: #4E7034">the certificate is valid:</h4>
                                <div class="col-md-3">
                                    <a target="_blank" href="{!! route('view-certificate', [$certificate->fake_id])!!}" style="color: #222">
                                        <img src="{{asset('images/pdf.png')}}" class="img-fluid"><br>
                                        {{$certificate->title}}<br>
                                        <p style="font-size: 14px; color: #666">{{$certificate->created_at->format('d-M-Y')}}</p>
                                    </a>
                                </div>
                            @else
                                <h4  style="color: #4E7034">the certificate is present but expired</h4>
                            @endif
                        </div>
                    @elseif(session('company', false))
                        <div>
                            <h4  style="color: #4E7034">We could Not find a certificate with your search</h4>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection

@section('footer-scripts')
    <script>
        function recaptchaGood() {
            $('#submitBtn').attr('disabled', false);
        }
        function recaptchaExpired() {
            $('#submitBtn').attr('disabled', true);
        }
        if ( window.history.replaceState ) {
            window.history.replaceState( null, null, window.location.href );
        }
    </script>
@endsection