@push('styles')
    <style>
        #image-preview {
            border: 3px solid #bdc3c7;
            border-style: dotted;
            width: 300px;
            height: 300px;
            margin: auto;
            position: relative;
            overflow: hidden;
            background-color: #ffffff;
            color: #ecf0f1;
        }

        #image-preview input {
            line-height: 200px;
            font-size: 200px;
            position: absolute;
            opacity: 0;
            z-index: 10;
        }

        #image-preview label {
            position: absolute;
            z-index: 5;
            opacity: 0.9;
            cursor: pointer;
            background-color: #bdc3c7;
            width: 200px;
            height: 50px;
            font-size: 20px;
            line-height: 50px;
            text-transform: uppercase;
            top: 240px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
        }
    </style>
@endpush
<div id="image-preview">
    <label for="image-upload"
        id="image-label">{{ isset($family) && !empty($family->photo->file_name) ? 'Change Image' : 'Add Image' }}</label>
    <input type="file" name="photo" id="image-upload" />
</div>

@push('scripts')
    <script>
        $(document).ready(function() {
            $.uploadPreview({
                input_field: "#image-upload",
                preview_box: "#image-preview",
                label_field: "#image-label",
                label_default: "Add Image",
                label_selected: "Change Image"
            });
        });

        @if (isset($family) && $family->photo)
            $("#image-preview")
                .css('background',
                    'url({{ isset($family->photo->file_name) ? route('uploads.get_file', $family->photo->file_name) : '' }})'
                )
                .css('background-size', 'cover')
                .css('background-position', 'center center');
        @endif
    </script>
@endpush