@push('include-css')
    <style>
        .images{
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: flex-start;
            
        }
        .image_wrapper{
            max-width: 100px;            
            height: auto;
            position: relative;
        }
        .imagePreview{
            margin-top: 20px;
        }
        .receipt_img{
            object-fit: cover;
            height:auto;
            width:100px;
        }        
        .remove-button{
            width: 20px;
            height: 20px;
            border: none;
            color: white;
            cursor: pointer;
            font-weight: bold;
            margin: 0px -18px;
            text-align: center;
            position: absolute;
            border-radius: 20px;
            background: rgb(212, 31, 31);
            opacity: 0;
            font-size: 16px;
        }
        .image_wrapper:hover .remove-button {
            opacity: 1;
        }
        .pdfpreview-icon {
            font-size: 100px;
            background: #f0f0f0;
            color: #575757;
        }
    </style>
@endpush

@php 
    $is_view = request()->get('is_view') ?? 0;
@endphp

    <div style="max-height:185px">
        <label for="profile" class="uploadProfileLabel">
            <img width='170' src='{{ loadAsset('/asset/images/placeholder.jpg') }}'> 
        </label>
        <input name="voucher_attachments[]" id="profile" type="file" accept="image/png , image/gif, image/jpg, image/jpeg, image/bmp" onchange="previewAttachments()" style="visibility: hidden; display: none;" multiple>  
        <label for="profile" class="hide" >
            <i class="fas fa-upload"></i> &nbsp; {{__('lang.choose_a_photo')}}
        </label>
        <div class="images"></div>
        <a href="#" id="preview" onclick="open_image_modal(this)" style="margin-top: 10px">
            <img src="" class="imagePreview" alt="">
        </a>
    </div>
 
@push('include-js')

    <script src="{{asset ('js/custom/webcam.min.js')}}"></script>

    <script>
        var voucher_attachments = @json($voucher_attachments ??[]);
        var is_view = "{{ $is_view }}"
 
        var public_path = "{{ asset("") }}";
        var remove_attachment = "{{ route('voucher.remove_attachment') }}";

        function previewAttachments(){
            $('.images').html("");
            let previous_images = "";
            $.each(voucher_attachments,function(index,attachment){
                var fileExtension = attachment?.file_path.split('.').pop();
                console.log(fileExtension);
                $('.uploadProfileLabel').addClass('hide');
                previous_images += `
                                    <div class="image_wrapper ${attachment?.id}">
                                        <a href="#" id="preview" onclick="open_image_modal(this)" style="margin-top: 10px">
                                            ${fileExtension === 'pdf' ?
                                                `<i class="material-icons pdfpreview-icon">file_present</i>
                                                <img src="${public_path+attachment?.file_path}" class="receipt_img" style="display: none;" />` :
                                                `<img src="${public_path+attachment?.file_path}" class="receipt_img" />`}
                                        </a>
                                        
                                        <span class="remove-button" value="${attachment?.id}" onclick="remove_image(${attachment?.id})">×</span>
                                    </div>
                `;
            })

            $('.images').append(previous_images);

            var fileUrls = ['url'];
            let images_new = "";
            var files = $('#profile').prop('files');
  
            for (var i = 0; i < files.length; i++) {
                $('.uploadProfileLabel').addClass('hide');
                var reader = new FileReader();
                let file = files[i];
                reader.onload = function(event) {
                var fileUrl = event.target.result;
                let fileType = file.type;

                let new_image = `
                <div class="image_wrapper">
                    <a href="#" id="preview" onclick="open_image_modal(this)" style="margin-top: 10px">
                        ${fileType === 'application/pdf' ?
                        `<i class="material-icons pdfpreview-icon">file_present</i>
                        <img src="${fileUrl}" class="receipt_img" style="display: none;" />` :
                        `<img src="${fileUrl}"  class="receipt_img" />`}
                    </a>
                </div>
                    `;

                $('.images').append(new_image);


                fileUrls.push(fileUrl);
                };
                reader.readAsDataURL(files[i]);
            }

            $('.imagePreview').attr('src', '');
            $(".imagePreview").val('');
        }

        function resetImageContainer(){
            $('.imagePreview').attr('src', '');
            $(".imagePreview").val('');
            $('#profile').val('');
            $('.images').html("");
        }

        function remove_image(id) {

            if(is_view == 1){
                return false;
            }
       // Display a confirmation dialog box
        var confirmed = confirm("Are you sure you want to remove this image?");

        if (confirmed) {
            $.ajaxSetup({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                }
            });
            $.ajax({
            type: 'POST',
            dataType: 'json',
            url: remove_attachment,
            data: { id },
            success: function(data) {
                if (data.success == true) {
                $(`.${id}`).fadeOut('slow');
                if (Array.isArray(voucher_attachments)) {
                    voucher_attachments = voucher_attachments.filter(function(attachment) {
                    return attachment.id !== id;
                    });
                }
              } else {
                toastr.error('An Error Occurred');
               }
            }
            });
        }
     }


        $(document).ready(function() {
            previewAttachments();
        });

        

        function open_image_modal(e){
            var image_src = $(e).find('img').attr('src');

            $('#imagepreview').attr('src',image_src);
            $('#download-btn').attr('href' , image_src);
            $('#imagemodal').modal('show'); 

            $('#imagepreview').next('embed').remove();
            $('#imagepreview').show();
            if (image_src.toLowerCase().endsWith('.pdf') || image_src.startsWith('data:application/pdf')) {
                $('#imagepreview').hide();
                $('#imagepreview').after(`<embed src="${image_src}" width="100%" height="380px" type="application/pdf">`);
            }

        }

   </script>


@endpush