From d3c96efac5ef7c599d15e911aa95f2578c238a64 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Thu, 4 May 2023 11:52:25 +0200
Subject: [PATCH] Enhance the booking info field display.

---
 .../views/components/booking_info_step.php    |  4 ++--
 assets/js/pages/booking.js                    | 21 +++++++++++++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/application/views/components/booking_info_step.php b/application/views/components/booking_info_step.php
index 0b3b9a29..34696559 100644
--- a/application/views/components/booking_info_step.php
+++ b/application/views/components/booking_info_step.php
@@ -27,7 +27,7 @@
         <h2 class="frame-title"><?= lang('customer_information') ?></h2>
 
         <div class="row frame-content">
-            <div class="col-12 col-md-6 field-col">
+            <div class="col-12 col-md-6 field-col mx-auto">
                 <?php if ($display_first_name): ?>
                     <div class="mb-3">
                         <label for="first-name" class="form-label">
@@ -81,7 +81,7 @@
                 <?php endif ?>
             </div>
 
-            <div class="col-12 col-md-6 field-col">
+            <div class="col-12 col-md-6 field-col mx-auto">
                 <?php if ($display_address) : ?>
                     <div class="mb-3">
                         <label for="address" class="form-label">
diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
index a484a181..fa366dc8 100644
--- a/assets/js/pages/booking.js
+++ b/assets/js/pages/booking.js
@@ -213,6 +213,27 @@ App.Pages.Booking = (function () {
      * Remove empty columns and center elements if needed.
      */
     function optimizeContactInfoDisplay() {
+        // If a column has only one control shown then move the control to the other column. 
+
+        const $firstCol = $('#wizard-frame-3 .field-col:first');
+        const $firstColControls = $firstCol.find('.form-control');
+        const $secondCol = $('#wizard-frame-3 .field-col:last');
+        const $secondColControls = $secondCol.find('.form-control');
+
+        if ($firstColControls.length === 1 && $secondColControls.length > 1) {
+            $firstColControls.each((index, controlEl) => {
+                $(controlEl).parent().insertBefore($secondColControls.first().parent());
+            });
+        }
+
+        if ($secondColControls.length === 1 && $firstColControls.length > 1) {
+            $secondColControls.each((index, controlEl) => {
+                $(controlEl).parent().insertAfter($firstColControls.last().parent());
+            });
+        }
+        
+        // Hide columns that do not have any controls displayed. 
+
         const $fieldCols = $(document).find('#wizard-frame-3 .field-col');
 
         $fieldCols.each((index, fieldColEl) => {