<style>
    .image_preview {
        width: 100%;
        height: 250px;
        border-radius: 8px;
        overflow: hidden
    }

    .image_preview img{
        widows: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
</style>

<div class="row mb-3">
    <label for="thumbnail" class="form-label ol-form-label col-sm-2 col-form-label">{{get_phrase('Thumbnail')}}</label>
    <div class="col-sm-10">
        <input type="file" name="thumbnail" class="form-control ol-form-control" id="thumbnail" accept="image/*" />
    </div>

    <div class="offset-md-2 offset-lg-3 col-md-10 col-lg-6 fpb-7 mt-3">
        <div class="image_preview">
            <img src="{{ asset($bootcamp_details->thumbnail) }}" id="preview_thumbnail" width="100%" alt="blog-thumbnail">
        </div>
    </div>
</div>

@push('js')
    <script>
        $(function() {
            $('#banner, #thumbnail').change(function(e) {
                e.preventDefault();

                var img_type = $(this).attr('id');
                var x = URL.createObjectURL(event.target.files[0]);
                $('#preview_' + img_type).attr('src', x);
            });
        });
    </script>
    <script type="text/javascript">
        "use strict";
        document.getElementById('thumbnail').addEventListener('change', function(event) {
            const file = event.target.files[0]; // Get the selected file
            const maxSize = 2 * 1024 * 1024; // 2 MB in bytes

            // Get the message from Laravel's get_phrase function
            const maxFileSizeMessage = '{{ get_phrase('The maximum file size is 2 MB.') }}';

            if (file && file.size > maxSize) {
                // If the file is larger than 2 MB, show an alert and reset the input
                alert(maxFileSizeMessage);  // Use the translated message
                event.target.value = ''; // Clear the selected file
            }
        });
    </script>
@endpush
