New patient - home/cell numbers - move & swap

resources/views/app/new-patient.blade.php

@@ -44,11 +44,27 @@
                             <input class='form-control' type='date' name='dateOfBirth' max="{{ date('Y-m-d') }}" required>
                         </div>
                         <div class='form-group mb-3'>
-                            <label class='control-label'>Home Phone Number </label>
+                            <label class='control-label d-flex align-items-center'>
+                                <span>Home Phone Number</span>
+                                <a href="#"
+                                   class="ml-2 px-1 on-hover-opaque hpn-to-cpn">
+                                    <i class="fa fa-arrow-down"></i>
+                                </a>
+                                <a href="#"
+                                   class="ml-2 px-1 on-hover-opaque swap-pns">
+                                    <i class="fa fa-retweet"></i>
+                                </a>
+                            </label>
                             <input class='form-control' stag-input-phone type='tel' name='homeNumber'>
                         </div>
                         <div class='form-group mb-3'>
-                            <label class='control-label'>Cell Phone Number </label>
+                            <label class='control-label d-flex align-items-center'>
+                                <span>Cell Phone Number</span>
+                                <a href="#"
+                                   class="ml-2 px-1 on-hover-opaque cpn-to-hpn">
+                                    <i class="fa fa-arrow-up"></i>
+                                </a>
+                            </label>
                             <input class='form-control' stag-input-phone type='tel' name='cellNumber'>
                         </div>
                         <div class='form-group mb-3'>
@@ -82,6 +98,28 @@
         (function() {
             function init() {
                 let im = new Inputmask("(999) 999-9999").mask('[stag-input-phone]');
+                $(document)
+                    .off('click.hpn-to-cpn', '.hpn-to-cpn')
+                    .on('click.hpn-to-cpn', '.hpn-to-cpn', function() {
+                        $('[name="cellNumber"]').val($('[name="homeNumber"]').val());
+                        $('[name="homeNumber"]').val('');
+                        return false;
+                    });
+                $(document)
+                    .off('click.cpn-to-hpn', '.cpn-to-hpn')
+                    .on('click.cpn-to-hpn', '.cpn-to-hpn', function() {
+                        $('[name="homeNumber"]').val($('[name="cellNumber"]').val());
+                        $('[name="cellNumber"]').val('');
+                        return false;
+                    });
+                $(document)
+                    .off('click.swap-pns', '.swap-pns')
+                    .on('click.swap-pns', '.swap-pns', function() {
+                        let hpn = $('[name="homeNumber"]').val();
+                        $('[name="homeNumber"]').val($('[name="cellNumber"]').val());
+                        $('[name="cellNumber"]').val(hpn);
+                        return false;
+                    });
             }
             addMCInitializer('new-patient', init, '#newPatientContainer');
         }).call(window);