@push('include-css')
    <style>
        /* .images{
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
            
        } */
        .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: 2px -22px;
            text-align: center;
            position: absolute;
            border-radius: 20px;
            background: rgb(212, 31, 31) ;
            opacity: 0;
        }
        .image_wrapper:hover .remove-button {
            opacity: 1;
        }
    </style>
@endpush

@php

$voucher_type       = $voucher_type ?? null;
$voucher_id         = $voucher_id ?? null;
$type               = $type ?? null;

$previous_image     = null;
$voucher_attachment = null;



if($voucher_type && $voucher_id){
    $voucher_attachment = \App\Models\VoucherAttachmentDetail::where(['reference_id' => $voucher_id , 'voucher_type' => $voucher_type]);
    
    if ($type) {
        $voucher_attachment->where([ 'type' => $type]);
    }
    $voucher_attachment = $voucher_attachment->first()->file_path ?? null;

}

if ($type == 'fingerprint_image') {
    $previous_image = $voucher_attachment 
        ? loadAsset($voucher_attachment) 
        : loadAsset('/asset/images/thumb_img.jpg');
} else {
    $previous_image = $voucher_attachment 
        ? loadAsset($voucher_attachment) 
        : loadAsset('/asset/images/placeholder.jpg');
}
@endphp

<div style="height: 150px">
    <label for="{{ $name }}_profile" class="{{ $name }}_uploadProfileLabel">
        <img width="170" src="{{ $previous_image }}">
    </label>
    <input name="{{$name}}" 
           id="{{ $name }}_profile" 
           type="file" 
           accept="image/png, image/jpeg, image/jpg, image/gif, image/bmp" 
           onchange="previewAttachments('{{ $name }}')" 
           style="visibility: hidden; display: none;" 
    >

    
    <label for="{{ $name }}_profile" class="hide">
        <i class="fas fa-upload"></i> &nbsp; {{ __('lang.choose_a_photo') }}
    </label>
    
    <div class="images {{ $name }}_images"></div>
    
    <a href="#" id="preview" onclick="open_image_modal(this, '{{ $name }}')" style="margin-top: 10px">
        <img src="" class="imagePreview {{ $name }}_imagePreview" alt="">
    </a>
</div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div id="{{ $name }}_camera"></div>
    <input style="position: relative; top: -38px;" 
           class="btn btn-primary m-t-15 waves-effect hide snapShotBtn {{ $name }}_snapShotBtn" 
           type="button" 
           value="Take Snapshot" 
           onClick="take_snapshot('{{ $name }}')">
    <br/>
    
    <label for="{{ $name }}_profile" class="btn btn-warning waves-effect m-t-15">
        {{ __('lang.upload_image') }}
    </label>

    @if($show_webcam)
            <button class="btn btn-warning waves-effect m-t-15 webCam" 
                    type="button" 
                    data-name="{{ $name }}">
                {{ __('lang.from_web_cam') }}
            </button>
    @endif
    
    <input type="hidden" name="{{ $name }}_web_cam" class="image-tag {{ $name }}_image-tag">
    @if($show_update)
        <a class="btn m-t-15 btn-success waves-effect" id="update_image" href="javascript:void(0)" value="{{$item->id}}" data-name="{{ $name }}"   onclick="updateUploadedImages(this)">{{ __('lang.store_image') }}</a>
    @endif
</div>

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

<script>

    var update_attachment = "{{ route('voucher.update_attachment') }}";

    Webcam.set({
        width: 170,
        height: 220,
        dest_width: 170,
        dest_height: 170,
        crop_width: 170,
        crop_height: 170,
        image_format: 'jpeg',
        jpeg_quality: 90,
    });

    $(document).on('click', '.webCam', function() {
        const name = $(this).data('name');
        
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                Webcam.attach(`#${name}_camera`);
                $(`.${name}_uploadProfileLabel`).addClass('hide');
                $(`.${name}_snapShotBtn`).removeClass('hide');
            })
            .catch(function(error) {
                toastr["error"]('Webcam Not Available');
            });
        } else {
            toastr["error"]('Your browser does not support webcam functionality');
        }
    });

    function take_snapshot(name) {
        Webcam.snap(function(data_uri) {
            $(`.${name}_uploadProfileLabel`).addClass('hide');
            $(`.${name}_imagePreview`).attr('src', data_uri);
            $(`.${name}_image-tag`).val(data_uri);
        });
    }

    function previewAttachments(name) {
        $(`.${name}_images`).html("");
        var files = $(`#${name}_profile`).prop('files');

        for (var i = 0; i < files.length; i++) {
            $(`.${name}_uploadProfileLabel`).addClass('hide');
            var reader = new FileReader();
            reader.onload = function(event) {
                var fileUrl = event.target.result;
                let new_image = `
                <div class="image_wrapper">
                    <a href="#" id="preview" onclick="open_image_modal(this, '${name}')" style="margin-top: 10px">
                        <img src="${fileUrl}" class="receipt_img ${name}_receipt_img" />
                    </a>
                </div>
                `;
                $(`.${name}_images`).append(new_image);
            };
            reader.readAsDataURL(files[i]);
        }
    }

    
function updateUploadedImages(element) {
    let name    = $(element).data('name');  
    let sell_id = $(element).attr('value');  // Get the value of sell_id
    let file    = $('input[name="' + name + '"]').prop('files')[0]; 

    let formData = new FormData(); 	// Using it for File Uploads
    formData.append('sell_id', sell_id);

    formData.append( name , file);

    $.ajax({
        type: "POST",
        url: update_attachment,
        data: formData,
        processData: false, 
        contentType: false,
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        },
        success: function(response) {
            if (response.success) {
                toastr.success(response.message);
                window.location.reload();
            } else {
                toastr.error(response.message);
            }
        },
        error: function(error) {
            console.log('error', error);
        }
    });
}

    function open_image_modal(e, name) {
        var image_src = $(e).find('img').attr('src');
        $('#imagepreview').attr('src', image_src);
        $('#download-btn').attr('href', image_src);
        $('#imagemodal').modal('show');
    }
</script>

@endpush