@extends('layout.mainlayout')


@section('content')
    <style>

        .select2-container{
            width: 80% !important;
        }
        .select2-selection--single{
            height: auto !important;
        }
        .select2-selection--custom {
            border: none !important;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice{
            background: var(--blazma-primary) !important;
            border-radius: 25px !important;
            color: white !important;
            display: flex;
            flex-direction: column;
            justify-content: left;
            padding: 15px 20px !important;
            gap: 10px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
            position: absolute;
            display: contents !important;
            color: #FFFFFF !important;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__rendered
        {
            direction: rtl;
        }
    </style>
    <style>
        .fa-check-circle{
            color: white;
            position: absolute;
            left: 80%;
            top: 57%;
            border: 1px solid var(--blazma-primary);
            border-radius: 50%;
            font-size: 24px;
        }
        .fa-check-circle.checked{
            color: var(--blazma-primary) !important;
            border: unset !important;
        }
        .single-box:has(.fa-check-circle.checked){
            background:white;
        }
        #artificial-intelligence .btn-outline-blazma{
            border:none;
        }
        .single-box:hover{
            background: white;
            box-shadow: 0px 4px 73px rgba(0, 0, 0, 0.05);
        }
        .single-box{
            background: #FAFAFC;
            padding: 1rem;
            margin: 0 0.5rem;
            margin-bottom: 2rem;
            cursor: pointer;
            transition: all .5s;
            border: 1px solid #DADADA;
            border-radius: 25px;
        }
        .box-image{
            text-align-last: center;
            padding-top: 3%;
        }
        .image-inside-box{
            width: 95%;
            border-radius: 35px;
        }
        .box-tag{
            margin-top: 1rem;
        }
        .tests{
            padding: 2rem 0 3rem;
        }
        .wave-loader{
            display: flex;
            width: 250px;
            height: 350px;
            left: 43vw;
            bottom: 7vw;
            z-index: 1000000000;
            justify-content: center;
            align-items: center;
            position: fixed;
        }
        .wave{
            display: flex;
            justify-content: space-between;
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            perspective: 100px;
        }

        .wave > div{
            position: relative;
            width: 16px;
            height: 16px;
            border-radius: 100%;
        }

        .wave > div::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #aaaaaa;
            border-radius: 50%;
        }

        .top-wave > div::before {
            background-color: #ca0018;
        }

        .top-wave > div{
            animation: move 3s ease-in-out infinite reverse;

        }

        .top-wave > div::before{
            animation: grow 3s linear infinite reverse;
        }
        .bottom-wave > div{
            animation: move 3s ease-in-out infinite;
        }

        .bottom-wave > div::before{
            animation: grow 3s linear infinite;
        }

        .wave > div:nth-child(10){
            animation-delay: 0s;
        }
        .wave > div:nth-child(9){
            animation-delay: -0.1s;
        }
        .wave > div:nth-child(8){
            animation-delay: -0.2s;
        }
        .wave > div:nth-child(7){
            animation-delay: -0.3s;
        }
        .wave > div:nth-child(6){
            animation-delay: -0.4s;
        }
        .wave > div:nth-child(5){
            animation-delay: -0.5s;
        }
        .wave > div:nth-child(4){
            animation-delay: -0.6s;
        }
        .wave > div:nth-child(3){
            animation-delay: -0.7s;
        }
        .wave > div:nth-child(2){
            animation-delay: -0.8s;
        }
        .wave > div:nth-child(1){
            animation-delay: -0.9s;
        }


        .bottom-wave > div:nth-child(10){
            animation-delay: 0.75s;
        }
        .bottom-wave > div:nth-child(9){
            animation-delay: 0.65s;
        }
        .bottom-wave > div:nth-child(8){
            animation-delay: 0.55s;
        }
        .bottom-wave > div:nth-child(7){
            animation-delay: 0.45s;
        }
        .bottom-wave > div:nth-child(6){
            animation-delay: 0.35s;
        }
        .bottom-wave > div:nth-child(5){
            animation-delay: 0.25s;
        }
        .bottom-wave > div:nth-child(4){
            animation-delay: 0.15s;
        }
        .bottom-wave > div:nth-child(3){
            animation-delay: 0.05s;
        }
        .bottom-wave > div:nth-child(2){
            animation-delay: -0.05s;
        }
        .bottom-wave > div:nth-child(1){
            animation-delay: -0.15s;
        }

        @keyframes move{
            0%{
                transform: translateY(0px);
            }
            25%{
                transform: translateY(88px);
            }
            50%{
                transform: translateY(0px);
            }
            75%{
                transform: translateY(88px);
            }
            100%{
                transform: translateY(0px);
            }

        }

        @keyframes grow{
            0%, 50%, 75%, 100% {
                transform: scaleX(0.7) scaleY(0.7);
            }
            10%, 60% {
                transform: scaleX(1) scaleY(1);
            }
            35%, 85% {
                transform: scaleX(0.4) scaleY(0.4);
            }
        }
        .wave-container{
            height: 100vh;
            width: 100%;
            background: white;
            z-index: 1000000000;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
        }
    </style>
    <main class="page-main">
        <!-- Start Breadcrubms Section -->
        <section class="new-sec breadcrumbs-sec">
            <div class="container">
                <h3 class="page-title">{{$title}}</h3>
                <i class="ri-arrow-down-s-line icon"></i>
            </div>
        </section>
        <!-- End Breadcrubms Section -->
        <!-- Start Filter Section -->
        <section id="artificial-intelligence" class="new-sec filter-sec">
            <div class="container">
                <div class="sec-form">
                    <div class="steps">
                        <div class="stepper">
                            <div class="step active">
                                <p class="step-num"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="background:{{$profile->EXTRA_COLOR}}" @endif>
                                    1</p>
                                <p class="step-title"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="color:{{$profile->EXTRA_COLOR}}" @endif>{{trans('web.account')}}</p>
                            </div>
                            <div class="step active">
                                <p class="step-num"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="background:{{$profile->EXTRA_COLOR}}" @endif >
                                    2</p>
                                <p class="step-title"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="color:{{$profile->EXTRA_COLOR}}" @endif>{{trans('web.details')}}</p>
                            </div>
                            <div class="step active">
                                <p class="step-num">3</p>
                                <p class="step-title"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="color:{{$profile->EXTRA_COLOR}}" @endif>{{trans('web.results')}}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="sec-form" style="max-width: 1200px;">
                    <div class="step-content">
                        <h6 class="step-title-ai-account" style="font-size: 12px;">{{trans('web.get_results')}}</h6>
                        <h3 class="step-title-ai-patient">{{trans('web.choose_your_tests')}}</h3>
                        <div class="step-main mt-5">
                            <div class="tests">
                                <div class="row" id="ai-results-container">
                                  {{--  <div class="col-sm-4 col-lg-4 clm">
                                        <div class="single-box">
                                            <div class="box-image">
                                                <img class="image-inside-box" src=" https://s3.eu-west-1.amazonaws.com/blazma.com/assets/covid-box.png " alt="Test">
                                            </div>
                                            <div class="box-content">
                                                <h6 class="box-tag">Tests</h6>
                                                <h3 class="box-title">Covid-19  (RT-PCR) - Within 24 Hours</h3>
                                                <i class="fa fa-check-circle"></i>
                                            </div>
                                        </div>
                                    </div>--}}

                                </div>
                            </div>
                        </div>
                        <div class="step-footer">
                            <a href="/artificial-intelligence?details=1" class="btn cart-btn btn-outline-blazma mb-4" >
                                <span class="icon pl-2">&#10229;</span>
                                {{trans('web.back')}}
                            </a>
                            <a href="#" id="ai-continue"
                               @if(!empty($profile) && $profile->COLOR) style="background:{{$profile->COLOR}}"
                               @endif class="btn continue-btn">
                                <span>{{trans('web.continue')}}</span>
                                <span class="icon pl-2">&#10230;</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@section('frontend_scripts')
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/select2/css/select2.min.css">
    <script src="/bower_components/admin-lte/plugins/select2/js/select2.min.js"></script>
    <script src="/bower_components/admin-lte/plugins/select2/js/select2.customSelectionAdapter.min.js"></script>
    <link rel="stylesheet" href="/bower_components/admin-lte/plugins/toastr/toastr.min.css">
    <script src="/bower_components/admin-lte/plugins/toastr/toastr.min.js"></script>
