@extends('web.layouts.app')

@section('title', __('services.seo_title') . " - " . $pageTitle)
@section('keywords', __('homepage.keywords'))
@section('description', __('homepage.description'))

@section('wrapper-class', 'wp-page page-index')

@section('services_active', 'active')
@section($view . '_active', 'sub_active')

@section('extended_head')
  @if (env('APP_ENV') == 'prod')
    @include('web.component.script.google_conversion')
  @endif
  
  {!! NoCaptcha::renderJs() !!}

  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css"/>
@endsection

@section('content')
@include('web.home.header_home')
<section class="banner-sw">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <h1 class="banner-sw-heading text-uppercase mb-4 wow fadeInUp">{{ __($view . '.title_detail') }}</h1>
            </div>
        </div>
    </div>
</section>
<main class="main my-auto">
    <div class="sections py-5 py-md-5">
        <div class="container">
            <div class="row">

                <div class="col-md-6 order-md-1">
                    <div class="contact-img mb-4 mb-lg-0 pr-md-2 wow fadeInRight" data-wow-delay=".3s">
                        <img src="{{ asset('web') }}/images/our-services/{!! __($view . '.img_detail') !!}" alt="">
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="about-block wow fadeInLeft">
                        <h4 class="mb-md-3 text-uppercase text-primary">{{ __($view . '.heading') }}</h4>

                        <div>
                            <p class="f-14 mb-5 text-justify">
                                <strong>
                                    {{ __($view . '.text_lead') }}
                                </strong>
                            </p>
                            
                            <p class="f-14 text-justify">
                                {!! __($view . '.content') !!}
                            </p>
                        </div>
                        @if ($view == "custom_development_software")
                        <div class="row">
                            <div class="col-md-6 col-6 mt-md-5">
                                <div class="mb-4 mb-lg-0 text-center wow fadeInLeft" data-wow-delay=".3s">
                                    <img src="{{ asset('web') }}/images/our-services/logo-financia.png" width="200"
                                        alt="">
                                </div>
                            </div>

                            <div class="col-md-6 col-6 mt-md-5">
                                <div class="mb-4 mb-lg-0 text-center wow fadeInLeft" data-wow-delay=".3s">
                                    <img src="{{ asset('web') }}/images/our-services/logo-pos.png" width="200" alt="">
                                </div>
                            </div>

                            <div class="col-md-6 col-6 mt-md-5">
                                <div class="mb-4 mb-lg-0 text-center wow fadeInLeft" data-wow-delay=".3s">
                                    <img src="{{ asset('web') }}/images/our-services/logo-eduniversal.png" width="180"
                                        alt="">
                                </div>
                            </div>

                            <div class="col-md-6 col-6 mt-md-5">
                                <div class="mb-4 mb-lg-0 text-center wow fadeInLeft" data-wow-delay=".3s">
                                    <img src="{{ asset('web') }}/images/our-services/logo-crm.png" width="150" alt="">
                                </div>
                            </div>

                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@include('web.layouts.footer')
@endsection

@section('modals')
    @include('web.component.modal.request_price_modal')

    @include('web.component.modal.contact_flo_modal')

    @include('web.component.modal.thank_you_modal')

    @include('web.component.modal.info_modal')

    <button class="btn btn-contact">
      <img src="{{ asset('web/images/seo/avatar.png') }}" width="44">
    </button>
@endsection

@push('scripts')
    @include('web.component.script.linkedin_conversion')

    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.performance-carousel').slick({
          slidesToShow: 1,
          dots:true,
          arrows: false,
          autoplay: true,
        });
      });

    $(function () {
        var b = "fadeInLeft";
        var c;
        var a;
        d($("#v-pills-tab a"), $("#v-pills-tabContent"));

        function d(e, f, g) {
            e.click(function (i) {
                i.preventDefault();
                $(this).tab("show");
                var h = $(this).data("easein");
                if (c) {
                    c.removeClass(a);
                }
                if (h) {
                    f.find("div.active").addClass("animated " + h);
                    a = h;
                } else {
                    if (g) {
                        f.find("div.active").addClass("animated " + g);
                        a = g;
                    } else {
                        f.find("div.active").addClass("animated " + b);
                        a = b;
                    }
                }
                c = f.find("div.active");
            });
        }
    });
</script>
@endpush