@extends('layouts.master')
@section('main-body')
<div class="container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-lg-8">
                <h3>Update | My Profile</h3>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/myprofile">My Profile</a></li>
                    <li class="breadcrumb-item"><a href="/myprofile/edit">Update</a></li>
                </ol>
                <span class="pull-right">
                    <a href="{{url()->previous()}}">
                        <button class="btn btn-secondary">Cancel</button>
                    </a>
                    <x-confirmation title="Save" value="myprofile" button="Save">Are you sure you want to update your profile?</x-confirmation>
                </span>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header pb-0">
                    <h5>Form</h5>
                </div>
                <div class="card-body">
                    <div class="col-lg-12 row">
                        <div class="form-group col-lg-4 d-flex flex-column justify-content-between m-0">
                            <img class="mx-auto d-block image-previewer border-0 w-100" src="/assets/images/user/{!! $loggedUser->profile->image_url == '' ? 'avatar.png' : $loggedUser->profile->image_url !!}" alt="" id="preview-avatar">
                            <div class="d-flex justify-content-around w-100">
                                <a style="display: none;" class="btn btn-outline-dark p-2 pb-1 rounded-circle border-0 change-avatar" id="refresh-update"><i class="feather-24" data-feather="refresh-ccw"></i></a>
                                <a class="btn btn-outline-danger border-0 unchange-avatar" id="defaultAvatar"><i class="feather-24 mt-1" data-feather="trash" ></i></a>
                                <a class="btn btn-outline-primary border-0 unchange-avatar" data-bs-toggle="modal" data-bs-target="#staticBackdrop" onclick="configure()"id="webcam-opener"><i class="feather-24 mt-1" data-feather="camera"></i></a>
                                <div class="unchange-avatar">    
                                    <label for="image_url" class="m-0"><a class="btn btn-outline-secondary border-0"><i class="feather-24 mt-1" data-feather="image"></i></a></label>
                                    <input style="display: none" type="file" class="custom-file-input" name="image_url" accept="image/*" id="image_url"/>
                                </div>
                            </div>
                        </div>
                        {!! Form::open(['route' => ['myprofile.update'], 'method' => 'POST', 'id' => 'myprofile-form', 'class' => 'col-lg-8']) !!}
                            <input type="hidden" name="image_url" id="mydata" value="{!! $loggedUser->profile->image_url !!}">
                            <div class="form-group">
                                {!! Form::label('role_id', 'Role') !!}
                                {!! Form::text('role_id', $loggedUser->role->role, ['class' => 'form-control', 'disabled', 'readonly']) !!}
                            </div>
                            <div class="form-group">
                                {!! Form::label('first_name', 'First Name') !!}
                                {!! Form::text('first_name', $loggedUser->profile->first_name , ['class' => 'form-control', 'required' => 'required', 'maxlength' => '100', 'id' => 'firstNameId', 'onkeyup' => 'validation(this, "#first_nameValidation")']) !!}
                                <p class="help-block" style="color:red;" id="first_nameValidation"></p>
                            </div>
                            <div class="form-group">
                                {!! Form::label('last_name', 'Last Name') !!}
                                {!! Form::text('last_name', $loggedUser->profile->last_name, ['class' => 'form-control', 'required' => 'required', 'maxlength' => '100', 'id' => 'lastNameId', 'onkeyup' => 'validation(this, "#last_nameValidation")']) !!}
                                <p class="help-block" style="color:red;" id="last_nameValidation"></p>
                            </div>
                            <div class="form-group mb-2">
                                {!! Form::label('email', 'Email') !!}
                                {!! Form::email('email', $loggedUser->email, ['class' => 'form-control', 'readonly']) !!}
                            </div>
                            {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">Upload Profile Picture</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closeWebcam()"></button>
        </div>
        <div class="p-0 d-flex">
            <div style="position: relative; width: 500px; overflow: hidden;" class="bg-dark" id="my_camera">
            </div>
            <div style="right:25%; bottom: 15%;" class="position-absolute w-50 d-flex justify-content-around">
                <button style="display: none;" class="btn btn-outline-light p-2 pb-1 rounded-circle border-0 " id="refresh" onclick="configure()"><i class="feather-24 text-light" data-feather="refresh-ccw"></i></button>
                <button class="btn btn-outline-light p-2 pb-1 rounded-circle border-0" id="snap"><i class="feather-24 text-light" data-feather="camera"></i></button>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeWebcam">Close</button>
            <button type="button" class="btn btn-primary submit-form" id="saveAvatar" data-bs-dismiss="modal" disabled>Save</button>
        </div>
        </div>
    </div>
    </div>

@endsection

@section('import-scripts')

<script src="{{ asset('assets/js/webcam/webcam.min.js') }}"></script>
<script src="{{ asset('assets/js/croptool/ijaboCropTool.min.js') }}"></script> 
<script src="{{ asset('assets/js/myprofile/upload-profile.js') }}"></script>
<script src="{{ asset('assets/js/myprofile/field-validations.js') }}"></script>

@endsection

@section('page-script')
$('#image_url').ijaboCropTool({
    preview: '#preview-avatar',
    processUrl: '{{ route("myprofile.crop") }}',
    withCSRF: ['_token','{{ csrf_token() }}'],

    onSuccess:function(message, element, status){
        var raw_image = message.replace(/^data\:image\/\w+\;base64\,/, '');
        $('#mydata').val(raw_image);
        
        $('.submit-form').prop('disabled', false);
        $('.unchange-avatar').css('display', 'none');
        $('.change-avatar').css('display', 'block');
    },
    onError:function(message, element, status){
        console.log(element, status)
    }
});

$('#defaultAvatar').click(function() {
    var raw_image = '/assets/images/user/avatar.png';
    $('#preview-avatar').attr('src', raw_image);
    $('#mydata').val('');

    $('.submit-form').prop('disabled', false);
    $('.unchange-avatar').css('display', 'none');
    $('.change-avatar').css('display', 'block');
})

$('#refresh-update').click(function () {
    $('#preview-avatar').attr('src', '/assets/images/user/{{ $loggedUser->profile->image_url }}');
    $('#mydata').val('{{ $loggedUser->profile->image_url }}');

    $('.unchange-avatar').css('display', 'block');
    $('.change-avatar').css('display', 'none');
})

$('#saveAvatar').click(function() {
    var raw_image = $('#webcam').attr('src');
    $('#preview-avatar').attr('src', raw_image);

    $('.submit-is-disable').prop('disabled', false);
    $('.unchange-avatar').css('display', 'none');
    $('.change-avatar').css('display', 'block');
})

    @include('notifications.index')

@endsection