@extends('web.layouts.app')

@section('title', __('Silkwires Digital agency') . " - " . $pageTitle)
@section('keywords', __('Video Editing'))
@section('description', __(''))

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

@section('services_active', 'active')
@section('video_editing_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"/>
  <style>
    .custom-control input[type=radio],
    .custom-control input[type=checkbox],
    .custom-control label {
      cursor: pointer;
    }
  </style>
@endsection

@section('content')
    @include('web.home.header_home')

    <section class="banner-sw banner-sw-video pb-0">
      <div class="banner-bg d-flex align-items-center">
        <div class="container py-5">
          <div class="row">
            <div class="col-xl-11 mx-auto text-center">
              <h2 class="mb-4 wow fadeInUp text-white">
                <!-- <span class="type-1">Transformez vos</span> anciens rushes vidéos <span class="type-1">en</span><br class="d-xl-block d-none" /> 
                <span class="text-orange">72 nouveaux clips</span> <span class="type-1">de 6 à 10s pour moins de</span> <span class="text-orange">55 Euros/clip !</span> -->
                {!! __(":tag1 Transformez vos :tag2 anciens rushes vidéos :tag3 en :tag4 :tag5 :tag6 72 nouveaux clips :tag7 :tag8 de 6 à 10s pour moins de :tag9 :tag10 55 Euros/clip ! :tag11", [
                    'tag1' => '<span class="type-1">',
                    'tag2' => '</span>',
                    'tag3' => '<span class="type-1">',
                    'tag4' => '</span>',
                    'tag5' => '<br class="d-xl-block d-none" />',
                    'tag6' => '<span class="text-orange">',
                    'tag7' => '</span>',
                    'tag8' => '<span class="type-1">',
                    'tag9' => '</span>',
                    'tag10' => '<span class="text-orange">',
                    'tag11' => '</span>',
                ]) !!}
              </h2>
              <p class="wow fadeInUp">
                <!-- <small>Spécialiste de l’éducation, nous créons pour votre campagne 72 nouveaux clips à partir de vos rushes existants, utilisables sur vos réseaux favoris <span>(TikTok, Instagram/Facebook, YouTube, X, LinkedIn et Snapchat)</span></small> -->
                <small>{!! __("Spécialiste de l’éducation, nous créons pour votre campagne 72 nouveaux clips à partir de vos rushes existants, utilisables sur vos réseaux favoris :tag1 (TikTok, Instagram/Facebook, YouTube, X, LinkedIn et Snapchat) :tag2", [
                  'tag1' => '<span>',
                  'tag2' => '</span>',
                ]) !!}</small>
              </p>
              <div class="b-action mt-4 wow zoomIn">
                <a href="#offer-pack" class="d-inline-block">{{ __("Voir les packs") }}</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <main class="main my-auto pb-4">
      <section class="audit section-comment">
        <div class="container-fluid">
          <div class="row">
            <div class="col-12 text-center">
              <h2 class="mb-md-3 mb-4 text-uppercase text-primary text-center justify-content-center wow fadeInDown">{{__("Comment ca marche ?")}}</h2>
            </div>
            <div class="col-md-4 desktop wow fadeInLeft">
              <!-- tabs -->
              <div class="tabbable">
                <ul class="nav nav-tabs mt-0 pr-0 mr-0">
                  <li>
                    <a class="active" href="#audit-tab1" data-toggle="tab">
                      <span>1</span><strong>{{__("Choix de l’angle stratégique de la campagne")}}</strong>
                    </a>
                  </li>
                  <li>
                    <a href="#audit-tab2" data-toggle="tab">
                      <span>2</span><strong>{{__("Collecte de vos assets")}}</strong>
                    </a>
                  </li>
                  <li>
                    <a href="#audit-tab3" data-toggle="tab">
                      <span>3</span><strong>{{__("Production & livraison")}}</strong>
                    </a>
                  </li>
                </ul>
              </div>
              <!-- /tabs -->
            </div>
            <div class="col-md-8 wow fadeInRight">
              <!-- tabs -->
              <div class="tabbable h-100">
                <div class="tab-content d-flex flex-column h-100">
                  <div class="tab-pane" id="audit-tab1">
                    <h4 class="d-md-none d-flex"><span>1</span>{{__("Choix de l’angle stratégique de la campagne")}}</h4>
                    <div class="audit-content">
                      <p class="mb-4">{{__("Chaque campagne couvre un seul angle stratégique et comprend la réalisation au minimum de 12 clips (6 à 10s) sur un thème choisi par vos soins")}} :</p>
                      <div class="row">
                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>1</span><strong>{{__("Notoriété & Positionnement")}}</strong></div>
                          <div class="l-text">{{__("Ancrer la réputation, les valeurs et l’identité visuelle de l’établissement dans l’esprit des prospects, partenaires et anciens élèves")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>2</span><strong>{{__("Recrutement Étudiant & Génération de Leads")}}</strong></div>
                          <div class="l-text">{{__("Obtenir des demandes d’informations, des formulaires complétés et des inscriptions pour un programme précis")}}</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>3</span><strong>{{__("Parcours & Réussites des Diplômés")}}</strong></div>
                          <div class="l-text">{{__("Mettre en avant les trajectoires professionnelles des anciens et prouver le retour sur investissement aux nouveaux prospects")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>4</span><strong>{{__("Expertise & Leadership d’Opinion")}}</strong></div>
                          <div class="l-text">{{__("Positionner les professeurs, doyens et chercheurs comme des voix référentes dans leur domaine")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>5</span><strong>{{__("Vie de Campus & Culture")}}</strong></div>
                          <div class="l-text">{{__("Créer un lien émotionnel en faisant découvrir au prospect la vie quotidienne sur le campus")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>6</span><strong>{{__("Zoom sur les Programmes & Points Forts")}}</strong></div>
                          <div class="l-text">{{__("Informer les prospects sur la structure des cours, les spécialisations et les méthodes d’apprentissage uniques")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>7</span><strong>{{__("Diversité, Équité et Inclusion (DEI)")}}</strong></div>
                          <div class="l-text">{{__("Montrer l’engagement pour un environnement inclusif et célébrer la diversité de la communauté")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>8</span><strong>{{__("Partenariats Entreprises & Secteurs")}}</strong></div>
                          <div class="l-text">{{__("Renforcer la confiance en montrant les collaborations avec des entreprises de renom et les passerelles d’alternance/emploi")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>9</span><strong>{{__("Recherche & Innovation")}}</strong></div>
                          <div class="l-text">{{__("Valoriser le rôle de l’institution dans les découvertes de pointe et l’impact sociétal")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>10</span><strong>{{__("Engagement Communautaire & Impact Social")}}</strong></div>
                          <div class="l-text">{{__("Montrer comment l’école contribue aux communautés locales et mondiales et soutient des causes sociales")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>11</span><strong>{{__("Formation Continue & Programmes pour Cadres")}}</strong></div>
                          <div class="l-text">{{__("Attirer les professionnels en activité et les apprenants tout au long de la vie vers des certificats, des cours courts ou des MBA exécutifs")}}.</div>
                        </div>

                        <div class="col-lg-6 col-12">
                          <div class="l-title"><span>12</span><strong>{{__("Incubateur startup")}}</strong></div>
                          <div class="l-text">{{__("Valoriser l’accompagnement entrepreneurial, l’écosystème d’incubation et les réussites de projets pour attirer porteurs d’idées, investisseurs et partenaires")}}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="tab-pane" id="audit-tab2">
                    <h4 class="d-md-none d-flex"><span>2</span>{{__("Collecte de vos assets")}}</h4>
                    <div class="audit-content">
                      <ul>
                        <li>{{__("Vos 2 heures de rushes max (indiquer le Google Drive ou vous avez déposé vos rush video)")}}</li>
                        <li>{{__("Votre charte graphique (logos, couleurs, typographies)")}}</li>
                      </ul>
                    </div>
                  </div>
                  <div class="tab-pane active" id="audit-tab3">
                    <h4 class="d-md-none d-flex"><span>3</span>{{__("Production & livraison")}}</h4>
                    <div class="audit-content">
                      <div class="font-weight-bold text-primary mb-3">{{__("Production des clips")}} (6–10 s)</div>
                      <ul>
                        <li>{!! __(":tag1 Prise en compte de votre angle stratégique & storytelling dédié : :tag2 nous définissons un fil narratif en lien avec l’objectif de la campagne choisi et intégrons dès le rough cut pour sélectionner les plans qui racontent l’histoire", [
                            'tag1' => '<strong>',
                            'tag2' => '</strong>'
                        ]) !!}.</li>
                        <li>{!! __(":tag1 Extraction des extraits clés : :tag2 l’éditeur découpe les séquences les plus percutantes de vos rushes, validées en rough cut, afin de servir au mieux votre storytelling", [
                          'tag1' => '<strong>',
                          'tag2' => '</strong>',
                        ]) !!}.</li>
                        <li>{!! __(":tag1 Adaptation par support : :tag2 chaque clip est ensuite retravaillé pour correspondre aux exigences du réseau choisi (TikTok, Instagram/facebook Réels/Stories, YouTube Shorts, X, LinkedIn, Snapchat) : format, style d’habillage et placement des éléments visuels/textuels", [
                          'tag1' => '<strong>',
                          'tag2' => '</strong>',
                        ]) !!}.</li>
                        <li>{!! __(":tag1 Habillages textuels et graphiques : :tag2 insertion de lower-thirds nominatives, de votre logo animé et de bumpers courts, pour renforcer le branding (par réseaux) et illustrer le storytelling de chaque clip", [
                          'tag1' => '<strong>',
                          'tag2' => '</strong>',
                        ]) !!}.</li>
                        <li>{!! __(":tag1 Optimisation audio: :tag2 nettoyage des bruits et équilibrage des niveaux pour que la musique reste parfaitement audible dans ces formats ultra-courts", [
                          'tag1' => '<strong>',
                          'tag2' => '</strong>',
                        ]) !!}.</li>
                        <li>{!! __(":tag1 Export 9:16 optimisé : :tag2 configuration du bitrate et de la compression pour une diffusion fluide sur tous les canaux verticaux sélectionnés", [
                          'tag1' => '<strong>',
                          'tag2' => '</strong>',
                        ]) !!}.</li>
                        <!-- <li><strong>Optimisation audio:</strong> nettoyage des bruits et équilibrage des niveaux pour que la musique reste parfaitement audible dans ces formats ultra-courts.</li> -->
                        <!-- <li><strong>Export 9:16 optimisé :</strong> configuration du bitrate et de la compression pour une diffusion fluide sur tous les canaux verticaux sélectionnés.</li> -->
                      </ul>

                      <div class="font-weight-bold text-primary mb-3">{{__("Vérification qualité (QA)")}}</div>
                      <ul>
                        <li>{{__("Visionnage dédié pour contrôler le respect des safe-zones (textes non coupés), la lisibilité et la synchronisation son/image")}}.</li>
                        <li>{{__("Création d’un rapport de QA interne avant tout partage client")}}.</li>
                      </ul>

                      <div class="font-weight-bold text-primary mb-3">{{__("Préparation des fichiers")}}</div>
                      <ul>
                        <li>{{__("Nomination claire des fichiers (clip1_TitreCampagne.mp4, etc.)")}}.</li>
                        <li>{{__("Packaging des livrables dans une arborescence organisée par format et plateforme sur votre Google Drive")}}.</li>
                      </ul>

                      <div class="font-weight-bold text-primary mb-3">{{__("Processus de validation et révisions")}}</div>
                      <p>{{__("Après livraison des premiers 12 clips, vous recevrez un lien privé pour visualiser l’ensemble des vidéos. Vous pourrez alors formuler vos retours (ajustements de texte, coupes, habillages, etc.). Chaque révision sera intégrée par nos monteurs dans un court délai. Vous disposez de deux séries de modifications gratuites : après la deuxième validation, tout nouvel ajustement sera facturé en supplément")}}.</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /tabs -->
            </div>
          </div>
        </div>
      </section>

      <section class="section-form mt-lg-5" id="offer-pack">
        <div class="container">
          <div class="row">
            <div class="col-xl-11 mx-auto mb-4 wow fadeInUp">
              <h2 class="mb-3 text-uppercase text-primary text-center">{{__("Notre offre")}}</h2>
              <ul class="f-14 pl-3">
                <li>{{__("Les tarifs ci-dessous s’entendent pour un stock footage (i. la durée totale des vidéos que vous nous envoyez pour réaliser le projet) de maximum 2 heures fourni par vos soins")}}.</li>
                <li>{{__("Frais fixe : 1 000 € Ce montant couvre la définition du storytelling selon l’axe stratégique choisi, la visualisation des rushes, la sélection et l’extraction des moments clés")}}.</li>
                <li>{{__("490 Euros. Réalisation de 12× clips courts (6–10 s, 9:16) optimisés pour chaque social média (accroches, habillages, CTA, hashtags, music, etc…)")}}</li>
              </ul>
            </div>
          </div>
          <form id="form-video-editing-pack" action="{{ route('service.offer_video_editing') }}" method="post">
            <input type="hidden" name="total_clips" value="">
            <input type="hidden" name="total_price" value="">
            <!-- <input type="hidden" name="enterprise" value="asdfasf">
            <input type="hidden" name="full_name" value="asfasfasf asdfasf">
            <input type="hidden" name="activity_domain" value="Advertising">
            <input type="hidden" name="civility" value="Mr">
            <input type="hidden" name="email" value="hdjsahfd@fsldfjlas.com">
            <input type="hidden" name="phone" value="0837754643"> -->

            <div class="row">
              <div class="col-md-6">
                <div class="pr-xl-3 wow fadeInUp">
                  <div class="s-title mb-4">{{ __("Choix de l’angle stratégique") }}</div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r1" name="strategies[]" value="Notoriété & Positionnement" required>
                    <label class="custom-control-label" for="r1">{{__("Notoriété & Positionnement")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r2" name="strategies[]" value="Recrutement Étudiant & Génération de Leads" required>
                    <label class="custom-control-label" for="r2">{{__("Recrutement Étudiant & Génération de Leads")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r3" name="strategies[]" value="Parcours & Réussites des Diplômés" required>
                    <label class="custom-control-label" for="r3">{{__("Parcours & Réussites des Diplômés")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r4" name="strategies[]" value="Expertise & Leadership d’Opinion" required>
                    <label class="custom-control-label" for="r4">{{__("Expertise & Leadership d’Opinion")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r5" name="strategies[]" value="Vie de Campus & Culture" required>
                    <label class="custom-control-label" for="r5">{{__("Vie de Campus & Culture")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r6" name="strategies[]" value="Zoom sur les Programmes & Points Forts" required>
                    <label class="custom-control-label" for="r6">{{__("Zoom sur les Programmes & Points Forts")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r7" name="strategies[]" value="Diversité, Équité et Inclusion (DEI)" required>
                    <label class="custom-control-label" for="r7">{{__("Diversité, Équité et Inclusion (DEI)")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r8" name="strategies[]" value="Partenariats Entreprises & Secteurs" required>
                    <label class="custom-control-label" for="r8">{{__("Partenariats Entreprises & Secteurs")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r9" name="strategies[]" value="Recherche & Innovation" required>
                    <label class="custom-control-label" for="r9">{{__("Recherche & Innovation")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r10" name="strategies[]" value="Engagement Communautaire & Impact Social" required>
                    <label class="custom-control-label" for="r10">{{__("Engagement Communautaire & Impact Social")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r11" name="strategies[]" value="Formation Continue & Programmes pour Cadres" required>
                    <label class="custom-control-label" for="r11">{{__("Formation Continue & Programmes pour Cadres")}}</label>
                  </div>
                  <div class="custom-control custom-radio mb-lg-3 mb-2">
                    <input type="checkbox" class="custom-control-input" id="r12" name="strategies[]" value="Incubateur startup" required>
                    <label class="custom-control-label" for="r12">{{__("Incubateur startup")}}</label>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="pl-xl-3 mt-md-0 mt-4 mb-5 wow fadeInUp">
                  <div class="s-title mb-4">{{__("Choix des packs")}}</div>
                  <div class="text-right"><i>{{__("Prix")}} (€)</i></div>
                  <table width="100%" border="0">
                    <tbody>
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="check1" name="packs[]" value="TikTok" data-price="490" required>
                            <label class="custom-control-label" for="check1">TikTok
                              <small>12 {{__("clips")}} (6 {{__("à")}} 10s)</small>
                            </label>
                          </div>
                        </td>
                        <td class="text-right f-price"></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="check2" name="packs[]" value="Instagram/Facebook" data-price="490" required>
                            <label class="custom-control-label" for="check2">
                              Instagram/Facebook
                              <small>12 {{__("clips")}} (6 {{__("à")}} 10s)</small>
                            </label>
                          </div>
                        </td>
                        <td class="text-right f-price"></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="check3" name="packs[]" value="YouTube" data-price="490" required>
                            <label class="custom-control-label" for="check3">
                              YouTube
                              <small>12 {{__("clips")}} (6 {{__("à")}} 10s)</small>
                            </label>
                          </div>
                        </td>
                        <td class="text-right f-price"></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="check4" name="packs[]" value="X" data-price="490" required>
                            <label class="custom-control-label" for="check4">
                              X
                              <small>12 {{__("clips")}} (6 {{__("à")}} 10s)</small>
                            </label>
                          </div>
                        </td>
                        <td class="text-right f-price"></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" id="check5" name="packs[]" value="LinkedIn" data-price="490" required>
                            <label class="custom-control-label" for="check5">
                              LinkedIn
                              <small>12 {{__("clips")}} (6 {{__("à")}} 10s)</small>
                            </label>
                          </div>
                        </td>
                        <td class="text-right f-price"></td>
                      </tr>
                      <tr>
                        <td>
                          <div class="custom-control custom-checkbox mb-1">
                            <input type="checkbox" class="custom-control-input" id="check6" name="packs[]" value="Snapchat" data-price="490" required>
                            <label class="custom-control-label" for="check6">
                              Snapchat
                              <small>12 {{__("clips")}} (6 {{__("à")}} 10s)</small>
                            </label>
                          </div>
                        </td>
                        <td class="text-right f-price"></td>
                      </tr>
                    </tbody>
                    <tfoot class="summary-offer">
                      <tr>
                        <td>{{__("Total clips")}} : <span class="text-primary" id="total-clips">0 {{__("clips")}}</span></td>
                        <td class="text-right">{{__("Total")}} : <span class="text-primary" id="total-price">0 €</span></td>
                      </tr>
                    </tfoot>
                  </table>
                  <div class="f-action text-center mt-4 wow zoomIn">
                    <button type="submit">{{__("Commander")}}</button>
                    <!-- <button type="button" data-toggle="modal" data-target="#videoEditingOfferModal">{{__("Commander")}}</button> -->
                  </div>
                </div>
              </div>
            </div>
          </form>
        </div>
      </section>
    </main>

    @include('web.layouts.footer')
@endsection

@section('modals')
    @include('web.component.modal.video_editing_offer_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>
      $(document).ready(function(){
        display_total_clips_and_price();

        $('.performance-carousel').slick({
          slidesToShow: 1,
          dots:true,
          arrows: false,
          autoplay: true,
        });

        $('#send-video-editing-offer').on('click', function () {
          let $modal = $(this).closest('.modal');
          let $form_offer = $('#form-video-editing-offer');
          let $form_pack = $('#form-video-editing-pack');

          let data = $form_offer.serialize();
          data += '&_token=' + "{{ csrf_token() }}" + '&current_locale=' + "{{ Config::get('app.locale') }}";
          data += '&' + $form_pack.serialize();

          show_loading();

          $.ajax({
            url: $form_offer.attr('action'),
            type: $form_offer.attr('method'),
            dataType: 'json',
            data: data,
          }).done(function (response) {
            if (response?.status == 'success') {
              $modal.modal('hide');
              $form_offer[0].reset();
              $form_pack[0].reset();
              $form_pack.find('.f-price').html('');
              $('.summary-offer').hide();
              $('#merciModal').modal('show');
            } else {
              show_errors(response?.errors, '#send-video-editing-offer');
            }
          }).always(function () {
            hide_loading();
          });
        });

        $('#form-video-editing-pack').on('submit', function (event) {
          event.preventDefault();

          let $form = $(this);

          let data = $form.serialize();
          // data += '&_token=' + "{{ csrf_token() }}" + '&current_locale=' + "{{ Config::get('app.locale') }}";

          show_confirm_offer();

          return false;
        });

        $('body').on('change', 'input[name="strategies[]"]', function () {
          let $this = $(this);

          if ($('input[name="strategies[]"]:checked')?.length > 0) {
            $('input[name="strategies[]"]').prop('required', false);
          } else {
            $('input[name="strategies[]"]').prop('required', true);
          }

          display_total_clips_and_price();
        });

        $('body').on('change', 'input[name="packs[]"]', function () {
          let $this = $(this);

          let pack_name = $this.val();
          let pack_price = $this.attr('data-price');
          console.log($this.val());

          if ($this.prop('checked') == false) {
            $this.closest('tr').find('.f-price').html('');
          }

          display_total_clips_and_price();
        });
      });

      function display_total_clips_and_price() {
        let $checked_strategies = $('input[name="strategies[]"]:checked');
        let $checked_packs = $('input[name="packs[]"]:checked');

        let clips = 0;
        let base_price = 1000;
        let checked_price = 0;
        let index = 1;

        $checked_packs.each(function () {
          let $row = $(this).closest('tr');
          let $price_tag = $row.find('.f-price');
          let price_tag_html = '';

          let pack_clips = 12;
          let pack_price = parseInt($(this).attr('data-price'));

          clips += pack_clips;
          checked_price += pack_price;

          if (index == 1) {
            price_tag_html = (1490 * Math.max(1, $checked_strategies?.length)) + ' €';
          } else {
            price_tag_html = '<span class="text-primary">+</span> ' + (490 * Math.max(1, $checked_strategies?.length)) + ' €';
          }

          $price_tag.html(price_tag_html);

          index++;
        });

        if (checked_price > 0) {
          checked_price += base_price;
          checked_price = checked_price * Math.max(1, $checked_strategies?.length);
          clips = clips * Math.max(1, $checked_strategies?.length);

          $('#total-clips').html(clips + ' clips');
          $('#total-price').html(checked_price + ' &euro;');

          $('input[name="total_clips"]').val(clips);
          $('input[name="total_price"]').val(checked_price);

          $('.summary-offer').show();
          $('input[name="packs[]"]').prop('required', false);

          // $('#videoEditingOfferModal').find('.offer-title').html($('input[name="strategies[]"]:checked').val());
        } else {
          $('.summary-offer').hide();
          $('input[name="total_clips"]').val(0);
          $('input[name="total_price"]').val(0);
          $('input[name="packs[]"]').prop('required', true);
        }
      }

      function show_confirm_offer() {
        let $modal = $('#videoEditingOfferModal');
        let $offer_title = $modal.find('.offer-title');
        let $form = $('#form-video-editing-offer');

        // let packs = $form.find('input[name="packs[]"]:checked');
        $modal.find('input[name="data"]').val($form.serialize());

        $modal.modal('show');

        // $offer_title.html('');
      }

      function show_errors(errors, form_selector) {
        var $form = $(form_selector);
        let error_fields = Object.keys(errors);

        console.log(error_fields);

        error_fields.forEach(function (field) {
            let $input = $form.find('[name="' + field + '"]');
            let $label = $form.find('label[for="contact-' + field + '"]');
            let $invalid_message = $form.find('.invalid-feedback[for="' + field + '"]');

            console.log('current field: ' + field);

            $input.addClass('border-red');
            $label.addClass('text-red');

            if (field === 'g-recaptcha-response') {
                $form.find('.invalid-message[for="captcha"]').show();
            }
        });

        let $first_error = $form.find('.border-red:first');
        $first_error.focus();
    }
    </script>
@endpush