@extends('frontend.layouts.main2')

<title>{{ translate('Humsafar - Photo Upload') }}</title>
@section('content')

    <!-- ====main-section==== -->
    <main class="pb-20 xs:pb-0">
        <section class="flex items-start justify-between">
            <!-- ==left-banner-part== -->
            <div class="w-[400px] 2xl:w-[500px] h-screen hidden md:block">
                <img src="{{ asset('admin/registrationImages/' . $registrations->banner_image) }}"
                    alt="banner image"
                    class="w-[400px] 2xl:w-[500px] h-full fixed left-0 top-0">
                <picture class="hidden"><img
                        src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                        alt="banner image" loading="lazy"></picture>
            </div>
            <!-- ==right-all-content-part== -->
            <div
                class="md:pl-10 xl:pl-[60px] py-5 md:py-[30px] md:pb-[50px] flex-1 w-full">
                <!-- =logo-part= -->
                <div
                    class="flex md:items-center justify-between flex-col text-center md:flex-row">
                    <a href="./index.html"
                        class="pl-6 xs:pl-10 sm:pl-20 md:pl-0 fixed w-full left-0 top-0 backdrop-blur-[20px] py-5 md:static md:w-fit md:backdrop-blur-none md:py-0 z-20"><img
                            src="{{ asset('admin/Image/AppSettings/Logo/' . $generalSetting->	system_logo) }}"
                            alt="system_logo"
                            class="w-[152px] lg:w-[177.74px]"></a>
                    <!-- =small-device-image= -->
                    <picture class="py-7 md:hidden">
                        <img src="{{ asset('frontend/src/images/banner-image-02-alt.png') }}"
                            alt="banner image"
                            class="mb-9 w-full max-h-[400px] object-cover"
                            loading="lazy">
                    </picture>
                </div>
                <!-- =main-part= -->
                <div
                    class="px-6 xs:px-10 sm:px-20 md:px-10 xl:pl-[60px] xl:pr-6 pt-6 md:pt-20 w-full">

                    <form action="{{ route('partner_detail') }}" method="post" enctype="multipart/form-data" id="registerForm5">
                        @csrf

                    <div class="w-full">
                        <h4
                            class="text-black text-[22px] lg:text-[26px] font-bold">
                            {{ $registrations->my_image }}
                        </h4>

                        <div
                        class="mt-5 flex items-start justify-between gap-4 flex-col xl:flex-row">

                        <div
                          class="flex items-start justify-start gap-2.5 flex-wrap w-full flex-1 xs:items-center xs:justify-center md:justify-between">

                          <!-- Photo Upload Container -->
                          <div id="photo-upload-container" class="flex flex-wrap gap-4 w-full">
                            <!-- Check if imagesSession exists in the session -->
                            @if(session('imagesSession'))
                              @php
                                $images = session('imagesSession')['images'];
                              @endphp

                              @foreach($images as $index => $image)
                                @php
                                  $uniqueInputId = 'image_' . str_pad($index + 1, 2, '0', STR_PAD_LEFT);
                                @endphp
                                <div class="image-box w-full sm:w-[48%] xs:w-[189.97px] xs:max-w-[189.97px] h-[195px] bg-[#f7f7f7] rounded-[5px] overflow-hidden relative">
                                  <input type="file" name="image[]" id="{{ $uniqueInputId }}" accept="image/png, image/jpeg, image/jpg, image/webp" class="hidden" data-image-input>
                                  <label for="{{ $uniqueInputId }}" class="relative w-full h-full flex items-center justify-center cursor-pointer" data-dynamic-image-button>
                                    <span class="relative z-10">
                                      <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0332 12.9999C25.0332 13.7086 24.4586 14.2832 23.7499 14.2832L1.74987 14.2832C1.0411 14.2832 0.466536 13.7086 0.466536 12.9999C0.466536 12.2911 1.0411 11.7165 1.74987 11.7165L23.7499 11.7165C24.4586 11.7165 25.0332 12.2911 25.0332 12.9999Z" fill="#222628" />
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7499 0.716797C13.4586 0.716797 14.0332 1.29136 14.0332 2.00013L14.0332 24.0001C14.0332 24.7089 13.4586 25.2835 12.7499 25.2835C12.0411 25.2835 11.4665 24.7089 11.4665 24.0001L11.4665 2.00013C11.4665 1.29136 12.0411 0.716797 12.7499 0.716797Z" fill="#222628" />
                                      </svg>
                                    </span>
                                    <img style="display:block;" src="{{ asset('uploads/images/' . $image) }}" class="photo_receive_image" data-dynamic-image>
                                  </label>
                                  <input type="hidden" name="image[]" value="{{ $image }}">
                                  @if($index >= 1)
                                    <button type="button" class="remove-image-button"
                                            style="position: absolute; background: red; color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 10; top: 10px; right: 10px;">
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                      </svg>
                                    </button>
                                  @endif
                                </div>
                              @endforeach

                            @else
                              <div class="image-box w-full sm:w-[48%] xs:w-[189.97px] xs:max-w-[189.97px] h-[195px] bg-[#f7f7f7] rounded-[5px] overflow-hidden">
                                <input type="file" name="image[]" id="image_01" accept="image/png, image/jpeg, image/jpg, image/webp" class="hidden" data-image-input required>
                                <label for="image_01" class="relative w-full h-full flex items-center justify-center cursor-pointer" data-dynamic-image-button>
                                  <span class="relative z-10">
                                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                                      <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0332 12.9999C25.0332 13.7086 24.4586 14.2832 23.7499 14.2832L1.74987 14.2832C1.0411 14.2832 0.466536 13.7086 0.466536 12.9999C0.466536 12.2911 1.0411 11.7165 1.74987 11.7165L23.7499 11.7165C24.4586 11.7165 25.0332 12.2911 25.0332 12.9999Z" fill="#222628" />
                                      <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7499 0.716797C13.4586 0.716797 14.0332 1.29136 14.0332 2.00013L14.0332 24.0001C14.0332 24.7089 13.4586 25.2835 12.7499 25.2835C12.0411 25.2835 11.4665 24.7089 11.4665 24.0001L11.4665 2.00013C11.4665 1.29136 12.0411 0.716797 12.7499 0.716797Z" fill="#222628" />
                                    </svg>
                                  </span>
                                  <img src="" class="photo_receive_image" data-dynamic-image>
                                </label>
                              </div>
                            @endif
                          </div>
                        </div>
                      </div>

                        <div
                            class="flex sm:items-center sm:justify-between py-[28px] flex-col-reverse gap-[28px] sm:gap-0 sm:flex-row">
                            {{-- <h5
                                class="text-black text-xl lg:text-[30px] font-bold">
                                {{ $registrations->my_description }}
                                </h5> --}}
                                <a href="#" id="add-photo-button"
                                class="whitespace-nowrap p-3 sm:p-[14px] bg-red-color rounded-[5px] text-xs sm:text-sm font-semibold capitalize text-white w-fit self-center sm:self-start">
                                {{ translate('Add a new photo') }}
                            </a>
                        </div>
                        {{-- <div class="flex items-start gap-2">
                            <span
                                class="min-w-[30px] h-[30px] bg-[rgba(52,117,174,0.10)] flex items-center justify-center">
                                <svg width="14" height="18"
                                    viewBox="0 0 14 18" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M1.33268 4.64932L1.33269 10.8242C1.33269 11.4541 1.61712 12.0879 2.1232 12.7117C2.6283 13.3343 3.32129 13.9049 4.0511 14.3935C4.77772 14.8799 5.5195 15.2707 6.10308 15.5391C6.39471 15.6733 6.64212 15.7747 6.82379 15.8412C6.90479 15.8709 6.96856 15.892 7.01479 15.9058C7.06176 15.8932 7.12654 15.8736 7.20856 15.8461C7.38961 15.7854 7.63585 15.6923 7.92566 15.5679C8.50585 15.3188 9.24248 14.9517 9.96355 14.4823C10.6876 14.0109 11.3743 13.4503 11.875 12.8207C12.374 12.1932 12.666 11.5264 12.666 10.8242V4.64923C11.8574 4.13221 10.5962 3.5218 9.4251 3.0149C8.78271 2.73686 8.1818 2.49611 7.71979 2.32594C7.48814 2.24061 7.29657 2.17494 7.15472 2.13146C7.09228 2.11232 7.04401 2.09888 7.00892 2.0902C6.97359 2.09891 6.92496 2.1124 6.86204 2.13162C6.71958 2.17514 6.5272 2.24085 6.29461 2.32619C5.83074 2.49639 5.22738 2.73716 4.58258 3.01522C3.40692 3.52219 2.14175 4.13254 1.33268 4.64932ZM6.75718 0.950833C6.81421 0.937494 6.91104 0.916504 7.00906 0.916504C7.10721 0.916504 7.20403 0.937539 7.26106 0.950911C7.3318 0.967497 7.41184 0.990026 7.49664 1.01602C7.66705 1.06826 7.88079 1.14195 8.12303 1.23117C8.60881 1.4101 9.23004 1.65921 9.88852 1.94423C11.1913 2.50813 12.6982 3.23746 13.5847 3.8604C13.7402 3.96962 13.8327 4.1477 13.8327 4.33768V10.8242C13.8327 11.8675 13.3956 12.7829 12.7881 13.5468C12.1823 14.3087 11.3852 14.9488 10.6001 15.46C9.81195 15.9731 9.01394 16.3703 8.38592 16.64C8.07163 16.7749 7.79538 16.8798 7.57952 16.9522C7.47209 16.9882 7.37483 17.0178 7.29245 17.0392C7.23124 17.055 7.118 17.0832 7.00907 17.0832C6.89137 17.0832 6.77112 17.0496 6.71166 17.0327C6.6283 17.0089 6.53029 16.9761 6.42272 16.9368C6.20642 16.8576 5.92982 16.7436 5.61553 16.599C4.98726 16.3101 4.18955 15.8901 3.40211 15.363C2.61786 14.838 1.82222 14.1924 1.21722 13.4468C0.613189 12.7023 0.166021 11.8158 0.16602 10.8242L0.166016 4.33767C0.166017 4.1477 0.258528 3.96962 0.413963 3.8604C1.30089 3.23715 2.81316 2.50772 4.12061 1.94392C4.78154 1.65891 5.40517 1.40982 5.89274 1.23092C6.13587 1.14171 6.35031 1.06806 6.52118 1.01586C6.60621 0.989883 6.68639 0.967387 6.75718 0.950833Z"
                                        fill="#3475AE" />
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M9.43186 6.86551C9.69014 7.05808 9.74341 7.42356 9.55084 7.68184L9.44301 7.82606C9.37448 7.91757 9.27647 8.04822 9.1584 8.20497C8.92236 8.51833 8.60567 8.93663 8.28386 9.35532C7.96276 9.77308 7.63365 10.195 7.37368 10.5141C7.24459 10.6726 7.12713 10.8123 7.0339 10.9151C6.98858 10.9651 6.93986 11.0165 6.89335 11.0591C6.87129 11.0794 6.8369 11.1095 6.79501 11.1382C6.77414 11.1525 6.73961 11.1746 6.69479 11.195C6.65786 11.2118 6.56665 11.2498 6.44429 11.2498C6.27454 11.2498 6.1497 11.1781 6.11627 11.1589C6.06304 11.1283 6.01751 11.0938 5.98509 11.0676C5.9187 11.0137 5.85068 10.9481 5.78925 10.8854C5.66364 10.7572 5.51924 10.5936 5.38738 10.4391C5.25386 10.2826 5.12608 10.1271 5.03213 10.0112C4.98502 9.95314 4.94612 9.90467 4.91889 9.87058L4.88716 9.83076L4.87864 9.82002L4.87572 9.81633C4.67602 9.56352 4.71879 9.19633 4.9716 8.99663C5.2244 8.79694 5.59122 8.83999 5.79092 9.09278C5.79092 9.09278 5.79092 9.09278 5.79092 9.09278L5.79323 9.0957L5.80078 9.10523L5.83036 9.14235C5.85609 9.17455 5.89319 9.22078 5.93824 9.27633C6.02862 9.38777 6.14981 9.53525 6.27486 9.6818C6.3224 9.73752 6.36953 9.79195 6.41499 9.84346C6.43253 9.82213 6.4506 9.80004 6.4692 9.77722C6.71843 9.47131 7.03943 9.05993 7.35885 8.64435C7.67755 8.22972 7.99178 7.81467 8.22652 7.50303C8.34384 7.34728 8.44119 7.21752 8.50917 7.12674L8.61511 6.98505C8.80768 6.72677 9.17357 6.67294 9.43186 6.86551Z"
                                        fill="#3475AE" />
                                </svg>
                            </span>

                        </div> --}}
                        {{-- <textarea name="description"
                               class="resize-none rounded-[5px] w-full max-w-[820px] h-[144px] border-[1px] border-[#e4e4e4] bg-[#fdfdfd] focus:outline-none focus:border-red-color mb-20" required>{{ old('description', session('imageDescription', '')) }}</textarea> --}}

                        <!-- =page-buttons= -->
                        <div
                            class="flex items-center justify-center gap-3 pb-10">
                            <a href="{{ route('finding_detail') }}"
                                class="flex items-center justify-center gap-2.5 py-[15px] px-[32px] rounded-[5px] border-[1px] border-[#d0d0d0] duration-300 hover:border-red-color">
                                <svg width="17" height="13"
                                    viewBox="0 0 17 13" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M16.9004 6.4998C16.9004 6.11321 16.587 5.7998 16.2004 5.7998L1.20039 5.79981C0.813791 5.79981 0.500391 6.11321 0.500391 6.49981C0.500391 6.8864 0.813791 7.19981 1.20039 7.19981L16.2004 7.1998C16.587 7.1998 16.9004 6.8864 16.9004 6.4998Z"
                                        fill="#444444" />
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M5.68063 0.990524C5.39936 0.725294 4.95634 0.738297 4.69111 1.01957L5.20039 1.49981L5.70967 1.98005C5.9749 1.69878 5.9619 1.25575 5.68063 0.990524ZM5.20039 11.4998L5.70963 11.0195L5.51713 10.8149C5.39438 10.6843 5.21897 10.4974 5.00844 10.2724C4.58728 9.82219 4.02612 9.21998 3.46529 8.61104C2.90369 8.00126 2.34552 7.38808 1.92903 6.91476C1.79 6.75677 1.66914 6.61705 1.57034 6.49981C1.66914 6.38256 1.79 6.24284 1.92903 6.08485C2.34552 5.61154 2.90369 4.99835 3.46529 4.38857C4.02612 3.77963 4.58728 3.17743 5.00844 2.72724C5.21897 2.5022 5.39438 2.31529 5.51713 2.18468L5.70967 1.98005L5.20039 1.49981L4.69111 1.01957L4.49693 1.22593C4.37358 1.35719 4.19743 1.54488 3.98609 1.77079C3.5635 2.2225 2.99966 2.82757 2.43549 3.44014C1.87209 4.05188 1.30526 4.67445 0.878001 5.16C0.665241 5.40179 0.481713 5.61568 0.349258 5.77962C0.284148 5.86021 0.223358 5.93857 0.175935 6.00687C0.153092 6.03977 0.124034 6.08359 0.0978551 6.1319C0.0848794 6.15585 0.0658822 6.19314 0.0485597 6.23914C0.0355635 6.27365 0.000389099 6.37131 0.000389099 6.49981C0.000389099 6.6283 0.0355635 6.72596 0.0485597 6.76047C0.0658822 6.80647 0.0848794 6.84376 0.0978551 6.86771C0.124034 6.91602 0.153092 6.95984 0.175935 6.99274C0.223358 7.06104 0.284148 7.13941 0.349258 7.21999C0.481713 7.38393 0.665241 7.59782 0.878001 7.83961C1.30526 8.32516 1.87209 8.94773 2.43549 9.55947C2.99966 10.172 3.5635 10.7771 3.98609 11.2288C4.19743 11.4547 4.37358 11.6424 4.49693 11.7737L4.69104 11.98L5.20039 11.4998ZM5.20039 11.4998L5.70963 11.0195C5.97486 11.3008 5.9619 11.7439 5.68063 12.0091C5.39936 12.2743 4.95627 12.2612 4.69104 11.98L5.20039 11.4998Z"
                                        fill="#444444" />
                                </svg>
                                <span
                                    class="text-[#444] text-sm font-semibold">{{ translate('Back') }}</span>
                            </a>
                            <button type="submit" id="submitButton5"
                                    class="flex items-center justify-center gap-2.5 py-[15px] px-[32px] rounded-[5px] border-[1px] border-blue-color bg-blue-color text-white duration-300 hover:bg-red-color hover:border-red-color">
                                    <span class="text-sm font-semibold">{{ translate('Next') }}</span>
                                    <svg width="17" height="13" viewBox="0 0 17 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M-3.53054e-08 6.4998C-1.58067e-08 6.11321 0.313401 5.7998 0.7 5.7998L15.7 5.79981C16.0866 5.79981 16.4 6.11321 16.4 6.49981C16.4 6.8864 16.0866 7.19981 15.7 7.19981L0.7 7.1998C0.313401 7.1998 -5.4804e-08 6.8864 -3.53054e-08 6.4998Z" fill="white" />
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2198 0.990524C11.501 0.725294 11.9441 0.738297 12.2093 1.01957L11.7 1.49981L11.1907 1.98005C10.9255 1.69878 10.9385 1.25575 11.2198 0.990524ZM11.7 11.4998L11.1908 11.0195L11.3833 10.8149C11.506 10.6843 11.6814 10.4974 11.8919 10.2724C12.3131 9.82219 12.8743 9.21998 13.4351 8.61104C13.9967 8.00126 14.5549 7.38808 14.9714 6.91476C15.1104 6.75677 15.2313 6.61705 15.33 6.49981C15.2313 6.38256 15.1104 6.24284 14.9714 6.08485C14.5549 5.61154 13.9967 4.99835 13.4351 4.38857C12.8743 3.77963 12.3131 3.17743 11.8919 2.72724C11.6814 2.5022 11.506 2.31529 11.3833 2.18468L11.1907 1.98005L11.7 1.49981L12.2093 1.01957L12.4035 1.22593C12.5268 1.35719 12.703 1.54488 12.9143 1.77079C13.3369 2.2225 13.9007 2.82757 14.4649 3.44014C15.0283 4.05188 15.5951 4.67445 16.0224 5.16C16.2351 5.40179 16.4187 5.61568 16.5511 5.77962C16.6162 5.86021 16.677 5.93857 16.7245 6.00687C16.7473 6.03977 16.7764 6.08359 16.8025 6.1319C16.8155 6.15585 16.8345 6.19314 16.8518 6.23914C16.8648 6.27365 16.9 6.37131 16.9 6.49981C16.9 6.6283 16.8648 6.72596 16.8518 6.76047C16.8345 6.80647 16.8155 6.84376 16.8025 6.86771C16.7764 6.91602 16.7473 6.95984 16.7245 6.99274C16.677 7.06104 16.6162 7.13941 16.5511 7.21999C16.4187 7.38393 16.2351 7.59782 16.0224 7.83961C15.5951 8.32516 15.0283 8.94773 14.4649 9.55947C13.9007 10.172 13.3369 10.7771 12.9143 11.2288C12.703 11.4547 12.5268 11.6424 12.4035 11.7737L12.2093 11.98L11.7 11.4998ZM11.7 11.4998L11.1908 11.0195C10.9255 11.3008 10.9385 11.7439 11.2198 12.0091C11.501 12.2743 11.9441 12.2612 12.2093 11.98L11.7 11.4998Z" fill="white" />
                                    </svg>
                           </button>
                        </div>
                    </div>
                    </form>
                    <!-- ===small-device-footer=== -->
                    <section
                        class="xs:hidden w-full fixed bottom-0 left-0 flex items-center justify-center z-10 bg-white"
                        style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
                        <div
                            class="small_container flex items-center justify-between bg-white pt-2.5 pb-3 max-w-[400px] w-full  rounded-t-lg">
                            <!-- =left= -->
                            <div class="w-1/2 flex items-center gap-[20%]">
                                <a href="#"
                                    class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                                    <i class="ri-home-6-line text-2xl"></i>
                                    <p
                                        class="text-[12px] font-semibold -mt-1">Home</p>
                                </a>
                                <button
                                    class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                                    <i
                                        class="ri-search-2-line text-2xl"></i>
                                    <p
                                        class="text-[12px] font-semibold -mt-1">Search</p>
                                </button>
                            </div>
                            <!-- =right= -->
                            <div
                                class="w-1/2 flex items-center gap-[20%] justify-end">
                                <a href="#"
                                    class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                                    <i
                                        class="ri-account-circle-line text-2xl"></i>
                                    <p
                                        class="text-[12px] font-semibold -mt-1">My
                                        Account</p>
                                </a>
                                <button
                                    class="flex flex-col items-center justify-center text-black gap-0 hover:text-red-color duration-300">
                                    <i
                                        class="ri-message-3-line text-2xl"></i>
                                    <p
                                        class="text-[12px] font-semibold -mt-1">Blog</p>
                                </button>
                            </div>
                            <!-- =add-button= -->
                            <button
                                class="w-[56px] h-[56px] rounded-full bg-blue-color absolute left-1/2 text-white -translate-x-1/2 -top-4 flex items-center justify-center duration-300 hover:bg-red-color"
                                style="box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.3);">
                                <svg width="20" height="20"
                                    viewBox="0 0 20 20"
                                    fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M19.4922 10C19.4922 10.5477 19.0482 10.9917 18.5005 10.9917L1.50052 10.9917C0.952837 10.9917 0.508854 10.5477 0.508854 10C0.508854 9.45235 0.952837 9.00837 1.50052 9.00837L18.5005 9.00837C19.0482 9.00837 19.4922 9.45235 19.4922 10Z"
                                        fill="white" />
                                    <path fill-rule="evenodd"
                                        clip-rule="evenodd"
                                        d="M10.0005 0.508301C10.5482 0.508301 10.9922 0.952285 10.9922 1.49997L10.9922 18.5C10.9922 19.0477 10.5482 19.4916 10.0005 19.4916C9.45284 19.4916 9.00885 19.0477 9.00885 18.5L9.00885 1.49997C9.00885 0.952285 9.45284 0.508301 10.0005 0.508301Z"
                                        fill="white" />
                                </svg>
                            </button>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    </main>


