@extends( 'layout.dashboard', [ 'saveDialog' => true ] )


@push( 'scripts' )
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
    <script>
//        var editor = new Quill( '.editor' );
var desc = new Quill( '.desc-editor', {
    modules: {
        toolbar: [
            [ 'bold', 'italic' ],
            [ 'link', 'blockquote', 'code-block', 'image' ],
            [ { list: 'ordered' }, { list: 'bullet' } ]
        ]
    },
    placeholder: 'Write a bit about yourself...',
    theme: 'snow'
} );

var education_information = new Quill( '.education-editor', {
    modules: {
        toolbar: [
            [ 'bold', 'italic' ],
            [ 'link', 'blockquote', 'code-block', 'image' ],
            [ { list: 'ordered' }, { list: 'bullet' } ]
        ]
    },
    placeholder: 'Write a bit about your education...',
    theme: 'snow'
} );

$( 'form' ).on( 'submit', function(e) {
    var about = document.querySelector( 'input[name=description]' );
    var education = document.querySelector( 'input[name=education_information]' );

    about.value = JSON.stringify( desc.getContents() );
    education.value = JSON.stringify( education_information.getContents() );

//    return false;
});
    </script>
@endpush

@push( 'styles' )
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endpush

@section( 'autocomplete' )

    <script>
        function initAutocomplete() {
            var options = {
                types: [ 'geocode' ],
                componentRestrictions: { country: "ca" }
            };

            var input = document.getElementById( 'autocomplete-input' );
            if ( input ) {
                var autocomplete = new google.maps.places.Autocomplete( input, options );

                google.maps.event.addListener( autocomplete, 'place_changed', function () {
                    var place = autocomplete.getPlace();
                    console.log( place );
                    var lat = place.geometry.location.lat();
                    var lng = place.geometry.location.lng();

                    $( '#lat' ).val( lat );
                    $( '#lng' ).val( lng );
                } );
            }
        }
    </script>
@endsection

@section( 'content' )

    <!-- Dashboard Content
	================================================== -->
    <div class="dashboard-content-container" data-simplebar>
        <div class="dashboard-content-inner">

            <!-- Dashboard Headline -->
            <div class="dashboard-headline">
                <h3>Settings</h3>

            </div>

            <!-- Row -->
            <form class="row" enctype="multipart/form-data" method="post" action="{{ route( 'settings' ) }}">
                @csrf
                {{ method_field( 'PUT' ) }}
                <!-- Dashboard Box -->
                <div class="col-xl-12">
                    <div class="dashboard-box margin-top-0">

                        <!-- Headline -->
                        <div class="headline">
                            <h3><i class="icon-material-outline-account-circle"></i> My Account</h3>
                        </div>

                        <div class="content with-padding padding-bottom-0">

                            <div class="row">

                                <div class="col-auto">
                                    <div class="avatar-wrapper" data-tippy-placement="bottom" title="Change Avatar">
                                        <img class="profile-pic" src="{{ $user->profile->attachment->url }}" alt="" />
                                        <div class="upload-button"></div>
                                        <input name="profile_picture" class="file-upload" type="file" accept="image/*" />
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="row">

                                        <div class="col-xl-6">
                                            <div class="submit-field">
                                                <h5>First Name</h5>
                                                <input type="text" name="first_name" class="with-border" value="{{ $user->first_name }}">
                                            </div>
                                        </div>

                                        <div class="col-xl-6">
                                            <div class="submit-field">
                                                <h5>Last Name</h5>
                                                <input type="text" name="last_name" class="with-border" value="{{ $user->last_name }}">
                                            </div>
                                        </div>

                                        <div class="col-xl-4">
                                            <!-- Account Type -->
                                            <div class="submit-field">
                                                <h5>Account Type</h5>
                                                <div class="account-type">
                                                    @hasrole( 'freelancer' )
                                                    <div>
                                                        <input type="radio" name="account-type-radio" id="freelancer-radio" class="account-type-radio" checked />
                                                        <label for="freelancer-radio" class="ripple-effect-dark"><i class="icon-material-outline-account-circle"></i> Worker</label>
                                                    </div>
                                                    @endhasrole

                                                    @hasrole( 'employer' )
                                                    <div>
                                                        <input type="radio" name="account-type-radio" id="employer-radio" class="account-type-radio" checked />
                                                        <label for="employer-radio" class="ripple-effect-dark"><i class="icon-material-outline-business-center"></i> Employer</label>
                                                    </div>
                                                    @endhasrole

                                                    @hasrole( 'administrator' )
                                                        <span>Administrator</span>
                                                    @endhasrole

                                                    @hasrole( 'moderator' )
                                                        <span>Moderator</span>
                                                    @endhasrole
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xl-4">
                                            <div class="submit-field">
                                                <h5>Postcode</h5>
                                                <input type="text" value="{{ old( 'postcode', $user->meta->postcode ) }}" name="postcode" class="with-border">
                                            </div>
                                        </div>

                                        <div class="col-xl-4">
                                            <div class="submit-field">
                                                <h5>Email</h5>
                                                <input type="email" name="email" class="with-border" value="{{ $user->email }}">
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Dashboard Box -->
                <div class="col-xl-12">
                    <div class="dashboard-box">

                        <!-- Headline -->
                        <div class="headline">
                            <h3><i class="icon-material-outline-face"></i> My Profile</h3>
                        </div>

                        <div class="content">
                            <ul class="fields-ul">
                                @hasrole( 'freelancer' )
                                <li>
                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="submit-field">
                                                <div class="bidding-widget">
                                                    <!-- Headline -->
                                                    <span class="bidding-detail">Set your minimal <strong>daily</strong> rate</span>

                                                    <!-- Slider -->
                                                    <div class="bidding-value margin-bottom-10">$<span id="biddingVal"></span>
                                                    </div>
                                                    <input class="bidding-slider" name="hourly_rate" type="text" value="{{ $user->meta->hourly_rate }}" data-slider-handle="custom" data-slider-currency="$" data-slider-min="5" data-slider-max="150" data-slider-value="{{ $user->meta->hourly_rate }}" data-slider-step="1" data-slider-tooltip="hide" />
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xl-6">
                                            <div class="submit-field">
                                                <h5>Skills
                                                    <i class="help-icon" data-tippy-placement="right" title="Add up to 10 skills"></i>
                                                </h5>

                                                <!-- Skills List -->
                                                <div class="keywords-container">
                                                    <div class="keyword-input-container">
                                                        <input type="text" class="keyword-input with-border" placeholder="e.g. Angular, Laravel" />
                                                        <input value="{{ implode( ',', $user->skill_names ) }}" name="skills" type="hidden" />
                                                        <button type="button" class="keyword-input-button ripple-effect">
                                                            <i class="icon-material-outline-add"></i></button>
                                                    </div>
                                                    <div class="keywords-list"></div>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </div>
                                        </div>

