@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: #E35A80 !important;
            border-radius: 25px !important;
            color: white !important;
            display: flex;
            flex-direction: column;
            justify-content: left;
            padding: 9px 16px !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;
        }
        .select2-container .select2-selection--multiple {
            background:none!important;
            box-shadow: 0px 11px 50px rgba(0, 0, 0, 0.05)!important;
            border-radius: 25px !important;
            border:none !important;
            color:rgba(124, 129, 138, 1)!important;
            margin-bottom: 50px !important;
        }
        .select2-container--default .select2-search--inline .select2-search__field{
            text-align: center !important;
            padding:0 20px !important;
        }
        .select2-selection select2-selection--multiple select2-selection--multiple--custom select2-selection--custom{
            background-color:#FAFAFC !important;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            border: 1px solid #E35A80 !important;
        }
        #artificial-intelligence .btn-outline-blazma{
            border:none;
        }
        #artificial-intelligence .btn-outline-blazma:hover{
            background:none;
            border:none;
        }
    </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">
                                <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.personal_info')}}</h6>
                        <h3 class="step-title-ai-patient">{{trans('web.lets_fill_details')}}</h3>
                        <div class="step-main mt-5">
                            <div class="row form-group justify-content-center">
                                <input type="number" class="form-control col-md-10" id="height" placeholder="{{trans('web.height')}}">
                                <input type="number" class="form-control col-md-10 mt-2" id="weight" placeholder="{{trans('web.weight')}}">
                               <!-- <div class="form-group mt-3 text-center ">
                                    <h4 class="title-ai-patient
                                    ">{{trans('web.choose_symptoms')}}</h4>
                                </div>
                                <div class="form-group text-center">
                                    <select name="hop" id="hop" multiple class="questionnaire-hop-select2" ></select>
                                </div>-->

                            </div>
                        </div>
                        <div class="step-footer">
                            <a href="/artificial-intelligence" 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>


    $('#ai-continue').on('click', function (e) {
        $('.ai-loader').fadeIn();
        e.preventDefault();
        var height = $('#height').val();
        var weight = $('#weight').val();
        var symptoms = $('.questionnaire-hop-select2').val();
        $.ajax({
           url: "/storeAIDetails",
            type: 'post',
            data:{
              'height': height,
              'weight': weight,
              'symptoms': symptoms,
              'patient': JSON.parse(localStorage.getItem('ai-details')),
            },
           success:function (response) {
            setTimeout(() => {
                window.location.href = '/artificial-intelligence?results=1'
            }, 2000);
           },
            error: function (response) {
                toastr.error(response.responseJSON.errorMessage)
            }
        });
    })

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

    $('.questionnaire-hop-select2').select2({
        /*closeOnSelect: false,*/
       
        placeholder: "{{trans('web.search_eg_headache')}}",
        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