crete zoomable for images in contarcts deteil page

app/Modules/Contracts/Http/Livewire/ContractsTableLivewire.php

@@ -62,13 +62,19 @@ private function appendMode(&$query)
                 ContractStatus::SUCCESS,
             ]);
         }
-        if ($this->mode == 'finished')
+        if ($this->mode == 'successed')
         {
             $query->whereIn('status', [
-                ContractStatus::DECLINE,
+                ContractStatus::SUCCESS,
                 ContractStatus::TREATY
             ]);
         }
+        if ($this->mode == 'declined')
+        {
+            $query->whereIn('status', [
+                ContractStatus::DECLINE
+            ]);
+        }
     }
     private function appendFilter(&$query)
     {

app/Modules/Contracts/Views/index.blade.php

@@ -11,9 +11,13 @@
                     onclick="this.form.submit()" {{ $mode == 'active' ? 'checked' : '' }}>
                 <label class="btn p-2 fs-5" for="mode_active">Активные</label>
 
-                <input type="radio" class="btn-check" name="mode" value="finished" id="mode_finished"
+                <input type="radio" class="btn-check" name="mode" value="successed" id="mode_successed"
-                    autocomplete="off" onclick="this.form.submit()" {{ $mode == 'finished' ? 'checked' : '' }}>
+                    autocomplete="off" onclick="this.form.submit()" {{ $mode == 'successed' ? 'checked' : '' }}>
-                <label class="btn p-2 fs-5" for="mode_finished">Оконченные</label>
+                <label class="btn p-2 fs-5" for="mode_successed">Успешные</label>
+
+                <input type="radio" class="btn-check" name="mode" value="declined" id="mode_declined"
+                    autocomplete="off" onclick="this.form.submit()" {{ $mode == 'declined' ? 'checked' : '' }}>
+                <label class="btn p-2 fs-5" for="mode_declined">Отмененные</label>
             </div>
             <div class="ms-auto hstack gap-2">
                 <button type="button" class="lh-1  btn bg-white p-3 fw-bold border rounded-3 border-1"

resources/views/clients/contract/index.blade.php

@@ -107,11 +107,23 @@ class="bi bi-pen" viewBox="0 0 16 16">
                     </div>
                 </div>
                 <div class="col col-lg-4 p-3">
-                    <div class="rounded-4 h-100 w-100" style="background-color:#ebeef5"
+                    <div class="rounded-4  ratio ratio-1x1 rounded overflow-hidden" style="background-color:#ebeef5"
-                        data-base64="{{ $contract->base64_image }}">
+                        data-base64="">
                         @if ($contract->base64_image)
-                            <img style='display:block;' class="h-100 w-100" id='base64image'
+                            <div class="w-100 h-100 d-flex align-items-center overflow-hidden zoomable-container"
-                                src='data:image/jpeg;base64, {{ $contract->base64_image }}' />
+                                style='background-image:url("data:image/jpeg;base64, {{ $contract->base64_image }}");'>
+                                <div class="text-center mx-auto zoom-button">
+                                    <svg class="text-white" xmlns="http://www.w3.org/2000/svg" width="70" height="70"
+                                        fill="currentColor" class="bi bi-zoom-in" viewBox="0 0 16 16">
+                                        <path fill-rule="evenodd"
+                                            d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11M13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0" />
+                                        <path
+                                            d="M10.344 11.742q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1 6.5 6.5 0 0 1-1.398 1.4z" />
+                                        <path fill-rule="evenodd"
+                                            d="M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5" />
+                                    </svg>
+                                </div>
+                            </div>
                         @endif
                     </div>
                 </div>
@@ -144,4 +156,48 @@ class="bi bi-record-circle-fill align-middle" viewBox="0 0 16 16">
             @endif
         </div>
     </div>
+    <style>
+        .zoomable-container {
+            backdrop-filter: blur(10px);
+            background-repeat: no-repeat;
+            background-size: contain;
+            background-position: center;
+        }
+
+        .zoomable-container:not(.zoomed):hover {
+            transform: scale(1.5);
+            background-color: rgb(33 33 33 / 60%);
+            background-blend-mode: multiply;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+
+        .zoomable-container.zoomed {
+            position: fixed;
+            top: 0;
+            left: 0;
+            margin: 0 auto;
+        }
+
+        .zoomable-container.zoomed .zoom-button {
+            display: none;
+        }
+    </style>
+
+    <script>
+        var images = document.querySelectorAll(".zoomable-container");
+        Array.prototype.forEach.call(images, function(img) {
+            // Do stuff here
+
+            img.addEventListener('click', function() {
+                console.log(img.classList.contains('zoomed'));
+                if (!img.classList.contains('zoomed')) {
+                    img.classList.add('zoomed');
+                } else {
+                    img.classList.remove('zoomed');
+                }
+
+            });
+        });
+    </script>
 @endsection