@php
    $currentUrl = $currentUrl ?? null;
    $required = $required ?? false;
@endphp

<label class="form-label">Profile Picture @if ($required)<span class="text-danger">*</span>@endif</label>
<input type="file" name="profile_pic" id="profile_pic" class="form-control" accept=".jpg,.jpeg,.png,.gif">
<div class="mt-2" id="profilePicPreviewWrap" @if (! $currentUrl) style="display:none;" @endif>
    <img src="{{ $currentUrl ?: '' }}" id="profilePicPreview" alt="Profile picture"
         class="img-thumbnail" style="max-height:140px;max-width:220px;object-fit:contain;">
    @if ($currentUrl)
        <div class="small text-muted mt-1" id="profilePicCurrentNote">Current image. Choose a new file to replace it.</div>
    @endif
</div>

@push('scripts')
<script>
    $(function () {
        var originalSrc = $('#profilePicPreview').attr('src');

        $('#profile_pic').on('change', function () {
            var file = this.files && this.files[0];
            if (!file || !/^image\//.test(file.type)) {
                if (originalSrc) {
                    $('#profilePicPreview').attr('src', originalSrc);
                    $('#profilePicCurrentNote').show();
                } else {
                    $('#profilePicPreviewWrap').hide();
                }
                return;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#profilePicPreview').attr('src', e.target.result);
                $('#profilePicCurrentNote').hide();
                $('#profilePicPreviewWrap').show();
            };
            reader.readAsDataURL(file);
        });
    });
</script>
@endpush