@php
  $basePrice = 90;
  $additionalPrice = 300;
  $exchangeRate = 1;
  $currency = '$';

  $currentLocale = \Config::get('app.locale');

  // switch ($currentLocale) {
  //   case 'en':
  //   default:
  //     $exchangeRate = 1.12;
  //     $currency = '$';
  //     break;
  //   case 'vi':
  //     $exchangeRate = 26000;
  //     $currency = __('VND');
  //     break;
  //   case 'fr':
  //     $exchangeRate = 1;
  //     $currency = '€';
  //     break;
  // }

  $starterPriceMonthly = $basePrice * $exchangeRate;
  $starterAdditionalPrice = 300 * $exchangeRate;

  $advancedPriceMonthly = ($basePrice + 100) * $exchangeRate;
  $advancedAdditionalPrice = 600 * $exchangeRate;

  $premiumPriceMonthly = ($basePrice + 200) * $exchangeRate;
  $premiumAdditionalPrice = 900 * $exchangeRate;
@endphp

<section class="pricing" id="pricingTable">
    <div class="container">
      <div class="row">
        <div class="col-md-4 pr-0">

        </div>
        <div class="col-md-8">
          <div class="pricing-top mb-0">
            <h3 class="mb-0">{{ __("Tarifs")}}</h3>
          </div>
          <p class="font-size-15" style="font-weight: bold; font-style: italic; color: #6d6d6d;">{{ __("Facturé par an") }}</p>

        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 pr-0 desktop">
          <ul class="cd-pricing-list cd-pricing-list-first">
            <li>
              <ul class="cd-pricing-wrapper">
                <li>
                  <header class="cd-pricing-header">

                  </header>
                  <div class="cd-pricing-body">
                    <ul class="cd-pricing-services list-tick">
                      <li><a href="#audit-tab1">{{ __("Audit de site web")}}</a></li>
                      <li><a href="#audit-tab2">{{ __("Suivi du positionnement de mots clés") }} (SERP)</a></li>
                      <li><a href="#audit-tab2">{{ __("Analyse et suivi des concurrents")}}</a></li>
                      <li><a href="#audit-tab3">{{ __("Page SEO contrôleur")}}</a></li>
                      <li><a href="#audit-tab4">{{ __("Audit des backlinks")}}</a></li>
                      <li><a href="#audit-tab5">{{ __("Suggestion de création de lien")}}</a></li>
                      <li><a href="#audit-tab6">{{ __("Surveillance de votre marque")}}</a></li>
                      <li><a href="#audit-tab7">{{ __("Conseil & Accompagnement")}}</a></li>
                    </ul>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="col-lg-8 pl-0 pr-0">
          <div class="cd-pricing-container">
            <ul class="cd-pricing-list cd-bounce-invert">
              <li>
                <ul class="cd-pricing-wrapper">
                  <li data-type="monthly" class="is-visible">
                    <header class="cd-pricing-header">
                      <h2>Starter </h2>
                      <div class="cd-price">
                        <span class="cd-value">
                          <span for="base_price">{{ format_price($starterPriceMonthly) }}</span>
                          <span for="full_price" style="display: none;">{{ format_price($starterPriceMonthly + $starterAdditionalPrice) }}</span>
                        </span>
                        <span class="cd-currency">{{ $currency }}</span>
                        <span class="cd-duration">{{ __("mois")}}</span>
                      </div>
                    </header>
                    <div class="cd-pricing-body">
                      <ul class="cd-pricing-services">
                        <li class="mobile"><a href="#audit-tab1">{{ __("Audit de site web")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab2">{{ __("Suivi du positionnement de mots clés") }} (SERP)</a></li>
                        <li>30 {{ __("mots clés")}}</li>
                        <li class="mobile"><a href="#audit-tab2">{{ __("Analyse et suivi des concurrents")}}</a></li>
                        <li>1 {{ __("concurrent")}}</li>
                        <li class="mobile"><a href="#audit-tab3">{{ __("Page SEO contrôleur")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab4">{{ __("Audit des backlinks")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                         <li class="mobile"><a href="#audit-tab5">{{ __("Suggestion de création de lien")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab6">{{ __("Surveillance de votre marque")}}</a></li>
                        <li>1 {{ __("mots clés")}}</li>
                        <li class="mobile"><a href="#audit-tab7">{{ __("Conseil & Accompagnement")}}</a></li>
                        <li class="box-check">
                          <input type="checkbox" id="additional-price-1" name="" value="{{ $starterAdditionalPrice }}">
                          <label for="additional-price-1" class="font-size-14"><strong>{{ format_price($starterAdditionalPrice) }}</strong> {{ $currency }}</label></li>
                      </ul>
                    </div>
                    <footer class="cd-pricing-footer">
                      <a href="javascript:void(0)" class="btn btn-primary click_btn font-size-15 btn-choose-service" data-pack="1">
                        {{ __("Commander")}} <img src="{{ asset('web/images/seo/icon-arrow.svg') }}" width="24">
                      </a>
                    </footer>
                  </li>

                  <li data-type="yearly" class="is-hidden">
                    <header class="cd-pricing-header">
                      <h2>{{ __("Starter")}} </h2>
                      <div class="cd-price">
                        <span class="cd-value">
                          <span for="base_price">{{ format_price(($starterPriceMonthly) * 12) }}</span>
                          <span for="full_price" style="display: none;">{{ format_price(($starterPriceMonthly + $starterAdditionalPrice) * 12) }}</span>
                        </span>
                        <span class="cd-currency">{{ $currency }}</span>
                        <span class="cd-duration">{{ __("an")}}</span>
                      </div>
                    </header>
                    <div class="cd-pricing-body">
                      <ul class="cd-pricing-services">
                        <li><i class="material-icons">done</i></li>
                        <li>30 {{ __("mots clés")}}</li>
                        <li>1 {{ __("concurrent")}}</li>
                        <li><i class="material-icons">done</i></li>
                        <li><i class="material-icons">done</i></li>
                        <li><i class="material-icons">done</i></li>
                        <li>1 {{ __("mots clés")}}</li>
                        <li class="box-check">
                          <input type="checkbox" id="additional-price-2" name="" value="">
                          <label for="additional-price-2" class="font-size-14"><strong>{{ format_price($starterAdditionalPrice) }}</strong> {{ $currency }}</label></li>
                      </ul>
                    </div>
                    <footer class="cd-pricing-footer">
                      <a href="javascript:void(0)" class="btn btn-primary click_btn font-size-15 btn-choose-service" data-pack="1">
                        {{ __("Commander")}} <img src="{{ asset('web/images/seo/icon-arrow.svg') }}" width="24">
                      </a>
                    </footer>
                  </li>
                </ul> <!-- .cd-pricing-wrapper -->
              </li>
              <li>
                <ul class="cd-pricing-wrapper">
                  <li data-type="monthly" class="is-visible">
                    <header class="cd-pricing-header">
                      <h2>Advanced </h2>
                      <div class="cd-price">
                        <span class="cd-value">
                          <span for="base_price">{{ format_price($advancedPriceMonthly) }}</span>
                          <span for="full_price" style="display: none;">{{ format_price($advancedPriceMonthly + $advancedAdditionalPrice) }}</span>
                        </span>
                        <span class="cd-currency">{{ $currency }}</span>
                        <span class="cd-duration">{{ __("mois")}}</span>
                      </div>
                    </header>
                    <div class="cd-pricing-body">
                      <ul class="cd-pricing-services">
                        <li class="mobile"><a href="#audit-tab1">{{ __("Audit de site web")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab2">{{ __("Suivi du positionnement de mots clés") }} (SERP)</a></li>
                        <li>60 {{ __("mots clés")}}</li>
                        <li class="mobile"><a href="#audit-tab2">{{ __("Analyse et suivi des concurrents")}}</a></li>
                        <li>3 {{ __("concurrents")}}</li>
                        <li class="mobile"><a href="#audit-tab3">{{ __("Page SEO contrôleur")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab4">{{ __("Audit des backlinks")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                         <li class="mobile"><a href="#audit-tab5">{{ __("Suggestion de création de lien")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab6">{{ __("Surveillance de votre marque")}}</a></li>
                        <li>3 {{ __("mots clés")}}</li>
                        <li class="mobile"><a href="#audit-tab7">{{ __("Conseil & Accompagnement")}}</a></li>
                        <li class="box-check">
                          <input type="checkbox" id="additional-price-3" name="" value="">
                          <label for="additional-price-3" class="font-size-14"><strong>{{ format_price($advancedAdditionalPrice) }}</strong> {{ $currency }}</label></li>
                      </ul>
                    </div>
                    <footer class="cd-pricing-footer">
                      <a href="javascript:void(0)" class="btn btn-primary click_btn font-size-15 btn-choose-service" data-pack="2">
                        {{ __("Commander")}} <img src="{{ asset('web/images/seo/icon-arrow.svg') }}" width="24">
                      </a>
                    </footer>
                  </li>

                  <li data-type="yearly" class="is-hidden">
                    <header class="cd-pricing-header">
                      <h2>Advanced </h2>
                      <div class="cd-price">
                        <span class="cd-value">
                          <span for="base_price">{{ format_price($advancedPriceMonthly * 12) }}</span>
                          <span for="full_price" style="display: none;">{{ format_price(($advancedPriceMonthly + $advancedAdditionalPrice) * 12) }}</span>
                        </span>
                        <span class="cd-currency">{{ $currency }}</span>
                        <span class="cd-duration">{{ __("an")}}</span>
                      </div>
                    </header>
                    <div class="cd-pricing-body">
                      <ul class="cd-pricing-services">
                        <li><i class="material-icons">done</i></li>
                        <li>60 {{ __("mots clés")}}</li>
                        <li>3 {{ __("concurrents")}}</li>
                        <li><i class="material-icons">done</i></li>
                        <li><i class="material-icons">done</i></li>
                        <li><i class="material-icons">done</i></li>
                        <li>3 {{ __("mots clés")}}</li>
                        <li class="box-check">
                          <input type="checkbox" id="additional-price-4" name="" value="">
                          <label for="additional-price-4" class="font-size-14"><strong>{{ format_price($advancedAdditionalPrice) }}</strong> {{ $currency }}</label></li>
                      </ul>
                    </div>
                    <footer class="cd-pricing-footer">
                      <a href="javascript:void(0)" class="btn btn-primary click_btn font-size-15 btn-choose-service" data-pack="2">
                        {{ __("Commander")}} <img src="{{ asset('web/images/seo/icon-arrow.svg') }}" width="24">
                      </a>
                    </footer>
                  </li>
                </ul> <!-- .cd-pricing-wrapper -->
              </li>
              <li>
                <ul class="cd-pricing-wrapper">
                  <li data-type="monthly" class="is-visible">
                    <header class="cd-pricing-header">
                      <h2>Premium </h2>
                      <div class="cd-price">
                        <span class="cd-value">
                          <span for="base_price">{{ format_price($premiumPriceMonthly) }}</span>
                          <span for="full_price" style="display: none;">{{ format_price($premiumPriceMonthly + $premiumAdditionalPrice) }}</span>
                        </span>
                        <span class="cd-currency">{{ $currency }}</span>
                        <span class="cd-duration">{{ __("mois")}}</span>
                      </div>
                    </header>
                    <div class="cd-pricing-body">
                      <ul class="cd-pricing-services">
                        <li class="mobile"><a href="#audit-tab1">{{ __("Audit de site web")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab2">{{ __("Suivi du positionnement de mots clés") }} (SERP)</a></li>
                        <li>90 {{ __("mots clés")}}</li>
                        <li class="mobile"><a href="#audit-tab2">{{ __("Analyse et suivi des concurrents")}}</a></li>
                        <li>5 {{ __("concurrents")}}</li>
                        <li class="mobile"><a href="#audit-tab3">{{ __("Page SEO contrôleur")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab4">{{ __("Audit des backlinks")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                         <li class="mobile"><a href="#audit-tab5">{{ __("Suggestion de création de lien")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab6">{{ __("Surveillance de votre marque")}}</a></li>
                        <li>5 {{ __("mots clés")}}</li>
                        <li class="box-check">
                          <input type="checkbox" id="additional-price-5" name="" value="">
                          <label for="additional-price-5" class="font-size-14"><strong>{{ format_price($premiumAdditionalPrice) }}</strong> {{ $currency }}</label></li>
                      </ul>
                    </div>
                    <footer class="cd-pricing-footer">
                      <a href="javascript:void(0)" class="btn btn-primary click_btn font-size-15 btn-choose-service" data-pack="3">
                        {{ __("Commander")}} <img src="{{ asset('web/images/seo/icon-arrow.svg') }}" width="24">
                      </a>
                    </footer>
                  </li>

                  <li data-type="yearly" class="is-hidden">
                    <header class="cd-pricing-header">
                      <h2>Premium </h2>
                      <div class="cd-price">
                        <span class="cd-value">
                          <span for="base_price">{{ format_price($premiumPriceMonthly * 12) }}</span>
                          <span for="full_price" style="display: none;">{{ format_price(($premiumPriceMonthly + $premiumAdditionalPrice) * 12) }}</span>
                        </span>
                        <span class="cd-currency">{{ $currency }}</span>
                        <span class="cd-duration">{{ __("an")}}</span>
                      </div>
                    </header>
                    <div class="cd-pricing-body">
                      <ul class="cd-pricing-services">
                        <li><i class="material-icons">done</i></li>
                        <li>90 {{ __("mots clés")}}</li>
                        <li>5 {{ __("concurrents")}}</li>
                        <li><i class="material-icons">done</i></li>
                        <li><i class="material-icons">done</i></li>
                        <li><i class="material-icons">done</i></li>
                        <li>5 {{ __("mots clés")}}</li>
                        <li class="box-check">
                          <input type="checkbox" id="additional-price-6" name="" value="">
                          <label for="additional-price-6" class="font-size-14"><strong>{{ format_price($premiumAdditionalPrice) }}</strong> {{ $currency }}</label></li>
                      </ul>
                    </div>
                    <footer class="cd-pricing-footer">
                      <a href="javascript:void(0)" class="btn btn-primary click_btn font-size-15 btn-choose-service" data-pack="3">
                        {{ __("Commander")}} <img src="{{ asset('web/images/seo/icon-arrow.svg') }}" width="24">
                      </a>
                    </footer>
                  </li>
                </ul> <!-- .cd-pricing-wrapper -->
              </li>
              <li class="cd-popular">
                <ul class="cd-pricing-wrapper">
                  <li data-type="monthly" class="is-visible">
                    <header class="cd-pricing-header">
                      <h2>Tailored </h2>
                    </header>
                    <div class="cd-pricing-body">
                      <ul class="cd-pricing-services">
                        <li class="mobile"><a href="#audit-tab1">{{ __("Audit de site web")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab2">{{ __("Suivi du positionnement de mots clés") }} (SERP)</a></li>
                        <li>Tailored</li>
                        <li class="mobile"><a href="#audit-tab2">{{ __("Analyse et suivi des concurrents")}}</a></li>
                        <li>Tailored</li>
                        <li class="mobile"><a href="#audit-tab3">{{ __("Page SEO contrôleur")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab4">{{ __("Audit des backlinks")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                         <li class="mobile"><a href="#audit-tab5">{{ __("Suggestion de création de lien")}}</a></li>
                        <li><i class="material-icons">done</i></li>
                        <li class="mobile"><a href="#audit-tab6">{{ __("Surveillance de votre marque")}}</a></li>
                        <li>Tailored</li>
                        <li class="mobile"><a href="#audit-tab7">{{ __("Conseil & Accompagnement")}}</a></li>
                        <li class="box-check font-size-14">Tailored</li>
                      </ul>
                    </div>
                    <footer class="cd-pricing-footer">
                      <a href="javascript:void(0)" class="btn btn-primary click_btn font-size-15 btn-choose-service" data-pack="4">
                        {{ __("Commander")}} <img src="{{ asset('web/images/seo/icon-arrow.svg') }}" width="24">
                      </a>
                    </footer>
                  </li>

                  <li data-type="yearly" class="is-hidden">
                    <header class="cd-pricing-header">
                      <h2>Tailored </h2>
                    </header>
                    <div class="cd-pricing-body">
                      <ul class="cd-pricing-services">
                        <li><i class="material-icons">done</i></li>
                        <li>Tailored</li>
                        <li>Tailored</li>
                        <li><i class="material-icons">done</i></li>
                        <li><i class="material-icons">done</i></li>
                        <li><i class="material-icons">done</i></li>
                        <li>Tailored</li>
                        <li class="box-check font-size-14">Tailored</li>
                      </ul>
                    </div>
                    <footer class="cd-pricing-footer">
                      <a href="javascript:void(0)" class="btn btn-primary click_btn font-size-15 btn-choose-service" data-pack="4">
                        {{ __("Commander")}} <img src="{{ asset('web/images/seo/icon-arrow.svg') }}" width="24">
                      </a>
                    </footer>
                  </li>
                </ul> <!-- .cd-pricing-wrapper -->
              </li>
            </ul> <!-- .cd-pricing-list -->
          </div> <!-- .cd-pricing-container -->
        </div>
      </div>
    </div>
</section>