templates/prices/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}
  3.     Nos offres et tarifs sport pour votre structure
  4. {% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="{{ asset('/css/pages/prices.css') }}" />
  7. {% endblock %}
  8. {% block body %}
  9.     <div class="slider">
  10.         <div class="usefull-width item-slider">
  11.             <div>
  12.                 <H1 class="item-header-h">
  13.                     Nos offres et tarifs pour<br/>
  14.                     <span class="color">votre structure sportive !</span>
  15.                 </H1>
  16.                 <div class="with-padding-15 hidden-sm hidden-xs">
  17.                     Vous recherchez un logiciel de gestion de structure sportive. Sport adhesion, vous propose 3 offres adaptées à vos besoins pour gagner un maximum de temps et gérer au mieux votre structure.
  18.                 </div>
  19.             </div>
  20.             <div class="item-wrapped hidden-xs">
  21.                 <div class="launch-vids">
  22.                     <img src="{{ asset('/images/pages/members/sport-adhesion-header-preview.svg') }}" />
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </div>
  27.     <div class="usefull-width">
  28.         <section>
  29.             <div class="row-fluid">
  30.                 <H2 class="lcH">
  31.                     Tout savoir sur l'offre autour du logiciel {{ website_name }}
  32.                 </H2>
  33.             </div>
  34.             <div class="visible-xs">
  35.                 <div class="item-monthly with-margin-top-30">
  36.                     <div class="type typeL" style="color:#00a5db;">
  37.                         Sans engagement
  38.                     </div>
  39.                     <div class="content-monthly">
  40.                         <div class="monthly-input">
  41.                             <div class="circle-choice">
  42.                             </div>
  43.                         </div>
  44.                     </div>
  45.                     <div class="type typeR">
  46.                         Avec engagement
  47.                     </div>
  48.                 </div>
  49.             </div>
  50.             <div class="content-prices">
  51.                 <div class="item-monthly hidden-xs">
  52.                     <div class="type typeL" style="color:#00a5db;">
  53.                         Sans engagement
  54.                     </div>
  55.                     <div class="content-monthly">
  56.                         <div class="monthly-input">
  57.                             <div class="circle-choice">
  58.                             </div>
  59.                         </div>
  60.                     </div>
  61.                     <div class="type typeR">
  62.                         Avec engagement
  63.                     </div>
  64.                 </div>
  65.                 <div class="item-offers">
  66.                     {% set i = 0 %}
  67.                     {% set color = ["orange", "green", "blue"] %}
  68.                     {% set read = [] %}
  69.                     {% if subscribes is not empty %}
  70.                         {% for subscribe in subscribes %}
  71.                             <div class="item-box {{ color[i] }}-gradient">
  72.                                 <div class="ordP-mob">
  73.                                     <div>
  74.                                         <div class="name {{ color[i] }}">
  75.                                             {{ subscribe.getNameFr|capitalize }}
  76.                                         </div>
  77.                                         <div class="item-prices">
  78.                                         {% set read = read|merge(['
  79.                                             <span class="monthlyPay">'~ subscribe.getMonthly ~ ' € <span class="unl-bold size-12">HT / mois</span></span>
  80.                                             <span class="monthlyEngPay erase">'~ subscribe.getMonthlyCommit ~ ' € <span class="unl-bold size-12">HT / mois</span></span>'])
  81.                                         %}
  82.                                         {{ read[i]|raw }}
  83.                                         </div>
  84.                                     </div>
  85.                                     <a href="{{ path('signup', {'subscribe':subscribe.getId}) }}" class="choose {{ color[i] }}">
  86.                                         Choisir &nbsp;&nbsp;<i class="fas fa-arrow-circle-right fa-lg"></i>
  87.                                     </a>
  88.                                 </div>
  89.                                 <div class="hidden-xs">
  90.                                     <a href="{{ path('signup', {'subscribe':subscribe.getId}) }}" class="button {{ color[i] }}">
  91.                                         Choisir cette offre
  92.                                     </a>
  93.                                     <div class="horizontal-separator bg-grey with-margin-top-bottom-15"></div>
  94.                                     <div class="text">
  95.                                         {{ subscribe.getDescriptionFr|raw }}
  96.                                     </div>
  97.                                     {% if i != 0 %}
  98.                                         <a href="{{ path('signup', {'subscribe':subscribe.getId,'trial':true}) }}" class="button_theme">
  99.                                             Démarrer un éssai
  100.                                         </a>
  101.                                     {% endif %}
  102.                                 </div>
  103.                             </div>
  104.                             <div class="text-xs {{ color[i] }}-gradient visible-xs">
  105.                                 <div class="text">
  106.                                     {{ subscribe.getDescriptionFr|raw }}
  107.                                 </div>
  108.                                 <a href="{{ path('signup', {'subscribe':subscribe.getId}) }}" class="button {{ color[i] }}">
  109.                                     Choisir cette offre
  110.                                 </a>
  111.                             </div>
  112.                             {% set i = i + 1 %}
  113.                         {% endfor %}
  114.                     {% endif %}
  115.                 </div>
  116.                 <div class="align size-16">
  117.                     Accédez à une plateforme de paiement complète dotée d'une tarification simple,<br/>
  118.                     proportionnelle à votre utilisation du service.
  119.                 </div>
  120.                 <div class="item-bank-prices">
  121.                     <div>
  122.                         <div class="amount">
  123.                             1,9% + 0,30 €
  124.                         </div>
  125.                         <div class="amount-text">
  126.                             pour l’espace économique européen<br/> (+1% pour les cartes bancaires britanniques)
  127.                         </div>
  128.                     </div>
  129.                     <div>
  130.                         <div class="amount">
  131.                             3,65% + 0,30 €
  132.                         </div>
  133.                         <div class="amount-text">
  134.                             pour les cartes internationales
  135.                         </div>
  136.                     </div>
  137.                 </div>
  138.             </div>
  139.         </section>
  140.     </div>
  141.     <section class="row-fluid hidden-sm hidden-xs">
  142.         <div class="item-explain">
  143.             <div class="usefull-width">
  144.                 <H3 class="title">
  145.                     On vous aide à choisir l’offre adaptée à vos besoins !
  146.                 </H3>
  147.                 <div id="item-carroussel" class="configurator-desk">
  148.                     <div class="item-answer step1" data-step="1">
  149.                         <div class="configurator-question">
  150.                             <div class="color">
  151.                                 Structure.
  152.                             </div>
  153.                             &nbsp;&nbsp;Je suis ?
  154.                         </div>
  155.                         <div class="item-mob-cg-anim">
  156.                             <div class="item-list">
  157.                                 <div class="item-choice active" data-name="type" data-value="Association">
  158.                                     <img class="icon" alt="" src="{{ asset('/images/configurator/icon-association.svg') }}" />
  159.                                     <span class="item-name">Association</span>
  160.                                 </div>
  161.                                 <div class="item-choice" data-name="type" data-value="Salle de sport">
  162.                                     <img class="icon" alt="" src="{{ asset('/images/configurator/icon-salle-de-sport.svg') }}" />
  163.                                     <span class="item-name">Salle de sport</span>
  164.                                 </div>
  165.                                 <div class="item-choice" data-name="type" data-value="Coach">
  166.                                     <img class="icon" alt="" src="{{ asset('/images/configurator/icon-coach.svg') }}" />
  167.                                     <span class="item-name">Coach</span>
  168.                                 </div>
  169.                                 <div class="item-choice" data-name="type" data-value="Hotel">
  170.                                     <img class="icon" alt="" src="{{ asset('/images/configurator/icon-hotel.svg') }}" />
  171.                                     <span class="item-name">Hotel</span>
  172.                                 </div>
  173.                                 <div class="item-choice" data-name="type" data-value="Autres">
  174.                                     <img class="icon" alt="" src="{{ asset('/images/configurator/icon-other.svg') }}" />
  175.                                     <span class="item-name">Autres</span>
  176.                                 </div>
  177.                             </div>
  178.                         </div>
  179.                     </div>
  180.                     <div class="item-answer step2 erase" data-step="2">
  181.                         <div class="configurator-question">
  182.                             <div class="color">
  183.                                 Utilisation.
  184.                             </div>
  185.                             &nbsp;&nbsp;Vous recherchez un logiciel de...
  186.                         </div>
  187.                         <div class="item-mob-cg-anim">
  188.                             <div class="item-list">
  189.                                 <div class="item-choice" data-name="utilities" data-value="comptabilities">
  190.                                     <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-comptabilities.svg') }}" />
  191.                                     <span class="item-name">Gestion comptable</span>
  192.                                 </div>
  193.                                 <div class="item-choice" data-name="utilities" data-value="members">
  194.                                     <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-members.svg') }}" />
  195.                                     <span class="item-name">Gestion membres</span>
  196.                                 </div>
  197.                                 <div class="item-choice" data-name="utilities" data-value="online_payment">
  198.                                     <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-online-payment.svg') }}" />
  199.                                     <span class="item-name">Paiement en ligne</span>
  200.                                 </div>
  201.                                 <div class="item-choice" data-name="utilities" data-value="grounds">
  202.                                     <img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-grounds.svg') }}" />
  203.                                     <span class="item-name">Gestion<br/>terrain</span>
  204.                                 </div>
  205.                             </div>
  206.                         </div>
  207.                     </div>
  208.                     <div class="item-answer step3 erase" data-step="3">
  209.                         <div class="configurator-question">
  210.                             <div class="color">
  211.                                 Capacité.
  212.                             </div>
  213.                             &nbsp;&nbsp;Vous êtes environs...
  214.                         </div>
  215.                         <div class="item-mob-cg-anim">
  216.                             <div class="item-list">
  217.                                 <div class="item-choice" data-name="members" data-value="120">
  218.                                     <span class="number-choice">
  219.                                         120
  220.                                     </span>
  221.                                     <span class="item-name">membres</span>
  222.                                 </div>
  223.                                 <div class="item-choice" data-name="members" data-value="250">
  224.                                     <span class="number-choice">
  225.                                         250
  226.                                     </span>
  227.                                     <span class="item-name">membres</span>
  228.                                 </div>
  229.                                 <div class="item-choice" data-name="members" data-value="500">
  230.                                     <span class="number-choice">
  231.                                         500
  232.                                     </span>
  233.                                     <span class="item-name">membres</span>
  234.                                 </div>
  235.                                 <div class="item-choice" data-name="members" data-value="2000">
  236.                                     <span class="number-choice">
  237.                                         2000
  238.                                     </span>
  239.                                     <span class="item-name">membres</span>
  240.                                 </div>
  241.                             </div>
  242.                         </div>
  243.                     </div>
  244.                     <div class="item-answer step4 erase" data-step="4">
  245.                         <div id="renderConfigurator" class="align">
  246.                             <img src="{{ asset('/images/loader/loader.gif') }}" width="40" height="40" border="0" />
  247.                         </div>
  248.                     </div>
  249.                     <div class="stepper">
  250.                         <div class="circle-step done"></div>
  251.                         <div class="line-step"></div>
  252.                         <div class="circle-step"></div>
  253.                         <div class="line-step"></div>
  254.                         <div class="circle-step"></div>
  255.                         <div class="line-step"></div>
  256.                         <div class="circle-step"></div>
  257.                     </div>
  258.                 </div>
  259.                 
  260.             </div>
  261.         </div>
  262.     </section>
  263.     <div class="usefull-width">
  264.         <section>
  265.             <H2>
  266.                 Comparez les offres sport adhesion
  267.             </H2>
  268.             <div class="compare-version">
  269.                 <div>
  270.                     <select class="compareVer form-control">
  271.                         <option value="basic" selected="selected">Offre basic</option>
  272.                         <option value="business">Offre business</option>
  273.                         <option value="premium">Offre business Premium</option>
  274.                     </select>
  275.                 </div>
  276.                 <div>
  277.                     <select class="compareVer form-control">
  278.                         <option value="basic">Offre basic</option>
  279.                         <option value="business" selected="selected">Offre business</option>
  280.                         <option value="premium">Offre business Premium</option>
  281.                     </select>
  282.                 </div>
  283.             </div>
  284.             <div class="item-compare">
  285.                 <div class="table-compare">
  286.                     <table class="compare">
  287.                         <thead>
  288.                             <tr>
  289.                                 <th class="label-fc">
  290.                                     Fonctionnalités
  291.                                 </th>
  292.                                 <th class="list-name orange basic">
  293.                                     <span class="left width-max with-margin-top-bottom-8">
  294.                                         <img src="{{ asset('/images/logos/pos3.png') }}" height="60" width="auto" class="hidden-xs"/><br/>Basic
  295.                                     </span>
  296.                                     <div class="size-12 with-line-height-10">
  297.                                         {{ read[0]|raw}}
  298.                                     </div>
  299.                                     <a href="{{ path('signup', {'subscribe':1}) }}" class="button orange">
  300.                                         Choisir
  301.                                     </a>
  302.                                 </th>
  303.                                 <th class="list-name green business">
  304.                                     <span class="left width-max with-margin-top-bottom-8">
  305.                                         <img src="{{ asset('/images/logos/pos2.png') }}" height="60" width="auto" class="hidden-xs"/><br/>Business
  306.                                     </span>
  307.                                     <div class="size-12 with-line-height-10">
  308.                                         {{ read[1]|raw}}
  309.                                     </div>
  310.                                     <a href="{{ path('signup', {'subscribe':2}) }}" class="button green">
  311.                                         Choisir
  312.                                     </a>
  313.                                 </th>
  314.                                 <th class="list-name blue premium erase-mob">
  315.                                     <span class="left width-max with-margin-bottom-6">
  316.                                         <img src="{{ asset('/images/logos/pos1.png') }}" height="60" width="auto" class="hidden-xs"/><br/>Business
  317.                                         <br/>Premium
  318.                                     </span>
  319.                                     <div class="size-12 with-line-height-10">
  320.                                         {{ read[2]|raw}}
  321.                                     </div>
  322.                                     <a href="{{ path('signup', {'subscribe':3}) }}" class="button blue">
  323.                                         Choisir
  324.                                     </a>
  325.                                 </th>
  326.                             </tr>
  327.                         </thead>
  328.                         <tbody>
  329.                             {% if features is not empty %}
  330.                                 {% set i = 0 %}
  331.                                 {% set maxFeatures = features|length - 1 %}
  332.                                 {% for feature in features %}
  333.                                     {% set first = '' %}
  334.                                     {% set end = '' %}
  335.                                     {% set itemCategory = '' %}
  336.                                     {% set categoryName = '' %}
  337.                                     {% set itemChild = '' %}
  338.                                     {% set child = '' %}
  339.                                     {% if i == 0 %}
  340.                                         {% set first = 'first' %}
  341.                                     {% elseif i == maxFeatures %}
  342.                                         {% set end = 'end' %}
  343.                                     {% endif %}
  344.                                     {% if feature.getCategoryName is not empty %}
  345.                                         {% set itemCategory = 'item-category' %}
  346.                                         {% set categoryName = 'data-id=' ~ feature.getCategoryName %}
  347.                                     {% endif %}
  348.                                     {% if feature.getChildOf != 0 %}
  349.                                         {% set itemChild = 'item-child' %}
  350.                                         {% if categoryFeatures is not empty and categoryFeatures[feature.getChildOf] is not empty %}
  351.                                             {% set child = categoryFeatures[feature.getChildOf] %}
  352.                                         {% endif %}
  353.                                     {% endif %}
  354.                                     <tr class="{{ itemChild ~ ' ' ~ child}}">
  355.                                         <td class="item-name {{ first }} {{ end }} {{ itemCategory }}" {{ categoryName }}>
  356.                                             {{ feature.getFeatureName|capitalize }}
  357.                                             {% if categoryName is not empty %}
  358.                                                 <i class="fas fa-caret-right"></i>
  359.                                             {% endif %}
  360.                                         </td>
  361.                                         <td class="basic">
  362.                                             {% if feature.getFeatureValue is not empty and feature.getFeatureValue != 3 %}
  363.                                                 {% if feature.getFeatureValue == 0 %}
  364.                                                     <i class="fas fa-times-circle"></i>
  365.                                                 {% elseif feature.getFeatureValue == 1 %}
  366.                                                     <i class="fas fa-check-circle"></i>
  367.                                                 {% elseif feature.getFeatureValue == 2 %}
  368.                                                     <i class="fas fa-check-circle mid"></i>
  369.                                                 {% endif %}
  370.                                             {% endif %}
  371.                                             {% if feature.getFeatureText is not empty %}
  372.                                                 <span class="text">
  373.                                                     {{ feature.getFeatureText|raw }}
  374.                                                     {% if feature.getConfiguratorName == "nb_members" %}
  375.                                                         membres
  376.                                                     {% elseif feature.getConfiguratorName == "account_users" %}
  377.                                                         compte(s)
  378.                                                     {% endif %}
  379.                                                 </span>
  380.                                             {% endif %}
  381.                                         </td>
  382.                                         <td class="mid business">
  383.                                             <div class="middle {{ first }} {{ end }}">
  384.                                                 {% if feature.getFeatureValueTwo is not empty and feature.getFeatureValueTwo != 3 %}
  385.                                                     {% if feature.getFeatureValueTwo == 0 %}
  386.                                                         <i class="fas fa-times-circle"></i>
  387.                                                     {% elseif feature.getFeatureValueTwo == 1 %}
  388.                                                         <i class="fas fa-check-circle"></i>
  389.                                                     {% elseif feature.getFeatureValueTwo == 2 %}
  390.                                                         <i class="fas fa-check-circle mid"></i>
  391.                                                     {% endif %}
  392.                                                 {% endif %}
  393.                                                 {% if feature.getFeatureTextTwo is not empty %}
  394.                                                     <span class="text">
  395.                                                         {{ feature.getFeatureTextTwo|raw }}
  396.                                                         {% if feature.getConfiguratorName == "nb_members" %}
  397.                                                             membres
  398.                                                         {% elseif feature.getConfiguratorName == "account_users" %}
  399.                                                             comptes
  400.                                                         {% endif %}
  401.                                                     </span>
  402.                                                 {% endif %}
  403.                                             </div>
  404.                                         </td>
  405.                                         <td class="premium erase-mob">
  406.                                             {% if feature.getFeatureValueThree is not empty and feature.getFeatureValueThree != 3 %}
  407.                                                 {% if feature.getFeatureValueThree == 0 %}
  408.                                                     <i class="fas fa-times-circle"></i>
  409.                                                 {% elseif feature.getFeatureValueThree == 1 %}
  410.                                                     <i class="fas fa-check-circle"></i>
  411.                                                 {% elseif feature.getFeatureValueThree == 2 %}
  412.                                                     <i class="fas fa-check-circle mid"></i>
  413.                                                 {% endif %}
  414.                                             {% endif %}
  415.                                             {% if feature.getFeatureTextThree is not empty %}
  416.                                                 <span class="text">
  417.                                                     {{ feature.getFeatureTextThree|raw }}
  418.                                                     {% if feature.getConfiguratorName == "nb_members" %}
  419.                                                         membres
  420.                                                     {% elseif feature.getConfiguratorName == "account_users" %}
  421.                                                         comptes
  422.                                                     {% endif %}
  423.                                                 </span>
  424.                                             {% endif %}
  425.                                         </td>
  426.                                     </tr>
  427.                                     {% set i = i + 1  %}
  428.                                 {% endfor %}
  429.                                 <tr class="unl-border">
  430.                                     <td>
  431.                                     </td>
  432.                                     <td class="list-name orange basic">
  433.                                         Basic
  434.                                         <a href="{{ path('signup', {'subscribe':1}) }}" class="button orange">
  435.                                             Choisir
  436.                                         </a>
  437.                                     </td>
  438.                                     <td class="list-name green business">
  439.                                         Business
  440.                                         <a href="{{ path('signup', {'subscribe':2, 'trial':true}) }}" class="button green">
  441.                                             Essai gratuit
  442.                                         </a>
  443.                                     </td>
  444.                                     <td class="list-name blue premium erase-mob">
  445.                                         Business
  446.                                         <br/>Premium
  447.                                         <a href="{{ path('signup', {'subscribe':3, 'trial':true}) }}" class="button blue unl-margin">
  448.                                             Essai gratuit
  449.                                         </a>
  450.                                     </td>
  451.                                 </tr>
  452.                             {% endif %} 
  453.                         </tbody>
  454.                     </table>
  455.                 </div>
  456.             </div>
  457.         </section>
  458.         <section>
  459.             <div class="row-fluid">
  460.                 <H2 class="with-margin-top-80 marginT-mob-30">
  461.                     Questions fréquentes
  462.                 </H2>
  463.                 <div class="hHook with-margin-bottom-30">
  464.                     Les questions les plus demandées
  465.                 </div>
  466.                 <div class="item-faq">
  467.                     {% set i = 1 %}
  468.                     {% set read = '' %}
  469.                     {% if faq is not empty %}
  470.                         {% set max = faq|length / 2 %}
  471.                         {% for question in faq %}
  472.                             {% if i == 1 %}
  473.                                 {% set read = read ~ '<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 unl-padding-mob">' %}
  474.                             {% endif %}
  475.                             {% set read = read ~ '<div class="title dimQuest">
  476.                                 <i class="fas fa-question-circle fa-lg"></i>
  477.                                 &nbsp;' ~ question.getQuestionFr ~ '
  478.                                 <div class="arrow">
  479.                                     <i class="fas fa-sort-down"></i>
  480.                                 </div>
  481.                                 <div class="answer">
  482.                                     ' ~ question.getReponseFr ~ '
  483.                                 </div>
  484.                             </div>' %}
  485.                             {% if i == max %}
  486.                                 {% set read = read ~ '</div>' %}
  487.                                 {% set i = 0 %}
  488.                             {% endif %}
  489.                             {% set i = i + 1 %}
  490.                         {% endfor %}
  491.                         {% if i != 1 %}
  492.                             {% set read = read ~ '</div>' %}
  493.                         {% endif %}
  494.                     {% endif %}
  495.                     {{ read|raw }}
  496.                 </div>
  497.             </div>
  498.         </section>
  499.         <section>
  500.             <div class="row-fluid">
  501.                 <H2>
  502.                     Des questions ? on en parle !
  503.                 </H2>
  504.                 <div class="button_theme btnlg with-auto-margin with-margin-top-20">
  505.                     Prendre rendez-vous
  506.                 </div>
  507.             </div>
  508.         </section>
  509.         <div class="row-flex">
  510.             <div class="height-100 width-max"></div>
  511.         </div>
  512.         <ol class="breadcrumb unl-margin">
  513.             <li class="breadcrumb-item active" aria-current="page">Les tarifs {{ website_name }}</li>
  514.         </ol>
  515.     </div>
  516. {% endblock %}
  517. {% block javascriptFooter %}
  518. <script>
  519.     $(document).ready(function(){
  520.         step = 1;
  521.         hashSales = '{{ hashSales }}';
  522.         // Select an answer
  523.         //
  524.         $(document).on('click', '#item-carroussel .item-choice', function(){
  525.             var name = $(this).data('name');
  526.             var value = $(this).data('value');
  527.             var copy = $(this).clone();
  528.             complete = 0;
  529.             step = $(this).closest('.item-answer').data('step');
  530.             $(this).closest('.item-answer').find('.item-choice').removeClass('active');
  531.             $(this).addClass('active');
  532.             if(typeof step !== "undefined"){
  533.                 $('#item-carroussel .step' + step).hide();
  534.                 $('#item-carroussel .step').html(step);
  535.                 $('#item-carroussel .stepper').children('.circle-step').eq(step).addClass('done');
  536.                 $('#item-carroussel .stepper').children('.line-step').eq((parseInt(step) - 1)).addClass('done');
  537.                 step = parseInt(step) + 1;
  538.                 $('#item-carroussel .step' + step).show();
  539.             }
  540.             
  541.             if(step == 4){
  542.                 complete = 1;
  543.             }
  544.             $.ajax({
  545.                 url: '/send/configurator',
  546.                 type: "POST",
  547.                 data: {
  548.                     'name': name,
  549.                     'value': value,
  550.                     'complete':complete,
  551.                     'type': 'Desktop :: Prices',
  552.                     'hash':hashSales,
  553.                 },
  554.                 success: function(data, textStatus, jqXHR) {
  555.                     save_data = data;
  556.                     if(step == 4){
  557.                         $('#renderConfigurator').html(data);
  558.                     }
  559.                 },
  560.                 complete: function() {
  561.                 },
  562.                 error: function(jqXHR, textStatus, errorThrown) {
  563.                 }
  564.             });
  565.         });
  566.         $(document).on('change', '.compareVer', function(){
  567.             $('table.compare .premium, table.compare .basic, table.compare .business').hide();
  568.             $('.compareVer').each(function(){
  569.                 var value = $(this).val();
  570.                 $('table.compare .' + value).show();
  571.             });
  572.         });
  573.         $(document).on('click', '.item-category', function(){
  574.             var id = $(this).data('id');
  575.             if($(this).hasClass('open')){
  576.                 $(this).find('.fa-caret-right').css({'transform':''});
  577.                 $(this).removeClass('open');
  578.                 $('tr.' + id).hide();
  579.             }else{
  580.                 $(this).find('.fa-caret-right').css({'transform':'rotate(90deg)'});
  581.                 $(this).addClass('open');
  582.                 $('tr.' + id).show();
  583.             }
  584.         });
  585.         $(document).on('click', '.monthly-input', function(){
  586.             $('.item-monthly').find('.type').css({'color':''});
  587.             if($(this).hasClass('sideRight')){
  588.                 $('.item-monthly').find('.typeL').css({'color':'#00a5db'});
  589.                 $(this).removeClass('sideRight');
  590.                 $('.circle-choice').animate({'margin-left':''},300);
  591.                 $('.monthlyPay').show();
  592.                 $('.monthlyEngPay').hide();
  593.             }else{
  594.                 $('.item-monthly').find('.typeR').css({'color':'#00a5db'});
  595.                 $(this).addClass('sideRight');
  596.                 $('.circle-choice').animate({'margin-left':'38px'},300);
  597.                 $('.monthlyEngPay').show();
  598.                 $('.monthlyPay').hide();
  599.             }
  600.         });
  601.     });
  602. </script>
  603. {% endblock %}