@extends('layout.mainlayout')


@section('content')
    <style>
        .box-image{
            width: 0;
            height: 0;
            border-radius: 50%;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            position: absolute;
            transform: translate(-50%, -50%);
        }
        .single-box:hover{
            background: white;
            box-shadow: 0px 4px 73px rgba(0, 0, 0, 0.05);
        }
        .step-footer .cart-btn .icon{
            margin-bottom: 9px;
        }
        .single-box{
            background: rgba(250, 250, 252, 1);
            margin: 0 1rem;
            margin-bottom: 2rem;
            padding: 2.5rem 1rem 2rem;
            text-align: center;
            position: relative;
            border: 1px solid #DADADA;
        
            border-radius: 25px;
        }
        .img-box{
            border-radius: 50%;
            border: 1px solid #DADADA;
            width: 100px;
            height: 100px;
            object-fit: contain;
        }
        .single-box .company-rate {
            color: #FFC107;
            left: 0;
            margin-right: 5rem;
            margin-bottom: 0;
            text-align: left;
        }
        .btn-blazma{
            font-size: 15px;
        }
        .lab-name{
            font-family: 'sohne-bold';
            color:black;
            margin-right: 1rem;
            clear: both;
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
        }
        .price{
            margin-bottom:12px;
            font-family: 'sohne-bold';
            color:black
        }
        .right-card{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .steps .stepper{
            z-index: 10;
        }
        .filter-sec{
            background-color: #FAFAFC;
        }
        .order-summary{
            background: #FFFFFF;
            border-radius: 25px;
        }
        .single-box .location{
            text-align: left;
        }
        @media (max-width: 575.98px) {
            .btn-blazma .icon{
                margin-left: 0.7rem;
                margin-right: 0;
                transform: none;
            }
            .single-box{
                margin: 30px 0px;
            }
            .img-box{
                width:90px;
                height:90px;
            }
            .single-box .location .value{
                text-align:center;
            }
            #artificial-intelligence .btn-outline-blazma{
                border:none;
            }
            #artificial-intelligence .stepper .step:nth-child(2)::before{
                transform: translateX(-15%);
            }
            #artificial-intelligence .stepper .step:not(:first-child)::before{
                content: '';
                position: absolute;
                top: 1.15rem;
                left: 71px;
                width: 32%;
                height: 1.5px;
                background-color: rgba(218, 218, 218, 1);
                z-index: 0;
            }
        }
    </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.prices')}}</h6>
                        <h3 class="step-title-ai-patient">{{trans('web.find_your_service_provider')}}</h3>
                        <div class="step-main mt-5">
                            <div class="tests">
                                <div class="row" id="ai-results-container">
                                    <div class="col-md-12 col-lg-7">
                                        @foreach($results['HOSPITALS'] as $result)
                                        <div class="single-box col-md-12">
                                            <div class="row">
                                                <div class="col-md-3 col-lg-3">
                                                    <img class="img-box" src="{{$result->IMAGE_URL}}">
                                                </div>
                                                <div class="col-md-5 col-lg-5 company-rate-sec" @if(app('translator')->getLocale() == 'ar') style="text-align: right" @endif>
                                                    <div class="company-rate" @if(app('translator')->getLocale() == 'ar') style="margin-right: 1rem;text-align: right;" @endif>
                                                        <i class="ri-star-fill icon"></i>
                                                        <i class="ri-star-fill icon"></i>
                                                        <i class="ri-star-fill icon"></i>
                                                        <i class="ri-star-fill icon"></i>
                                                        <i class="ri-star-fill icon"></i>
                                                    </div>
                                                    <span class="lab-name">@if(app('translator')->getLocale() == 'ar') {{$result->NAME_AR}} @else {{$result->NAME_EN}} @endif</span>
                                                    <p class="location" style="display: flow-root; @if(app('translator')->getLocale() == 'ar')text-align: right" @endif">
                                                        <span class="value"><i class="ri-map-pin-line icon"></i>@if(app('translator')->getLocale() == "ar"){{$result->CITYSTATE->ARABIC_NAME}}@else{{$result->CITYSTATE->ENG_NAME}}@endif<br></span>
                                                    <span lat="{{$result->GPS_LATITUDE}}" long="{{$result->GPS_LONGITUDE}}" class="km location-info"></span>
                                                    </p>
                                                </span>

                                                </div>
                                                <div class="col-md-4 col-lg-4 right-card">
                                                    <b class="price">{{$result->TOTAL_PRICE}} SAR</b>
                                                    <a href="#" class="btn btn-blazma" style="white-space: nowrap;" lab-id="{{$result->ID}}" tests-ids="{{$results['TEST_IDS']}}">
                                                        {{trans('web.book_now')}} <span class="icon">@if(app('translator')->getLocale() == "ar") &#10229 @else &#10230;@endif</span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                    <div class="col-md-4 offset-md-1">

                                        <div class="order-summary">
                                            <div class="card-list">
                                                <div class="packages">
                                                    <div class="single-package">
                                                        <div>
                                                            <i class="fa fa-user mr-2"></i> Info: <span id="patient-info" class="ml-2"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="order-summary mt-3">
                                            <div class="card-list">
                                                <div class="packages">
                                                    @foreach($results['TESTS'] as $test)
                                                        <div class="single-package">
                                                            <div class="left-side">
                                                                <div class="package-image">
                                                                    <img style="border-radius: 20px;" src="{{$test->IMAGE_URL}}" alt="Diabetes">
                                                                </div>
                                                                <div class="package-name">
                                                                    <h6 class="tag">{{trans('web.test')}}</h6>
                                                                    <h4 class="title">@if(app('translator')->getLocale() == 'ar') {{$test->NAME_AR}} @else {{$test->NAME_EN}} @endif
                                                                    </h4>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>

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

    $('body').css('overflow', 'hidden');
    window.onload = function(e){

        $('body').css('overflow', 'auto');
        $('.wave-container').hide();

        var patientInfo = JSON.parse(localStorage.getItem('ai-details'));

        $('#patient-info').text(patientInfo.full_name+'  '+patientInfo.phone)
    }

    $(document).on('click', '.btn-blazma', function (e) {
        e.preventDefault();
        var labId = $(this).attr('lab-id');
        var testIds = $(this).attr('tests-ids');
        var patient = JSON.parse(localStorage.getItem('ai-details'));
        $.ajax({
            'url': '/ai/cart',
            'data':{
                'lab_id': labId,
                'test_ids': testIds,
                'type': 1,
                'member_id': patient.id,
                'is_member': patient.isMember
            },
            'type': 'POST',
            success: function (response) {
                localStorage.removeItem('cart-href')
                sessionStorage.reloadAfterPageLoad = true;
                localStorage.setItem('ai-cart', 1);
                window.location.href = '/'
            }
        })
    })

    /*$('#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
    })*/

</script>

@endsection