@extends('layout.backend.main')

@section('content')

<div class="page-content-container">
    <div class="page-content-row">

        @include('sidebars.help')

        <div class="page-content-col">
            <!-- BEGIN PAGE BASE CONTENT -->
            <div class="profile">
                <div class="tabbable-line tabbable-full-width">
                    <ul class="nav nav-tabs">
                        <li class="active">
                            <a href="#tab_overview" data-toggle="tab"> {{trans('x.Overview')}} </a>
                        </li>
                        <li>
                            <a href="#tab_1_3" data-toggle="tab"> Account </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tab_overview">
                            <div class="row">
                                <div class="col-md-3">
                                    <ul class="list-unstyled profile-nav">
                                        <li>
                                            <img src="{!!$profile->avatar()!!}" class="img-responsive pic-bordered" alt="" />
                                        </li>
                                        <li>Avatar</li>
                                    </ul>
                                </div>
                                <div class="col-md-9">
                                    <div class="row">
                                        <div class="col-md-8 profile-info">
                                            <h1 class="font-green sbold uppercase">
                                                {{$profile->companyname}}
                                            </h1>
                                            <h4 class="font-green sbold uppercase">
                                                @if ($profile->companyname !== $profile->name.' '.$profile->surname) 
                                                    {{$profile->name}} {{$profile->surname}} 
                                                @endif
                                            </h4>
                                            <p> 
                                                {{$profile->bio}}
                                            </p>
                                            <p>
                                                <a href="javascript:;"> {{$profile->website}} </a>
                                            </p>
                                            <ul class="list-inline">
                                                <li>
                                                    <i class="fa fa-map-marker"></i> {{$profile->country}} </li>
                                                <li>
                                                    <i class="fa fa-star"></i> {{$user->role()}} </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="tabbable-line tabbable-custom-profile">
                                        <ul class="nav nav-tabs">
                                            <li class="active">
                                                <a href="#tab_brands" data-toggle="tab"> Brands </a>
                                            </li>
                                            <li>
                                                <a href="#tab_history" data-toggle="tab"> {{trans('x.Personal history')}} </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div class="tab-pane active" id="tab_brands">

                                                @include('sections.users._profile.brands')

                                            </div>
                                            <!--tab-pane-->
                                            <div class="tab-pane" id="tab_history">
                                                <div class="tab-pane active" id="tab_1_1_1">
                                                    <div class="scroller" data-height="290px" data-always-visible="1" data-rail-visible1="1">
                                                        
                                                        @include('components.log_lines')

                                                    </div>
                                                </div>
                                            </div>
                                            <!--tab-pane-->
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--tab_1_2-->
                        <div class="tab-pane" id="tab_1_3">
                            <div class="row profile-account">
                                <div class="col-md-3">
                                    <ul class="ver-inline-menu tabbable margin-bottom-10">
                                        <li class="active">
                                            <a data-toggle="tab" href="#tab_personal-info">
                                                <i class="fa fa-cog"></i> {{trans('x.Personal info')}} </a>
                                            <span class="after"> </span>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="#tab_change-avatar">
                                                <i class="fa fa-picture-o"></i> {{trans('x.Change Avatar')}} </a>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="#tab_change-password">
                                                <i class="fa fa-lock"></i> {{trans('x.Change Password')}} </a>
                                        </li>
                                        <li>
                                            <a data-toggle="tab" href="#tab_settings">
                                                <i class="fa fa-eye"></i> {{trans('x.Personal Settings')}} </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-md-9">
                                    <div class="tab-content">
                                        <div id="tab_personal-info" class="tab-pane active">
                                            
                                            @include('sections.users._profile.personal_info')

                                        </div>
                                        <div id="tab_change-avatar" class="tab-pane">
                                            
                                            <div class="dropzone dropzone-file-area" id="dropzone" style="margin: 16px;">
                                                <h4 class="sbold">{{trans('x.Drop files here or click to upload the picture')}}</h4>
                                            </div>

                                        </div>
                                        <div id="tab_change-password" class="tab-pane">
                                            
                                            @include('sections.users._profile.change_password')

                                        </div>
                                        <div id="tab_settings" class="tab-pane">
                                            Function not available
                                        </div>
                                    </div>
                                </div>
                                <!--end col-md-9-->
                            </div>
                        </div>
                        <!--end tab-pane-->
                    </div>
                </div>
            </div>
            <!-- END PAGE BASE CONTENT -->
        </div>
    </div>
</div>

@stop

@section('pages-scripts')

<script>

    // initiate dropzone
    Dropzone.autoDiscover = false;
    $("#dropzone").dropzone({
        dictDefaultMessage: "",
        maxFiles:1,
        init: function() {
            this.on("addedfile", function() {
                if (this.files[1]!=null){
                    this.removeFile(this.files[0]);
                }
            });
            this.on("addedfile", function(e) {
                $('.dz-success-mark, .dz-error-message, .dz-error-mark, .dz-remove').remove();
                var n = Dropzone.createElement("<a href='javascript:;'' class='btn red btn-sm'>{{trans('x.Delete')}}</a>"),
                    t = this;
                n.addEventListener("click", function(n) {
                    n.preventDefault(), 
                    n.stopPropagation(), 
                    t.removeFile(e)
                }), e.previewElement.appendChild(n)
            })
        },
        url: "/users/upload-picture",
        addRemoveLinks: true,
        success: function (file, response) {
            // 
            if (response !== 'not an image') {
                location.href='/users/profile';
            }
        },
        error: function (file, response) {
            toastr.error('ajax error');
        }
    });

    </script>

@stop