<script>
    var aiTests = [];
    $('body').css('overflow', 'hidden');
    window.onload = function(e){
        var selectedPatient = JSON.parse(localStorage.getItem('ai-details'));
       $.ajax({
           url: "ai/tests/similar",
           data:{
               "Nationality": selectedPatient.nationality,
               "Gender": selectedPatient.gender,
               "Age": selectedPatient.age,
           },
           success:function (data) {
               if (data.response.hasOwnProperty('message')) {
                   toastr.error(data.response.message);
               }else {
                   $.each( data.response, function( key, object ) {
                       aiTests.push(object.test_id);
                       $('#ai-results-container').append('<div class="col-sm-4 col-lg-4 clmm"><div class="single-box" id="'+object.test_id+'"><div class="box-image">' +
                           '<img class="image-inside-box" src="'+object.image_url+'" alt="Test"></div>' +
                           '<div class="box-content"><h6 class="box-tag">{{trans('web.tests')}}</h6>' +
                           '<h5 class="box-title" style="min-height:0">'+@if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "en") object.name_en @else object.name_ar @endif +'</h5><p class="box-desc">'+@if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "en") object.desc_en @else object.desc_ar @endif +'</p><i class="fa fa-check-circle checked"></i></div></div></div>')
                   });

               }
               $('body').css('overflow', 'auto');
               $('.wave-container').hide();
           },
           error: function (response) {
               toastr.error(response.responseJSON.errorMessage);
               $('#ai-results-container').css('place-content', 'center')
               $('#ai-results-container').append('<h3 style="color: red">{{trans('web.no_tests_was_found')}}</h3>');
               $('body').css('overflow', 'auto');
               $('.wave-container').hide();
               $('#ai-continue').hide();
           }
       })
    }


    $(document).on('click', '.single-box', function (e) {
        var circleBox = $(this).find('.fa-check-circle');
        var testId = $(this).attr('id');
        if (circleBox.hasClass('checked')){
            circleBox.removeClass('checked')
            aiTests = jQuery.grep(aiTests, function(value) {
                return value != testId;
            });
        }
        else{
            aiTests.push(testId);
            circleBox.addClass('checked');
        }
        {{--@if(!empty($profile) && $profile->COLOR)
        $(this).find('.fa-check-circle').append('<i class="fa fa-check-circle" style="color: {{$profile->EXTRA_COLOR}}"></i>')
        @else
        $(this).find('.fa-check-circle').append('<i class="fa fa-check-circle"></i>')
        @endif--}}

    })

    $('#ai-continue').on('click', function (e) {
        e.preventDefault();
        if (aiTests.length === 0){
            toastr.error('Select at least on test');
            return;
        }
        window.location.href = '/artificial-intelligence-results?tests='+aiTests
    })

    var CustomSelectionAdapter = $.fn.select2.amd.require("select2/selection/customSelectionAdapter");

    $('.questionnaire-hop-select2').select2({
        /*closeOnSelect: false,*/
        selectionAdapter: CustomSelectionAdapter,
        ajax: {
            url: 'https://hpo.jax.org/api/hpo/search',
            dataType: 'json',
            processResults: function (data) {
                return {
                    results: $.map(data.terms, function (item) {
                        return {
                            text: item.name,
                            id: item.name,
                        }
                    })
                };
            },
        },
    });
</script>

@endsection