{{--                                        <div class="col-xl-4">--}}
{{--                                            <div class="submit-field">--}}
{{--                                                <h5>Attachments</h5>--}}

{{--                                                <!-- Attachments -->--}}
{{--                                                <div class="attachments-container margin-top-0 margin-bottom-0">--}}
{{--                                                    <div class="attachment-box ripple-effect">--}}
{{--                                                        <span>Resume</span>--}}
{{--                                                        <i class="uploadButton-file-name">DOCX</i>--}}

{{--                                                        <!-- Upload Button -->--}}
{{--                                                        <div class="uploadButton margin-top-0">--}}
{{--                                                            <input name="resume" class="uploadButton-input" type="file" accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf" id="upload" />--}}
{{--                                                            <label style="height:36px;" class="uploadButton-button ripple-effect button-small" for="upload">Upload Files</label>--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}

{{--                                                    <div class="attachment-box ripple-effect">--}}
{{--                                                        <span>Bio/Cover Letter</span>--}}
{{--                                                        <i>DOCX</i>--}}

{{--                                                        <!-- Upload Button -->--}}
{{--                                                        <div class="uploadButton margin-top-0">--}}
{{--                                                            <input name="bio_cover" class="uploadButton-input" type="file" accept="application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/pdf" id="upload" />--}}
{{--                                                            <label style="height:36px;" class="uploadButton-button ripple-effect button-small" for="upload">Upload Files</label>--}}
{{--                                                        </div>--}}
{{--                                                    </div>--}}

{{--                                                </div>--}}
{{--                                                <span class="d-block">Maximum file size: 10 MB</span>--}}

{{--                                                <div class="clearfix"></div>--}}

{{--                                            </div>--}}
{{--                                        </div>--}}
                                    </div>
                                </li>
                                @endhasrole
                                <li>
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="submit-field">
                                                <h5>Tagline</h5>
                                                <input type="text" name="tagline" class="with-border" value="{{ $user->meta->tagline }}">
                                            </div>
                                        </div>

                                        {{--<div class="col-xl-6">--}}
                                            {{--<div class="submit-field">--}}
                                                {{--<h5>Nationality</h5>--}}
                                                {{--<select class="select2 with-border" data-size="7" title="Select Job Type">--}}
                                                    {{--<option value="AR">Argentina</option>--}}
                                                    {{--<option value="AM">Armenia</option>--}}
                                                    {{--<option value="AW">Aruba</option>--}}
                                                    {{--<option value="AU">Australia</option>--}}
                                                    {{--<option value="AT">Austria</option>--}}
                                                    {{--<option value="AZ">Azerbaijan</option>--}}
                                                    {{--<option value="BS">Bahamas</option>--}}
                                                    {{--<option value="BH">Bahrain</option>--}}
                                                    {{--<option value="BD">Bangladesh</option>--}}
                                                    {{--<option value="BB">Barbados</option>--}}
                                                    {{--<option value="BY">Belarus</option>--}}
                                                    {{--<option value="BE">Belgium</option>--}}
                                                    {{--<option value="BZ">Belize</option>--}}
                                                    {{--<option value="BJ">Benin</option>--}}
                                                    {{--<option value="BM">Bermuda</option>--}}
                                                    {{--<option value="BT">Bhutan</option>--}}
                                                    {{--<option value="BG">Bulgaria</option>--}}
                                                    {{--<option value="BF">Burkina Faso</option>--}}
                                                    {{--<option value="BI">Burundi</option>--}}
                                                    {{--<option value="KH">Cambodia</option>--}}
                                                    {{--<option value="CM">Cameroon</option>--}}
                                                    {{--<option value="CA">Canada</option>--}}
                                                    {{--<option value="CV">Cape Verde</option>--}}
                                                    {{--<option value="KY">Cayman Islands</option>--}}
                                                    {{--<option value="CO">Colombia</option>--}}
                                                    {{--<option value="KM">Comoros</option>--}}
                                                    {{--<option value="CG">Congo</option>--}}
                                                    {{--<option value="CK">Cook Islands</option>--}}
                                                    {{--<option value="CR">Costa Rica</option>--}}
                                                    {{--<option value="CI">Côte d'Ivoire</option>--}}
                                                    {{--<option value="HR">Croatia</option>--}}
                                                    {{--<option value="CU">Cuba</option>--}}
                                                    {{--<option value="CW">Curaçao</option>--}}
                                                    {{--<option value="CY">Cyprus</option>--}}
                                                    {{--<option value="CZ">Czech Republic</option>--}}
                                                    {{--<option value="DK">Denmark</option>--}}
                                                    {{--<option value="DJ">Djibouti</option>--}}
                                                    {{--<option value="DM">Dominica</option>--}}
                                                    {{--<option value="DO">Dominican Republic</option>--}}
                                                    {{--<option value="EC">Ecuador</option>--}}
                                                    {{--<option value="EG">Egypt</option>--}}
                                                    {{--<option value="GP">Guadeloupe</option>--}}
                                                    {{--<option value="GU">Guam</option>--}}
                                                    {{--<option value="GT">Guatemala</option>--}}
                                                    {{--<option value="GG">Guernsey</option>--}}
                                                    {{--<option value="GN">Guinea</option>--}}
                                                    {{--<option value="GW">Guinea-Bissau</option>--}}
                                                    {{--<option value="GY">Guyana</option>--}}
                                                    {{--<option value="HT">Haiti</option>--}}
                                                    {{--<option value="HN">Honduras</option>--}}
                                                    {{--<option value="HK">Hong Kong</option>--}}
                                                    {{--<option value="HU">Hungary</option>--}}
                                                    {{--<option value="IS">Iceland</option>--}}
                                                    {{--<option value="IN">India</option>--}}
                                                    {{--<option value="ID">Indonesia</option>--}}
                                                    {{--<option value="NO">Norway</option>--}}
                                                    {{--<option value="OM">Oman</option>--}}
                                                    {{--<option value="PK">Pakistan</option>--}}
                                                    {{--<option value="PW">Palau</option>--}}
                                                    {{--<option value="PA">Panama</option>--}}
                                                    {{--<option value="PG">Papua New Guinea</option>--}}
                                                    {{--<option value="PY">Paraguay</option>--}}
                                                    {{--<option value="PE">Peru</option>--}}
                                                    {{--<option value="PH">Philippines</option>--}}
                                                    {{--<option value="PN">Pitcairn</option>--}}
                                                    {{--<option value="PL">Poland</option>--}}
                                                    {{--<option value="PT">Portugal</option>--}}
                                                    {{--<option value="PR">Puerto Rico</option>--}}
                                                    {{--<option value="QA">Qatar</option>--}}
                                                    {{--<option value="RE">Réunion</option>--}}
                                                    {{--<option value="RO">Romania</option>--}}
                                                    {{--<option value="RU">Russian Federation</option>--}}
                                                    {{--<option value="RW">Rwanda</option>--}}
                                                    {{--<option value="SZ">Swaziland</option>--}}
                                                    {{--<option value="SE">Sweden</option>--}}
                                                    {{--<option value="CH">Switzerland</option>--}}
                                                    {{--<option value="TR">Turkey</option>--}}
                                                    {{--<option value="TM">Turkmenistan</option>--}}
                                                    {{--<option value="TV">Tuvalu</option>--}}
                                                    {{--<option value="UG">Uganda</option>--}}
                                                    {{--<option value="UA">Ukraine</option>--}}
                                                    {{--<option value="GB">United Kingdom</option>--}}
                                                    {{--<option value="US" selected>United States</option>--}}
                                                    {{--<option value="UY">Uruguay</option>--}}
                                                    {{--<option value="UZ">Uzbekistan</option>--}}
                                                    {{--<option value="YE">Yemen</option>--}}
                                                    {{--<option value="ZM">Zambia</option>--}}
                                                    {{--<option value="ZW">Zimbabwe</option>--}}
                                                {{--</select>--}}
                                            {{--</div>--}}
                                        {{--</div>--}}

                                        <div class="col-xl-12">
                                            <div class="submit-field">
                                                <h5>Introduce Yourself</h5>
                                                <input type="hidden" value="{{ $user->meta->description }}" name="description">
                                                {{--<textarea name="description" cols="30" rows="5" class="with-border editor">{{ $user->meta->description }}</textarea>--}}
                                                <div id="description" class="desc-editor">{!! clean( $user->meta->description ) !!}</div>
                                            </div>
                                        </div>

                                        <div class="col-xl-12">
                                            <div class="submit-field">
                                                <h5>Education Information</h5>
                                                <input type="hidden" value="{{ $user->meta->education_information }}" name="education_information">
                                                {{--<textarea name="description" cols="30" rows="5" class="with-border editor">{{ $user->meta->description }}</textarea>--}}
                                                <div id="education_information" class="education-editor">{!! clean( $user->meta->education_information ) !!}</div>
                                            </div>
                                        </div>

                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <!-- Dashboard Box -->
                <div class="col-xl-12">
                    <div id="test1" class="dashboard-box">

                        <!-- Headline -->
                        <div class="headline">
                            <h3><i class="icon-material-outline-lock"></i> Password & Security</h3>
                        </div>

                        <div class="content with-padding">
                            <div class="row">
                                <div class="col-xl-4">
                                    <div class="submit-field">
                                        <h5>Current Password</h5>
                                        <input type="password" class="with-border">
                                    </div>
                                </div>

                                <div class="col-xl-4">
                                    <div class="submit-field">
                                        <h5>New Password</h5>
                                        <input type="password" class="with-border">
                                    </div>
                                </div>

                                <div class="col-xl-4">
                                    <div class="submit-field">
                                        <h5>Repeat New Password</h5>
                                        <input type="password" class="with-border">
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <div class="checkbox">
                                        <input type="checkbox" id="two-step" checked>
                                        <label for="two-step"><span class="checkbox-icon"></span> Enable Two-Step Verification via Email</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Button -->
                <div class="col-xl-12">
                    <button type="submit" class="button ripple-effect big margin-top-30">Save Changes</button>
                </div>

            </form>
            <!-- Row / End -->

            <!-- Footer -->
            <div class="dashboard-footer-spacer"></div>
            <div class="small-footer margin-top-15">
                <div class="small-footer-copyrights">
                    © {{ date('Y') }} <strong>{{ env( 'APP_NAME' ) }}</strong>. All Rights Reserved.
                </div>
                <ul class="footer-social-links">
                    <li>
                        <a href="#" title="Facebook" data-tippy-placement="top">
                            <i class="icon-brand-facebook-f"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" title="Twitter" data-tippy-placement="top">
                            <i class="icon-brand-twitter"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" title="Google Plus" data-tippy-placement="top">
                            <i class="icon-brand-google-plus-g"></i>
                        </a>
                    </li>
                    <li>
                        <a href="#" title="LinkedIn" data-tippy-placement="top">
                            <i class="icon-brand-linkedin-in"></i>
                        </a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <!-- Footer / End -->

        </div>
    </div>
    <!-- Dashboard Content / End -->


@endsection