<?php
$datas = isset($args['data']) ?  $args['data'] : '';
$reverse = isset($datas['reverse']) && $datas['reverse'] == true ?  'md:flex-row-reverse' : 'md:flex-row';
$reverse_mobile = isset($datas['reverse_mobile']) && $datas['reverse_mobile'] == true ?  'max-md:flex-col-reverse' : 'max-md:flex-col';
$colonnes = isset($datas['colonnes']) ? $datas['colonnes'] : '';
$padding_mobile = isset($datas['padding_mobile']) ? $datas['padding_mobile'] : '';
$padding_desktop = isset($datas['padding_desktop']) ? $datas['padding_desktop'] : '';
$aspect_ratio = isset($datas['aspect_ratio']) ? $datas['aspect_ratio'] : 'auto';
$object_fit = isset($datas['object_fit']) ? $datas['object_fit'] : 'none';
$interval = isset($datas['interval']) ? $datas['interval'] : '40';
$interval_colonnes = isset($datas['interval_colonnes']) ? $datas['interval_colonnes'] : '40';
$couleur_de_fond = isset($datas['couleur_de_fond']) ? $datas['couleur_de_fond'] : '#ffffff';
$couleur_de_texte = isset($datas['couleur_de_texte']) ? $datas['couleur_de_texte'] : '#000000';
$vertical = isset($datas['alignement_vertical']) ? 'items-' . $datas['alignement_vertical'] : 'items-start';
$maxWidth = isset($datas['max_width'])  ?  $datas['max_width'] : '';
$content =  isset($datas['groupe']) ? $datas['groupe'] : '';
$colonne_1 = isset($content['colonne_1']) ? $content['colonne_1'] : '';
$colonne_2 = isset($content['colonne_2']) ? $content['colonne_2'] : '';

$rand = 'class' . uniqid();

if (is_array($datas)) :
?>
  <div class="<?php echo $rand ?>" style="background-color: <?php echo $couleur_de_fond ?>; color:<?php echo $couleur_de_texte ?>">
    <div class="hidden md:block" style="padding-top:<?php echo $padding_desktop; ?>px"></div>
    <div class="block md:hidden" style="padding-top:<?php echo $padding_mobile; ?>px"></div>
    <div class="container wysiwyg flex max-md:!gap-5 <?php echo $vertical . ' ' . $reverse_mobile . ' ' . $reverse ?> " style="">
      <?php
      switch ($colonnes) {
        case 'full':
          $left = 'md:basis-full';
          $right = 'hidden';
          break;
        case 'demi':
          $left = 'md:basis-6/12';
          $right = 'md:basis-6/12';
          break;
        case 'tier':
          $left = 'md:basis-4/12';
          $right = 'md:basis-8/12';
          break;
        case 'tier_reverse':
          $left = 'md:basis-8/12';
          $right = 'md:basis-4/12';
          break;
        case '5/12-7/12':
          $left = 'md:basis-5/12';
          $right = 'md:basis-7/12';
          break;
        case '7/12-5/12':
          $left = 'md:basis-7/12';
          $right = 'md:basis-5/12';
          break;
        case '1/3-1/3-1/3':
          $left = 'md:basis-4/12';
          $center = 'md:basis-4/12';
          $right = 'md:basis-4/12';
          break;
        default:

          break;
      } ?>


      <!-- col 1 -->
      <div class="flex flex-col w-full md:w-auto <?php echo $left ?>" style="gap:<?php echo $interval ?>px;">
        <?php
        if (!empty($colonne_1['texte']) && $colonne_1['texte'] != '') {
          echo '<div class="content scroll-appear">' . $colonne_1['texte'] . '</div>';
        }
        if (!empty($colonne_1['image']) && is_array($colonne_1['image'])) {
          echo '<div class="aspect-' . $aspect_ratio . ' relative w-full scroll-appear scroll-appear-image">';
          echo wp_get_attachment_image($colonne_1['image']['id'], 'medium', false, ['class' => 'absolute  object-' . $object_fit . ' object-center w-full h-full']);
          echo ' </div>';
        }
        if (!empty($colonne_1['lien']) && is_array($colonne_1['lien'])) {
          echo '<div><a href="' . $colonne_1['lien']['url'] . '" class="btn btn-primary w-full md:w-auto" target="' . $colonne_1['lien']['target'] . '">' . $colonne_1['lien']['title'] . '</a></div>';
        }
        ?>
      </div>

      <!-- // col-2 -->
      <div class="flex flex-col w-full md:w-auto <?php echo $right ?>" style="gap:<?php echo $interval ?>px;">
        <?php
        if (!empty($colonne_2['texte']) && $colonne_2['texte'] != '') {
          echo '<div class="content scroll-appear">' . $colonne_2['texte'] . '</div>';
        }

        if (!empty($colonne_2['image']) && is_array($colonne_2['image'])) {
          echo '<div class="aspect-' . $aspect_ratio . ' relative w-full scroll-appear scroll-appear-image">';
          echo wp_get_attachment_image($colonne_2['image']['id'], 'medium', false, ['class' => 'absolute  object-' . $object_fit . ' object-center w-full h-full']);
          echo ' </div>';
        }
        if (!empty($colonne_2['lien']) && is_array($colonne_2['lien'])) {
          echo '<div><a href="' . $colonne_2['lien']['url'] . '" class="btn btn-primary w-full md:w-auto" target="' . $colonne_2['lien']['target'] . '">' . $colonne_2['lien']['title'] . '</a></div>';
        }
        ?>
      </div>
    </div>

    <style>
      @media (max-width: 1024px) {
        <?php echo '.' . $rand . ' .container' ?> {
          gap: <?php echo $interval_colonnes; ?>px;

        }
      }

      @media (min-width: 900px) {
        <?php echo '.' . $rand . ' .container' ?> {
          gap: <?php echo $interval_colonnes; ?>px;
          <?php if ($maxWidth != '') { ?>max-width: <?php echo $maxWidth ?>px;
          <?php } ?>
        }
      }

      @media (max-width: 768px) {
        <?php echo '.' . $rand . ' .container' ?> {
          gap: <?php echo $interval_colonnes * 0.6; ?>px;
        }
      }
    </style>
    <div class="hidden md:block" style="padding-top:<?php echo $padding_desktop; ?>px"></div>
    <div class="block md:hidden" style="padding-top:<?php echo $padding_mobile; ?>px"></div>
  </div>

<?php endif; ?>