@component('home.layouts.component', ['title' => 'صفحه اصلی'])

    @slot('style')
    @endslot

    @slot('content_top')
        <div class="container-fluid">
            <div class="row">
                <div class="header-container">
                    <!--discount-->
                    <div class="col-xl-6 col-lg-6 col-md-12 order-lg-0 order-md-1 order-sm-1 order-1 discounts-holder">
                        <div class="discounts d-md-block d-sm-none d-none">
                            <div class="back-img"></div>
                            <!--second form for test-->
                            <div class="discount-title d-flex align-items-center justify-content-center text-dark-blue">
                                <span>تخفیف های ویژه بهار و تابستان</span>
                            </div>
                            <hr>
                            <div class="discount-box">
                                <div class="discount-item  text-purple">
                                    <span class="headtext">تخفیف ۵۰ درصدی</span>
                                    <span class="discount-amount">تا سقف ۱۰۰ میلیون ریال</span>
                                    <span class="discount-details"> ویژه اعضای هیئت علمی جوان </span>
                                </div>
                                <hr>
                                <div class="discount-item   text-purple">
                                    <span class="headtext">تخفیف ۵۰ درصدی</span>
                                    <span class="discount-amount">تا سقف ۴۰ میلیون ریال</span>
                                    <span class="discount-details">ویژه دانشجویان کارشناسی ارشد، دکتری و پسا دکتری</span>
                                </div>
                                <hr>
                                <div class="discount-item text-purple">
                                    <span class="headtext">تخفیف ۲۰ درصدی</span>
                                    <span class="discount-amount">تا سقف ۵ میلیون ریال</span>
                                    <span class="discount-details">ویژه اعضای جدید باشگاه مشتریان</span>
                                </div>
                            </div>
                            <hr>
                            <div class="text-center">
                                <a class=" btn btn-secondary text-light" href="{{ route('news.user_show', 'طرحهای-تخفیف-ویژه-بهار-و-تابستان-۱۴۰۰') }}"> کسب اطلاعات بیشتر</a>
                            </div>
                        </div>
                    </div>
                    <!--search part-->
                    <div class="col-xl-6 col-lg-6 col-md-12 order-lg-1 order-md-0 order-sm-0 order-0">
                        <div class="header-container-right">
                            <div class="w-100">
                                <div class="searchbox">
                                    <div class="searchbox-text">
                                        <h1 class="mb-4 text-white">سامانه جامع خدمات آنالیز صنعتی و آزمایشگاهی</h1>
                                    </div>
                                    <div class="d-flex justify-content-around" style="max-width: 100%">
                                        <div class="h-100 w-100">
                                            <div class="d-flex justify-content-center h-100">
                                                <form action="" class="mt-2 form-input-search">
                                                    <div class="input-search-holder">
                                                        <i class="fa fa-search"></i>
                                                        <input type="text" id="input-search">
                                                    </div>
                                                    <div class="result-search-holder">
                                                        <ul id="result-search" class="list-group result-search" style="display: none;">
                                                            <li class="list-group-item-search" style="border-bottom: none !important;">
                                                                <span>
                                                                    برای شروع جستجو حداقل سه کاراکتر وارد نمایید.
                                                                </span>
                                                            </li>
                                                            <li class="list-group-item-search" style="display: none;">
                                                                <span>
                                                                    در حال جستجو ...
                                                                </span>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="searchbar-icons">
                                                <a href="{{route('service.user_show',['slug' => 'تحلیل-و-تفسیر-نتایج-آنالیز-رامان-raman'])}}">RAMAN</a>
                                                <a href="{{route('service.user_show',['slug' => 'ftir'])}}">FTIR</a>
                                                <a href="{{route('service.user_show',['slug' => 'آنالیز-hr-tem'])}}">HR-TEM</a>
                                                <a href="{{route('service.user_show',['slug' => 'آنالیز-tem'])}}">TEM</a>
                                                <a href="{{route('service.user_show',['slug' => 'آنالیز-sem'])}}">SEM</a>
                                                <a href="{{route('service.user_show',['slug' => 'آنالیز-xrf'])}}">XRF</a>
                                                <a href="{{route('service.user_show',['slug' => 'خدمات-پراش-اشعه-ایکس'])}}">XRD</a>
                                                <a href="{{route('service.user_index')}}">سایر</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endslot

    @slot('content')
        <div class="container-fluid">
            <!--service description-->
            <div class="container-service">
                <div class="services-holder">
                    <div class="main-slider">
                        <div class="main-slider-image">
                            <div class="slider">
                                <div class="owl2 owl-carousel owl-theme">
                                    <div class="item">
                                        <img src="{{ asset('images/home/slider/4-new.jpg') }}" class="img-fluid" alt='جذب نمایندگان فعال مهامکس'>
                                        <div>
                                            <h2>جذب نمایندگان فعال در شهرستان‌ها</h2>
                                            <p>به یک کسب و کار آنلاین و هوشمندانه بپیوندید</p>
                                            <a class="btn btn-lg btn-outline-light float-left btn-slider" href="{{ route('static.agency-confer') }}">
                                                دریافت فرم همکاری
                                            </a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="{{ asset('images/home/slider/14-new.jpg') }}" class="img-fluid" alt="دوره های آموزشی تخصصی آنالیز">
                                        <div>
                                            <h2 class="text-danger">برگزاری دوره‌های آموزشی تخصصی آنالیز</h2>
                                            <p class="text-danger">خودتان نتایج را تحلیل کنید.</p>
                                            <a class="btn btn-lg btn-danger float-left btn-slider" href="">مشاهده دوره‌ها...</a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="{{ asset('images/home/slider/10-new.jpg') }}" class="img-fluid" alt='مشاوره و ارائه راهکار صنعتی'>
                                        <div>
                                            <h2 class="text-danger">مشاوره تخصصی و ارائه راهکارهای صنعتی</h2>
                                            <p class="text-danger">کنترل کیفیت آنلاین</p>
                                            <a class="btn btn-lg btn-danger float-left btn-slider" href="">
                                                مشاهده دوره‌ها...
                                            </a>
                                        </div>
                                    </div>
                                    <div class="item">
                                        <img src="{{ asset('images/home/slider/spring-summer-slider.png') }}" class="img-fluid" alt='تخفیف های مهامکس وِیژه بهار و تابستان ۱۴۰۰'>
                                        <div class="">
                                            <h2 class="text-white bg-secondary">تخفیف‌های ویژه بهار و تابستان مهامکس</h2>
                                            <p class="text-white bg-secondary">آنالیزهای خود را بدون تخفیف انجام ندهید</p>
                                            <a class="btn btn-lg btn-outline-secondary float-left btn-slider" href="{{ route('news.user_show', 'طرحهای-تخفیف-ویژه-بهار-و-تابستان-۱۴۰۰') }}">
                                                مشاهده تخفیف‌ها
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="side-slider">
                        <div class="side-slider-image">
                            <img src="{{ asset('images/home/service/pic-service-1.jpg') }}" class="img-fluid">
                        </div>
                        <div class="side-slider-image">
                            <img src="{{ asset('images/home/service/pic-service-2.jpg') }}" class="img-fluid">
                        </div>
                    </div>
                </div>
            </div>
            <!--End of service description-->

            <!-- start of steps of our service-->
            <div class="row">
                <div class="col-lg-12 p-0">
                    <div class="position-relative steps-container text-center">
                        <div class="columns w-100">
                            <h2>خدمات در مهامکس به آسانی</h2>
                        </div>
                        <div class="row step-equipment" dir="rtl">
                            <div class="line show-for-medium-up"></div>
                            <div class="columns medium-4 text-center">
                                <div class="box-icon">
                                    <span class="icon-person-add"></span>
                                    <span class="arrow icon-arrow-left show-for-medium-up"></span>
                                </div>
                                <h4 class="box-title">۱. اطلاعات نمونه را وارد کن.</h4>
                                <p class="box-text">بر روی دکمه نارنجی <a href="" target="_blank">ثبت نام و ساخت درگاه</a> در بالای صفحه، کلیک کنید. پس از وارد کردن شماره موبایل با شما تماس گرفته شده و کد تایید به صورت صوتی برای شما خوانده می شود.</p>
                            </div>
                            <div class="columns medium-4 text-center">
                                <div class="box-icon">
                                    <span class="icon-truck"></span>
                                    <span class="arrow icon-arrow-left show-for-medium-up"></span>
                                </div>
                                <h4 class="box-title">۲. نمونه را ارسال کن.</h4>
                                <p class="box-text">بعد از تایید شماره موبایلتان، اطلاعات فردی خود را کامل نموده و با وارد کردن شماره شبا و شماره حسابتان ثبت نام خود را تکمیل نمایید.</p>
                            </div>
                            <div class="columns medium-4 text-center">
                                <div class="box-icon">
                                    <span class="delivery-results"></span>
                                </div>
                                <h4 class="box-title">۳. نتیجه را تحویل بگیر.</h4>
                                <p class="box-text">حالا درگاه پرداخت شخصی شما آماده است و با ارسال لینک آیدی پی خود به دیگران میتوانید پول دریافت کنید :)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End of steps of our service-->

            <!-- start of the latest services sample 2-->
            <div class="row">
                <div class="container-sample-2 latest-analysis-services">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-2 px-0 vertical-margin-center">
                                <div class="container-sample-2-title text-center">
                                    <h3 class="">
                                        <span class="title">جدیدترین خدمات</span>
                                        <span class="subtitle">مهامکس</span>
                                    </h3>
                                    <img class='d-none d-md-none d-lg-block m-auto' src="{{ asset('images/home/icons/5.png') }}" class="text-center m-auto" width="150px">
                                </div>
                            </div>
                            <div class="col-lg-10 px-0">
                                <div class="owl-carousel owl-theme owl-popular">
                                    @foreach($services as $service)
                                        <div class="p-3">
                                            @component('components.cards.service-card', [
                                                'imageLink'     =>  route('service.user_show', [ 'slug' => $service->slug ]),
                                                'imageSource'   =>  $service->getMedia('featured_image')->count() > 0 ? $service->getMedia('featured_image')->first()->getUrl() : '',
                                                'imageAlt'      =>  $service->getMedia('featured_image')->count() > 0 ? $service->getMedia('featured_image')->first()->caption : '',
                                                'captionText'   =>  mb_strimwidth($service->title, 0, 50, '...'),
                                                'captionLink'   =>  route('service.user_show', [ 'slug' => $service->slug]),
                                                'buttonClass'   =>  'btn-outline-primary',
                                                'buttonText'    =>  'ثبت درخواست',
                                                'buttonLink'    =>  route('service.user_show', [ 'slug' => $service->slug ])
                                            ])
                                            @endcomponent
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of the latest services sample 2-->

            <!--mahamax analysis devices-->
            <div class="row">
                <div class="col-12 p-0">
                    <div class="analysis_devices_container text-center">
                        <div class="title">
                            <h2>خدمات آنالیز و شناسایی مواد شیمیایی مهامکس</h2>
                        </div>
                        <div class="analysis_devices-content">
                            <div class="columns medium-4">
                                <div class="text-center mb-item">
                                    <div class="box-icon">
                                        <span class="icon-transform"></span>
                                    </div>
                                    <h4 class="box-title">مشاوره فرد به فرد</h4>
                                    <p class="box-text">شماره کارت، شماره حساب و شماره شبا حساب بانکی تان را در هر بانکی تبدیل به یک آیدی کوتاه کنید.</p>
                                </div>
                                <div class="text-center mb-item">
                                    <div class="box-icon">
                                        <span class="icon-transit"></span>
                                    </div>
                                    <h4 class="box-title">بیش از 100 دستگاه آنالیز</h4>
                                    <p class="box-text">شماره کارت، شماره حساب و شماره شبا حساب بانکی تان را در هر بانکی تبدیل به یک آیدی کوتاه کنید.</p>
                                </div>
                            </div>
                            <div class="columns medium-4 show-for-medium-up text-center img-content">
                                <div>
                                    <img src="{{ asset('images/home/service/64683-5.png') }}" alt="صفحه داشبورد آیدی پی">
                                </div>
                            </div>
                            <div class="columns medium-4">
                                <div class="text-center mb-item">
                                    <div class="box-icon">
                                        <span class="icon-add_shopping_cart"></span>
                                    </div>
                                    <h4 class="box-title">دریافت سریع نتایج</h4>
                                    <p class="box-text">شماره کارت، شماره حساب و شماره شبا حساب بانکی تان را در هر بانکی تبدیل به یک آیدی کوتاه کنید.</p>
                                </div>
                                <div class="text-center">
                                    <div class="box-icon">
                                        <span class="icon-link"></span>
                                    </div>
                                    <h4 class="box-title">98% میزان رضایت</h4>
                                    <p class="box-text">شماره کارت، شماره حساب و شماره شبا حساب بانکی تان را در هر بانکی تبدیل به یک آیدی کوتاه کنید.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--End of mahamax analysis devices-->

            <!-- Popular services -->
            <div class="row">
                <div class="container-sample-2 latest-analysis-services">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-lg-10 order-lg-0 order-md-1 order-sm-1 order-1">
                                <div class="owl-carousel owl-theme owl-popular">
                                    @foreach( $favorites as $favorite )
                                        <div class="p-3">
                                            @component('components.cards.service-card', [
                                                'imageLink'     =>  route('service.user_show', ['slug' => $favorite->slug]),
                                                'imageSource'   =>  $favorite->getMedia('featured_image')->count() > 0 ? $favorite->getMedia('featured_image')->first()->getUrl() : '',
                                                'imageAlt'      =>  $favorite->getMedia('featured_image')->count() > 0 ? $favorite->getMedia('featured_image')->first()->caption : '',
                                                'captionText'   =>  mb_strimwidth($favorite->title, 0, 50, '...'),
                                                'captionLink'   =>  route('service.user_show', ['slug' => $favorite->slug]),
                                                'buttonClass'   =>  'btn-outline-primary',
                                                'buttonText'    =>  'ثبت درخواست',
                                                'buttonLink'    =>  route('service.user_show', ['slug' => $favorite->slug])
                                            ])
                                            @endcomponent
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-lg-2 vertical-margin-center order-lg-1 order-md-0 order-sm-0 order-0">
                                <div class="container-sample-2-title text-center">
                                    <h4 class="">محبوب‌ترین خدمات</h4>
                                    <h3 class="">مهامکس</h3>
                                    <img class='d-none d-md-none d-lg-block m-auto' src="{{ asset('images/home/icons/5.png') }}" class="text-center m-auto" width="150px">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of Popular services -->

            <!-- video -->
            <div class="row">
                <div class="video-part-container bg-light-gray">
                    <div class="col-12 mr-0 ml-0">
                        <div class="video-part-title">
                            <div>
                                <h5>ویدیوهای آموزشی</h5>
                                <small>ویدیوهای آموزشی اختصاصی مهامکس</small>
                            </div>
                            <div class="video-part-title-btn">
                                <a href="{{ route('videos.user_index') }}" class="btn btn-sm btn-primary text-light">
                                    مشاهده همه ویدیوها
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="videos mt-5">
                        @foreach($videos as $video)
                            <div class="col-lg-4 col-sm-6 col-12 mb-2">
                                @component('components.cards.article-card', [
                                        'imageCover'    =>  true,
                                        'imageSource'   =>  $video->getMedia('featured_image')->count() > 0 ? $video->getMedia('featured_image')->first()->getUrl() : '',
                                        'imageAlt'      =>  $video->getMedia('featured_image')->count() > 0 ? $video->getMedia('featured_image')->first()->caption : '',
                                        'videoLink'     =>  $video->getMedia('video')->count() > 0 ? $video->getMedia('video')->first()->getUrl() : '',
                                        'captionLink'   =>  route('video.user_show', ['slug' => $video->slug]),
                                        'captionText'   =>  $video->title,
                                        'leadLink'      =>  route('video.user_show', [ 'slug' => $video->slug]),
                                        'leadText'      =>  $video->lead,
                                        'publishedAt'   =>  digitsToEastern(jdate($video->published_at)->format('%d %B %Y')) ?? '',
                                        'buttonText'    =>  'مشاهده',
                                        'buttonLink'    =>  route('video.user_show', ['slug' => $video->slug])
                                    ])
                                @endcomponent
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <!-- End of video section -->

            <!--tabs-->
            <div class="row bg-white position-relative">
                <div class="col-12 pt-5  pb-3 ">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#articles" role="tab" aria-controls="home" aria-selected="true">مقاله‌ها</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-toggle="tab" href="#news" role="tab" aria-controls="profile" aria-selected="false">اخبار</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!--tab contents-->
            <div class="bg-white position-relative">
                <div class="pt-2">
                    <div class="tab-content" id="myTabContent">
                        <!--article content-->
                        <div class="tab-pane fade show active" id="articles" role="tabpanel" aria-labelledby="home-tab">
                            <div class="article-news-tab-show-lg">
                                <div class="articles">
                                    <div class="row mx-0">
                                        @foreach($articles as $article)
                                            <div class="col-lg-3 col-md-6 mb-4">
                                                @component('components.cards.article-card', [
                                                    'imageLink'     =>   route('article.user_show', ['slug' => $article->slug]),
                                                    'imageSource'   =>   $article->getMedia('featured_image')->count() > 0 ? $article->getMedia('featured_image')->first()->getUrl() : '',
                                                    'imageAlt'      =>   $article->getMedia('featured_image')->count() > 0 ? $article->getMedia('featured_image')->first()->caption : '',
                                                    'captionLink'   =>   route('article.user_show', ['slug' => $article->slug]),
                                                    'captionText'   =>   $article->title,
                                                    'leadLink'      =>   route('article.user_show', ['slug' => $article->slug]),
                                                    'leadText'      =>   $article->lead,
                                                    'publishedAt'   =>   digitsToEastern(jdate($article->pubishede_at)->format('%d %B %Y')) ?? '',
                                                    'buttonText'    =>   'مشاهده',
                                                    'buttonLink'    =>   route('article.user_show', ['slug' => $article->slug])
                                                ])
                                                @endcomponent
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="p-3 bg-white article-news-tab-show-md">
                                <div class="owl-carousel owl-theme owl-article-news-tabs">
                                    @foreach($articles as $article)
                                        <div class="m-1">
                                            @component('components.cards.article-card', [
                                                'imageLink'     =>   route('article.user_show', ['slug' => $article->slug]),
                                                'imageSource'   =>   $article->getMedia('featured_image')->count() > 0 ? $article->getMedia('featured_image')->first()->getUrl() : '',
                                                'imageAlt'      =>   $article->getMedia('featured_image')->count() > 0 ? $article->getMedia('featured_image')->first()->caption : '',
                                                'captionLink'   =>   route('article.user_show', ['slug' => $article->slug]),
                                                'captionText'   =>   $article->title,
                                                'leadLink'      =>   route('article.user_show', ['slug' => $article->slug]),
                                                'leadText'      =>   $article->lead,
                                                'publishedAt'   =>   digitsToEastern(jdate($article->pubishede_at)->format('%d %B %Y')) ?? '',
                                                'buttonText'    =>   'مشاهده',
                                                'buttonLink'    =>   route('article.user_show', ['slug' => $article->slug])
                                            ])
                                            @endcomponent
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="mt-3 text-center">
                                <a href="#" class="btn text-light btn-primary btn-sm"> مشاهده همه مقالات</a>
                            </div>
                        </div>

                        <!--news content-->
                        <div class="tab-pane fade" id="news" role="tabpanel" aria-labelledby="profile-tab">
                            <div class="article-news-tab-show-lg">
                                <div class="articles">
                                    <div class="row mx-0">
                                        @foreach($news as $new)
                                            <div class="col-xl-3 col-md-6 mb-2">
                                                @component('components.cards.news-card', [
                                                    'captionText'   =>  $new->title,
                                                    'publishedAt'   =>  digitsToEastern(jdate($new->published_at)->format('%d %B %Y')) ?? '',
                                                    'leadText'      =>  $new->lead,
                                                    'buttonLink'    =>  route('news.user_show', ['slug' => $new->slug]),
                                                    'buttonText'    =>  'ادامه مطلب'
                                                ])
                                                @endcomponent
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            <div class="p-3 bg-white article-news-tab-show-md">
                                <div class="owl-carousel owl-theme owl-article-news-tabs">
                                    @foreach($news as $new)
                                        <div class="m-1">
                                            @component('components.cards.news-card', [
                                                'captionText'   =>  $new->title,
                                                'publishedAt'   =>  digitsToEastern(jdate($new->published_at)->format('%d %B %Y')) ?? '',
                                                'leadText'      =>  $new->lead,
                                                'buttonLink'    =>  route('news.user_show', ['slug' => $new->slug]),
                                                'buttonText'    =>  'ادامه مطلب'
                                            ])
                                            @endcomponent
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="mt-3 text-center">
                                <a href="#" class="btn text-light btn-primary btn-sm">مشاهده همه اخبار</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of tab contents-->
        </div>
    @endslot

    @slot('script')
        <script>
            <!-- show carousel article and mews when size less than 1200px -->
            $('.owl-article-news-tabs').owlCarousel({
                margin: 10,
                loop: true,
                rtl: true,
                dots: false,
                nav: false,
                responsiveClass:true,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:2
                    },
                    1000:{
                        items:3
                    }
                }
            });

            // form-input-search
            let parentResult = $('#result-search');
            let parentInputResult = $('.form-input-search');

            $('#input-search').keyup(function(){
                let lengthInput = $(this).val().length;
                if (lengthInput === 0 ) {
                    parentResult.hide();
                }
                if (lengthInput > 0 && lengthInput < 3) {
                    parentResult.show();
                    parentResult.find('li').eq(0).show();
                    parentResult.find('li').not(":eq(0)").hide();
                    parentResult.removeClass('scroll-result-search');
                }
                else {
                    parentResult.find('li').eq(0).hide();
                    parentResult.find('li').eq(1).show();
                    setTimeout(function() {
                        parentResult.find('li').eq(1).hide();
                    }, 1000);
                    parentResult.addClass('scroll-result-search');
                    let products = [{
                        "title": "خدمات fesem",
                        "link": "https://www.google.com"
                    }, {
                        "title": "خدمات sem",
                        "link": "https://mahamax.com/"
                    } , {
                        "title": "خدمات طراحی معماری",
                        "link": "https://mahamax.com/"
                    },
                    {
                        "title": "خدمات fdr",
                        "link": "https://www.google.com"
                    }, {
                        "title": "خدمات xrf",
                        "link": "https://mahamax.com/"
                    } ,
                    {
                        "title": "خدمات xrd",
                        "link": "https://www.google.com"
                    }, {
                        "title": "خدمات raman",
                        "link": "https://mahamax.com/"
                    } ,
                    {
                        "title": "خدمات HR-tem",
                        "link": "https://www.google.com"
                    }, {
                        "title": "خدمات TEM",
                        "link": "https://mahamax.com/"
                    } ,
                    {
                        "title": "خدمات FTIR",
                        "link": "https://www.google.com"
                    }, {
                        "title": "خدمات DLS",
                        "link": "https://mahamax.com/"
                    } ,
                    {
                        "title": "خدمات GPC",
                        "link": "https://www.google.com"
                    }, {
                        "title": "خدمات XPMA",
                        "link": "https://mahamax.com/"
                    } ,
                    {
                        "title": "خدمات DPPH",
                        "link": "https://www.google.com"
                    }, {
                        "title": "خدمات sem1",
                        "link": "https://mahamax.com/"
                    } ,
                    {
                        "title": "خدمات fesem2",
                        "link": "https://www.google.com"
                    }, {
                        "title": "خدمات sem5",
                        "link": "https://mahamax.com/"
                    } ];

                    let x = '';
                    $('.item-search').remove();
                    for (let i=0; i<products.length; i++) {
                        x = `
                            <li class='list-group-item-search item-search'>
                                <a href='${products[i].link}'></a>
                                <span>
                                    ${products[i].title}
                                </span>
                            </li>
                        `;

                        parentResult.append(x);
                    }
                }
            });
        </script>
    @endslot

@endcomponent