@endsection
@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    let imageBoxCount = document.querySelectorAll('.photo_receive_image').length + 1;

    function handleImagePreview(input, imgElement) {
        const files = input.files;
        const reader = new FileReader();

        if (files.length > 0) {
            reader.onload = function (e) {
                imgElement.src = e.target.result;
                imgElement.style.display = 'block';
            };
            reader.readAsDataURL(files[0]); // Convert the first file to data URL
        }
    }

    // Add click event to the "Add Photo" button
    document.getElementById('add-photo-button').addEventListener('click', function (e) {
        e.preventDefault(); // Prevent the default anchor behavior

        // Get the container where the image boxes are located
        const container = document.getElementById('photo-upload-container');

        // Increment the image box count for a unique ID
        imageBoxCount++;
        const newInputId = `image_${String(imageBoxCount).padStart(2, '0')}`; // Unique ID for the new image input

        // Create a new div for the image upload box
        const newImageBox = document.createElement('div');
        newImageBox.classList.add('image-box', 'w-[48%]', 'xs:w-[189.97px]', 'xs:max-w-[189.97px]', 'h-[195px]', 'bg-[#f7f7f7]', 'rounded-[5px]', 'overflow-hidden', 'relative');

        // Set the HTML structure for the new image box
        newImageBox.innerHTML = `
            <input type="file" name="image[]" id="${newInputId}" accept="image/png, image/jpeg, image/jpg, image/webp" class="hidden" data-image-input required>
            <label for="${newInputId}" class="relative w-full h-full flex items-center justify-center cursor-pointer">
                <span class="relative z-10">
                    <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M25.0332 12.9999C25.0332 13.7086 24.4586 14.2832 23.7499 14.2832L1.74987 14.2832C1.0411 14.2832 0.466536 13.7086 0.466536 12.9999C0.466536 12.2911 1.0411 11.7165 1.74987 11.7165L23.7499 11.7165C24.4586 11.7165 25.0332 12.2911 25.0332 12.9999Z" fill="#222628" />
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12.7499 0.716797C13.4586 0.716797 14.0332 1.29136 14.0332 2.00013L14.0332 24.0001C14.0332 24.7089 13.4586 25.2835 12.7499 25.2835C12.0411 25.2835 11.4665 24.7089 11.4665 24.0001L11.4665 2.00013C11.4665 1.29136 12.0411 0.716797 12.7499 0.716797Z" fill="#222628" />
                    </svg>
                </span>
                <img src="" class="photo_receive_image" data-dynamic-image>
            </label>
            <button type="button" class="remove-image-button"
                style="position: absolute; background: red; color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 10; margin-top: -24px; margin-left: 165px;">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        `;

        // Append the new image box to the container
        container.appendChild(newImageBox);

        // Get the new file input and img tag
        const newFileInput = newImageBox.querySelector('input[type="file"]');
        const imgTag = newImageBox.querySelector('img[data-dynamic-image]');

        // Add an event listener for when the file input changes
        newFileInput.addEventListener('change', function () {
            handleImagePreview(newFileInput, imgTag);
        });

        // Add event listener for the remove button
        newImageBox.querySelector('.remove-image-button').addEventListener('click', function() {
            newImageBox.remove();
            // Update the imageBoxCount variable if needed
            imageBoxCount--;
        });
    });

    // Initial setup for existing images
    document.querySelectorAll('input[data-image-input]').forEach((input, index) => {
        const imgElement = input.closest('.image-box').querySelector('img[data-dynamic-image]');
        handleImagePreview(input, imgElement); // Pre-load existing images if applicable
        // Attach remove event listener
        input.closest('.image-box').querySelector('.remove-image-button').addEventListener('click', function() {
            input.closest('.image-box').remove();
            imageBoxCount--; // Update count when an image is removed
        });
    });
</script>






@endpush