@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;
        }
        .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;
        }

        #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;
        }

        .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;
        }
    </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">
                                <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.select_tests')}}</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="recommended-tests-container">
                                    @foreach($tests as $test)
                                        <div class="col-sm-4 col-lg-4 clm">
                                            <div class="single-box" id="{{$test->ID}}">
                                                <div class="box-image">
                                                    <img class="image-inside-box" src="{{$test->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") 
                                                            {{$test->NAME_EN}} 
                                                        @else 
                                                            {{$test->NAME_AR}} 
                                                        @endif
                                                    </h5>
                                                    <p class="box-desc">
                                                        @if(!empty(app('translator')->getLocale()) && app('translator')->getLocale() == "en") 
                                                            {{$test->DESC_EN}} 
                                                        @else 
                                                            {{$test->DESC_AR}} 
                                                        @endif
                                                    </p>
                                                    <i class="fa fa-check-circle checked"></i>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="step-footer">
                            <a href="#" id="recommended-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/toastr/toastr.min.css">
    <script src="/bower_components/admin-lte/plugins/toastr/toastr.min.js"></script>
<script>
    var selectedTests = [];

    @foreach($tests as $test)
        selectedTests.push('{{$test->ID}}');
    @endforeach

    $(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')
            selectedTests = jQuery.grep(selectedTests, function(value) {
                return value != testId;
            });
        }
        else{
            selectedTests.push(testId);
            circleBox.addClass('checked');
        }
    })

    $(document).ready(function() {
        @if(isset($show_login_modal) && $show_login_modal)
            localStorage.setItem('recommended-tests-continue', window.location.href);
            $('#loginModal').modal('show');
        @endif

        $('#recommended-continue').off('click').on('click', function (e) {
            e.preventDefault();
            e.stopPropagation();

            @if(isset($show_login_modal) && $show_login_modal)
                localStorage.setItem('recommended-tests-continue', window.location.href);
                $('#loginModal').modal('show');
                return false;
            @endif

            if (selectedTests.length === 0){
                toastr.error('{{trans("web.select_at_least_one_test")}}');
                return false;
            }

            var url = '/recommended-tests-hospitals?tests=' + selectedTests.join(',');
            window.location.href = url;
            return false;
        });

        @if(isset($_GET['error']) && $_GET['error'] == 'no_hospitals')
            toastr.error('{{trans("web.no_hospitals_available")}}');
        @endif
    });
</script>
@endsection