@php

// PARAMS
    $col            = $col ?? 6;
    $name           = $name ?? 'image_upload';
    $label          = $label ?? 'Upload Image';
    $default_image  = $default_image ?? null;
// PARAMS


    $preview_name   = $name.'_preview';
    $input_name     = $name.'_input';
    $output_name    = $name;
    $image_type     = $image_type ?? 'free';
@endphp

<div class="col-lg-{{ $col }} col-md-{{ $col }} col-sm-{{ $col }} col-xs-{{ $col*2 }}" >

    @php
        $image_src = loadAsset('/asset/images/placeholder.jpg');
        if (!empty($default_image) && file_exists(public_path($default_image))) {
                $image_src= asset($default_image);
        }
    @endphp

    <a href="#" id="preview" onclick="open_image_modal(this)" style="margin-top: 10px">
        <img src="{{ $image_src }}" name="{{ $preview_name }}" id="imagePreview" alt="Preview Image" width="100px"/>
    </a>
    <br>

    <label class="form-label" style="z-index: 2"  >{{ $label }}</label>
    <input type="file" class="form-control" accept="image/png , image/gif, image/jpg, image/jpeg" name="{{ $input_name }}"  />

    <input type="hidden" name="{{ $output_name }}"  />

    {{-- CROPPER START --}}
    @include('includes.cropper',['input_field'  =>$input_name,
                                'output_field'  =>$output_name,
                                'preview_field' =>$preview_name,
                                'image_type'    => $image_type
                                ])
            
    {{-- CROPPER END --}}


</div>

@push('include-js')

<script>
    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'); 

}


</script>

@endpush