@extends('layouts.master')
@section('main-body')
<div class="container-fluid">
    <div class="page-header">
        <div class="row">
            <div class="col-sm-12">
                <h3>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="/myprofile/edit" class="btn btn-primary">Update</a>
                    <a href="/myprofile/change-password" type="button" class="btn btn-primary" id="" value="id of the user">Change Password</a>
                    <a href="{{url()->previous()}}" class="btn btn-light">Back</a>
                </span>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="user-profile">
        <div class="row">
            <div class="col-sm-4">
                <div class="default-according style-1 faq-accordion job-accordion">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="p-0">
                                    <button class="btn btn-link ps-0" data-bs-toggle="collapse" data-bs-target="#collapseicon2" aria-expanded="true" aria-controls="collapseicon2">Account Information</button>
                                    </h5>
                                </div>
                                <div class="collapse show" id="collapseicon2" aria-labelledby="collapseicon2" data-parent="#accordion">
                                    <div class="card-body post-about">
                                        <ul>
                                            <li class="text-center border-bottom flex-column position-relative">
                                                <img style="width: 13em" class="mx-auto d-block w-50 pb-2 d-block image-previewer rounded-circle border-0" src="/assets/images/user/{!! $loggedUser->profile->image_url == '' ? 'avatar.png' : $loggedUser->profile->image_url !!}" alt="">
                                                <a style="width: 50%; height:95%" class="upload-profile position-absolute" data-bs-toggle="modal" data-bs-target="#staticBackdrop" onclick="configure()" id="webcam-opener">
                                                    <div style="padding: 33% 0">
                                                        <i class="feather-24" data-feather="camera"></i>
                                                        <span><br/>Change Profile</span>
                                                    </div>
                                                </a>
                                            </li>
                                            <li>
                                                <div class="icon"><i data-feather="user"></i></div>
                                                <div>
                                                    <h5>{!! $loggedUser->username !!}</h5>
                                                    <p>username</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon"><i data-feather="box"></i></div>
                                                <div>
                                                    <h5>{!! $loggedUser->role->role !!}</h5>
                                                    <p>User role</p>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="icon"><i data-feather="mail"></i></div>
                                                <div>
                                                    <h5>{!! $loggedUser->email !!}</h5>
                                                    <p>email</p>
                                                </div>
                                            </li>
                                            @if (!empty($loggedUser->created_at))
                                            <li>
                                                <div class="icon"><i data-feather="clock"></i></div>
                                                <div>
                                                    <h5>{!! date('m-d-Y H:i:s', strtotime($loggedUser->created_at)) !!}</h5>
                                                    <p>Created by: {!! $loggedUser->createdBy->first_name !!} {!! $loggedUser->createdBy->last_name !!}</p>
                                                </div>
                                            </li>
                                            @endif
                                            @if (!empty($loggedUser->updated_at))
                                            <li>
                                                <div class="icon"><i data-feather="clock"></i></div>
                                                <div>
                                                    <h5>{!! date('m-d-Y H:i:s', strtotime($loggedUser->updated_at)) !!}</h5>
                                                    <p>Modified by: {!! $loggedUser->updatedBy->first_name !!} {!! $loggedUser->updatedBy->last_name !!}</p>
                                                </div>
                                            </li>
                                            @endif
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-8">
                <div class="default-according style-1 faq-accordion job-accordion">
                    <div class="row">
                        <div class="col-xl-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5 class="p-0">
                                        User Profile
                                    </h5>
                                </div>
                                <div class="card-body post-about">
                                    <div class="col-lg-6">
                                        <ul>
                                            <div class="icon"><i data-feather="user"></i> Personal Information</div>
                                            <li>
                                                <div>
                                                    <h5>First Name: <b>{!! $loggedUser->profile->first_name !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Middle Name: <b>{!! $loggedUser->profile->middle_name !!}</b></h5>
                                                </div>
                                            </li>
                                            <li>
                                                <div>
                                                    <h5>Last Name: <b>{!! $loggedUser->profile->last_name !!}</b></h5>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<form id="myform" method="POST" action="{{ route('myprofile.upload') }}">
    <input type="hidden" name="_token" id="csrf-token" value="{{ Session::token() }}" />
    <input id="mydata" type="hidden" name="mydata" value=""/>
</form>

<!-- 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 closeWebcam" data-bs-dismiss="modal" aria-label="Close" id="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="removeAvatar"><i class="feather-24 text-light" data-feather="trash"></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 id="select-file">    
                <label for="image_url" class="m-0" onclick="initialize()"><a class="btn btn-outline-light p-2 pb-1 rounded-circle border-0" ><i class="feather-24 text-light" 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>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary closeWebcam" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary submit-form" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal" disabled>Save</button>
    </div>
    </div>
</div>
</div>

<!-- Modal 2 -->
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalToggleLabel2">Save</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to save changes?
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#staticBackdrop"  data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary submit-form" id="saveAvatar">Yes</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>

@endsection
    
@section('page-script') 

$('#image_url').ijaboCropTool({
    processUrl: '{{ route("myprofile.crop") }}',
    withCSRF: ['_token','{{ csrf_token() }}'],

    onSuccess:function(message){
        var myModal = new bootstrap.Modal(document.getElementById('staticBackdrop'))
        myModal.show()

        $('#my_camera').html(
            '<img style="width: 100%;" id="webcam" src="'+message+'">bjkadsbdjklasbladjks'
        );

        var raw_image = message.replace(/^data\:image\/\w+\;base64\,/, '');
        $('#mydata').val(raw_image);
        
        displayButtons('none', 'none', 'none', 'none', false);

    },
    onError:function(message){
        alert(message)
    }
});

@include('notifications.index')

@endsection