{{--Avatar--}}
<div class="form-group row">
    {{--Camera--}}
    <div class="col-6 col-md-3">
        <input type="hidden" id="avatar_picture" name="avatar_picture" form="add_refugee_form" value="{{ old('avatar_picture') }}" />
        <div id="open_camera_btn" class="btn btn-primary btn-block btn-lg">
            <i class="fa fa-camera"></i>
            Take Photo
        </div>
    </div>
    {{--Upload Picture--}}
    {{--<div class="col-6 col-md-3">--}}
        {{--<input type="file" id="avatar_file" name="avatar_file" accept="image/*" value="{{ old('avatar_file') }}"--}}
               {{--form="add_refugee_form" hidden>--}}
        {{--<div id="open_folder_btn" class="btn btn-primary btn-block btn-lg">--}}
            {{--Upload Picture--}}
        {{--</div>--}}
    {{--</div>--}}
</div>
<div class="form-group row">
    <div class="col-md-5 col-lg-5">
        <div id="webcam_result" class="img-box d-flex justify-content-center align-items-center"
             style="width: 300px; overflow: hidden;">

            @if(!empty(old('avatar_picture')))
                <img class="img-thumbnail" width="300" src="{{ old('avatar_picture') }}" />
            @endif
        </div>
    </div>
</div>

@include('components.camera_modal')

{{--Submit--}}
<hr/>
<div class="form-group row">
    <div class="col-6 col-md-4">
        <a href="#step2_tab" class="btn btn-primary btn-lg btn-block" data-toggle="back" data-current="3">
            <i class="fa fa-angle-double-left mr-1"></i> Back
        </a>
    </div>
    <div class="col-6 col-md-4 offset-md-4">
        <button id="add_refugee_submit" type="submit" class="btn btn-primary btn-lg btn-block p"
                form="add_refugee_form">
            Save <i class="fa fa-check ml-1"></i>
        </button>
    </div>
</div>

<script src="{{ mix('/js/webcam.js') }}" defer></script>