@extends(getTemplate() . '.layouts.app')

@section('content')
    <style>
        .after-line {
            width: 100%;
            height: 1px;
            margin-top:5px;
            background-color: #e5e5e5;
        }
    </style>
    <div class="container">
        @if (isset($uniqueId))
            @if (isset($certificate))
            <div id="certificateInfo" class="mt-4">
                    <h3 class="section-title text-center">{{ trans('site.certificate_is_valid') }}</h3>
                    <div class="after-line mb-3"></div>
                    <div class="mt-25 d-flex flex-column align-items-center">
                        <i class="ki-outline ki-check-circle    fs-xl-3hx text-success"></i>
                        <p class="mt-10">{{ trans('site.certificate_is_valid_hint') }}</p>
                        <div class="w-75">
                            <div class="mt-15 d-flex justify-content-between">
                                <span class="text-gray font-weight-bold">{{ trans('quiz.student') }}:</span>
                                <span class="text-gray">{{ $certificate['student'] }}</span>
                            </div>
                            <div class="mt-10 d-flex justify-content-between">
                                <span class="text-gray font-weight-bold">{{ trans('public.date') }}:</span>
                                <span class="text-gray">{{ $certificate['date'] }}</span>
                            </div>
                            <div class="mt-10 d-flex justify-content-between">
                                <span class="text-gray font-weight-bold">{{ trans('webinars.webinar') }}:</span>
                                <span class="text-gray">{{ $certificate['webinar_title'] }}</span>
                            </div>
                            <div class="mt-10 d-flex justify-content-between">
                                <span class="text-gray font-weight-bold">{{ trans('site.certificate_unique_id') }}:</span>
                                <span class="text-gray">{{ $uniqueId }}</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4 text-center">
                        <a href="/certificate_validation/{{ $uniqueId }}/download"
                           class="btn btn-primary"
                           data-toggle="tooltip"
                           title="{{ trans('quiz.download_certificate') }}"
                           download>
                           <i data-feather="download" height="40"></i>
                        </a>
                    </div>
                </div>

            @else
                <div id="invalidCertificate" class="mt-4">
                    <h3 class="section-title text-center">{{ trans('site.certificate_not_found') }}</h3>
                    <div class="after-line mb-3"></div>
                    <div class="mt-25 d-flex flex-column align-items-center">
                        <div class="swal2-icon swal2-error swal2-icon-show" style="display: flex;">
                            <span class="swal2-x-mark">
                                <span class="swal2-x-mark-line-left"></span>
                                <span class="swal2-x-mark-line-right"></span>
                            </span>
                        </div>
                        <p class="mt-10 text-center">{{ $error }}</p>
                        <div class="w-75">
                            <div class="mt-15 d-flex justify-content-between">
                                <span class="text-gray font-weight-bold">{{ trans('site.certificate_unique_id') }}: {{ $uniqueId }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @else
            <div class="row login-container">
                <div class="col-12 col-md-6 pl-0">
                    <img src="{{ getPageBackgroundSettings('certificate_validation') }}" class="img-cover" alt="Login">
                </div>
                <div class="col-12 col-md-6">
                    <div class="login-card">
                        <h1 class="font-20 font-weight-bold">{{ trans('site.certificate_validation') }}</h1>
                        <p class="font-14 text-gray mt-15">{{ trans('site.certificate_validation_hint') }}</p>
                        <form method="post" action="/certificate_validation/validate" class="mt-35">
                            {{ csrf_field() }}
                            <div class="form-group">
                                <label class="input-label" for="unique_id">{{ trans('site.certificate_unique_id') }}:</label>
                                <input type="text" name="unique_id" class="form-control" id="unique_id" aria-describedby="unique_idHelp" value="">
                                <div class="invalid-feedback"></div>
                            </div>
    
                            @if (config('app.enable_certificate_captcha'))
                                <div class="form-group">
                                    <label class="input-label">{{ trans('site.captcha') }}</label>
                                    <div class="row align-items-center">
                                        <div class="col">
                                            <input type="text" name="captcha" class="form-control">
                                            <div class="invalid-feedback"></div>
                                        </div>
                                        <div class="col d-flex align-items-center">
                                            <img id="captchaImageComment" class="captcha-image" src="">
                                            <button type="button" id="refreshCaptcha" class="btn-transparent ml-15">
                                                <i data-feather="refresh-ccw" width="24" height="24" class=""></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endif
    
                            <button type="button" id="formSubmit" class="btn btn-primary btn-block mt-20">{{ trans('cart.validate') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        @endif
    </div>

    <div id="certificateModal" class="d-none">
        <h3 class="section-title text-center">{{ trans('site.certificate_is_valid') }}</h3>
        <div class="after-line mb-3"></div>
        <div class="mt-25 d-flex flex-column align-items-center">
            <img src="/assets/default/img/check.png" alt="" width="120" height="117">
            <p class="mt-10">{{ trans('site.certificate_is_valid_hint') }}</p>
            <div class="w-75">
                <div class="mt-15 d-flex justify-content-between">
                    <span class="text-gray font-weight-bold">{{ trans('quiz.student') }}:</span>
                    <span class="text-gray modal-student"></span>
                </div>
                <div class="mt-10 d-flex justify-content-between">
                    <span class="text-gray font-weight-bold">{{ trans('public.date') }}:</span>
                    <span class="text-gray"><span class="modal-date"></span></span>
                </div>
                <div class="mt-10 d-flex justify-content-between">
                    <span class="text-gray font-weight-bold">{{ trans('webinars.webinar') }}:</span>
                    <span class="text-gray"><span class="modal-webinar"></span></span>
                </div>
                <div class="mt-10 d-flex justify-content-between">
                    <span class="text-gray font-weight-bold">{{ trans('site.certificate_unique_id') }}:</span>
                    <span class="text-gray"><span class="modal-unique-id"></span></span>
                </div>
            </div>
        </div>
        <div class="mt-30 d-flex align-items-center justify-content-end">
            <button type="button" class="btn btn-sm btn-danger ml-10 close-swl">{{ trans('public.close') }}</button>
        </div>
    </div>
@endsection


@push('scripts_bottom')
<script>
    var certificateNotFound = '{{ trans('site.certificate_not_found') }}';
    var close = '{{ trans('public.close') }}';

    function showCertificateModal(certificate) {
        if (certificate) {
            $('.modal-student').text(certificate.student);
            $('.modal-date').text(certificate.date);
            $('.modal-webinar').text(certificate.webinar_title);
            $('.modal-unique-id').text(certificate.unique_id);
            Swal.fire({
                html: $('#certificateModal').html(),
                showCancelButton: false,
                showConfirmButton: false,
                customClass: {
                    content: 'p-0 text-left',
                },
                width: '30rem',
            });
        }
    }

    $(document).ready(function() {
        $('#formSubmit').on('click', function(e) {
            e.preventDefault();
            var $this = $(this);
            var $form = $this.closest('form');
            var action = $form.attr('action');
            $form.find('input').removeClass('is-invalid');
            $form.find('textarea').removeClass('is-invalid');
            var data = $form.serializeObject();
            $this.addClass('loadingbar primary').prop('disabled', true);
            $.post(action, data, function(result) {
                if (result && result.code === 200) {
                    showCertificateModal(result.certificate);
                } else {
                    Swal.fire({
                        icon: 'error',
                        html: '<h3 class="font-20 text-center text-dark-blue">' + certificateNotFound + '</h3>',
                        showConfirmButton: false,
                        showCancelButton: true,
                        cancelButtonText: close,
                        cancelButtonColor: '#d33',
                    });
                }
            }).fail(err => {
                var errors = err.responseJSON;
                if (errors && errors.errors) {
                    Object.keys(errors.errors).forEach((key) => {
                        var error = errors.errors[key];
                        var element = $form.find('[name="' + key + '"]');
                        element.addClass('is-invalid');
                        element.parent().find('.invalid-feedback').text(error[0]);
                    });
                }
            }).always(() => {
                $this.removeClass('loadingbar primary').prop('disabled', false);
            });
        });
    });
</script>
@endpush