@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;
            background-color: var(--blazma-primary);
            border-color: var(--blazma-primary);
        }
        .btn-blazma:hover{
            background-color: white;
            color: black;
            border-color: var(--blazma-primary);
        }
        .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;
        }

        #artificial-intelligence .stepper .step:nth-child(2)::before{
            content: '' !important;
            position: absolute !important;
            top: 1.15rem !important;
            left: 25% !important;
            width: 75% !important;
            height: 1.5px !important;
            background-color: rgba(218, 218, 218, 1) !important;
            z-index: 0 !important;
            transform: none !important;
        }

        .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;
            }
        }
    </style>
    <main class="page-main">
        <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>
        
        <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.tests')}}</p>
                            </div>
                            <div class="step active">
                                <p class="step-num">2</p>
                                <p class="step-title"
                                   @if(!empty($profile) && $profile->EXTRA_COLOR) style="color:{{$profile->EXTRA_COLOR}}" @endif>{{trans('web.hospitals')}}</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="recommended-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="{{is_array($results['TEST_IDS']) ? implode(',', $results['TEST_IDS']) : $results['TEST_IDS']->implode(',')}}"
                                                        {{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 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="Test">
                                                                </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="javascript:history.back()" class="btn cart-btn btn-outline-blazma mb-4" >
                                <span class="icon pl-2">&#10229;</span>
                                {{trans('web.back')}}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@section('frontend_scripts')
    <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>
    $(document).on('click', '.btn-blazma', function (e) {
        e.preventDefault();
        var labId = $(this).attr('lab-id');
        var testIds = $(this).attr('tests-ids');

        // Convert comma-separated string to array of integers, then JSON stringify
        var testIdsArray = testIds.split(',').map(function(id) {
            return parseInt(id.trim());
        });

        $.ajax({
            'url': '/ai/cart',
            'data':{
                'lab_id': labId,
                'test_ids': JSON.stringify(testIdsArray),
                'type': 1,
                'member_id': null,
                'is_member': false
            },
            'type': 'POST',
            success: function (response) {
                localStorage.removeItem('cart-href')
                sessionStorage.reloadAfterPageLoad = true;
                localStorage.setItem('ai-cart', 1);
                window.location.href = '/'
            },
            error: function(xhr, status, error) {
                toastr.error('{{trans("web.booking_error")}}');
            }
        })
    })
</script>
@endsection