From d69330e74487629e47aa00e33f45f5c802ca3d22 Mon Sep 17 00:00:00 2001
From: Korina Cordero <cordero.korina@gmail.com>
Date: Tue, 15 Sep 2020 06:48:30 +0000
Subject: [PATCH] Add labels to JO pictures. Make pictures clickable. #490

---
 .../job-order/cmb.form.onestep.html.twig      | 41 +++++++++++++++++--
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/templates/job-order/cmb.form.onestep.html.twig b/templates/job-order/cmb.form.onestep.html.twig
index 549a7478..9990d644 100644
--- a/templates/job-order/cmb.form.onestep.html.twig
+++ b/templates/job-order/cmb.form.onestep.html.twig
@@ -544,22 +544,38 @@
                                         {% for key, picture in jo_pictures %}
                                             {% if key == 'image_1' %}
                                                 <div class="col-lg-2">
-                                                    <div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ picture }}');" ></div>
+                                                    <a href="#" class="image-pop">
+                                                        <img id="image-1-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
+                                                    </a> 
+                                                    <br>
+                                                    <label>Windscreen Sticker</label>
                                                 </div>
                                             {% endif %}
                                             {% if key == 'image_2' %}
                                                 <div class="col-lg-2">
-                                                    <div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ picture }}');" ></div>
+                                                    <a href="#" class="image-pop">
+                                                        <img id="image-2-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
+                                                    </a>
+                                                    <br>
+                                                    <label>Battery</label>
                                                 </div>
                                             {% endif %}
                                             {% if key == 'image_3' %}
                                                 <div class="col-lg-2">
-                                                    <div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ picture }}');" ></div>
+                                                    <a href="#" class="image-pop">
+                                                        <img id="image-3-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
+                                                    </a>
+                                                    <br>
+                                                    <label>Proof of Payment</label>
                                                 </div>
                                             {% endif %}
                                             {% if key == 'image_4' %}
                                                 <div class="col-lg-2">
-                                                    <div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ picture }}');" ></div>
+                                                    <a href="#" class="image-pop">
+                                                        <img id="image-4-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
+                                                    </a>
+                                                    <br>
+                                                    <label>Odometer</label>
                                                 </div>
                                             {% endif %}
 
@@ -580,6 +596,17 @@
                                         {% endfor %}
                                     </div> -->
                                 </div>
+                                <!-- modal for images -->
+                                <div class="modal fade" id="image-modal" tabindex="-1" role="dialog" aria-labelledby="imageModal" aria-hidden="true">
+                                    <div class="modal-dialog" data-dismiss="modal">
+                                        <div class="modal-content">              
+                                            <div class="modal-body">
+      	                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
+                                                <img src="" class="image-preview" style="width: 100%;" >
+                                            </div> 
+                                        </div>
+                                    </div>
+                                </div>
                             {% endif %}
 
                             <div class="m-form__seperator m-form__seperator--dashed"></div>
@@ -1943,6 +1970,12 @@ $(function() {
 
     });
 
+    // image modal
+    $('.image-pop').on('click', function() {
+        $('.image-preview').attr('src', $(this).find('img').attr('src'));
+        $('#image-modal').modal('show');   
+    });
+
 });
 </script>
 {% endblock %}