@extends('layouts.app')
@section('content')
    <div class="container-md mx-0">
        <div class="row">
            <div class="col-lg-3">
                <div class="card b">
                    <div class="card-header bg-gray-lighter text-bold">Personal Settings</div>
                    <div class="list-group">
                        <a class="list-group-item list-group-item-action active" href="#tabSetting1" data-toggle="tab">Profile</a>
                        <a class="list-group-item list-group-item-action" href="#tabSetting2" data-toggle="tab">Account</a>
                        <a class="list-group-item list-group-item-action" href="#tabSetting3" data-toggle="tab">Emails</a>
                        <a class="list-group-item list-group-item-action" href="#tabSetting4" data-toggle="tab">Notifications</a>
                        <a class="list-group-item list-group-item-action" href="#tabSetting5" data-toggle="tab">Applications</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-9">
                <div class="tab-content p-0 b0">
                    <div class="tab-pane active" id="tabSetting1">
                        <div class="card b">
                            <div class="card-header bg-gray-lighter text-bold">Profile</div>
                            <div class="card-body">
                                <form action="#">
                                    <div class="form-group">
                                        <label>Picture</label>
                                        <input
                                            class="form-control filestyle"
                                            type="file"
                                            data-input="false"
                                            data-classbutton="btn btn-secondary"
                                            data-classinput="form-control inline"
                                            data-text="Upload new picture"
                                            data-icon="&lt;span class='fa fa-upload mr-2'&gt;&lt;/span&gt;"
                                        />
                                    </div>
                                    <div class="form-group">
                                        <label>Name</label>
                                        <input class="form-control" type="text" />
                                    </div>
                                    <div class="form-group">
                                        <label>Bio</label>
                                        <textarea class="form-control" rows="3"></textarea>
                                    </div>
                                    <div class="form-group">
                                        <label>URL</label>
                                        <input class="form-control" type="text" />
                                    </div>
                                    <div class="form-group">
                                        <label>Company</label>
                                        <input class="form-control" type="text" />
                                    </div>
                                    <div class="form-group">
                                        <label>Location</label>
                                        <input class="form-control" type="text" />
                                    </div>
                                    <button class="btn btn-info" type="button">Update settings</button>
                                    <p><small class="text-muted">* Integer fermentum accumsan metus, id sagittis ipsum molestie vitae</small></p>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tabSetting2">
                        <div class="card b">
                            <div class="card-header bg-gray-lighter text-bold">Account</div>
                            <div class="card-body">
                                <form action="#">
                                    <div class="form-group">
                                        <label>Current password</label>
                                        <input class="form-control" type="password" />
                                    </div>
                                    <div class="form-group">
                                        <label>New password</label>
                                        <input class="form-control" type="password" />
                                    </div>
                                    <div class="form-group">
                                        <label>Confirm new password</label>
                                        <input class="form-control" type="password" />
                                    </div>
                                    <button class="btn btn-info" type="button">Update password</button>
                                    <p><small class="text-muted">* Integer fermentum accumsan metus, id sagittis ipsum molestie vitae</small></p>
                                </form>
                            </div>
                        </div>
                        <div class="card b">
                            <div class="card-header bg-danger text-bold">Delete account</div>
                            <div class="card-body bt">
                                <p>You will be asked for confirmation before delete account.</p>
                                <button class="btn btn-secondary" type="button"><span class="text-danger">Delete account</span></button>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tabSetting3">
                        <div class="card b">
                            <div class="card-header bg-gray-lighter text-bold">Emails</div>
                            <div class="card-body">
                                <p>
                                    Etiam eros nibh, condimentum in auctor et, aliquam quis elit. Donec id libero eros. Ut fringilla, justo id fringilla pretium, nibh nunc suscipit mauris, et suscipit
                                    nulla nisl ac dolor. Nam egestas, leo eu gravida tincidunt, sem ipsum pellentesque quam, vel iaculis est quam et eros.
                                </p>
                                <p><strong>Your email addresses</strong></p>
                                <p>
                                    <span class="mr-2">email@someaddress.com</span>
                                    <span class="badge badge-success">primary</span>
                                </p>
                                <p>
                                    <span class="mr-2">another.email@someaddress.com</span>
                                    <span class="badge bg-gray">private</span>
                                </p>
                            </div>
                            <div class="card-body bt">
                                <p><strong>Add email address</strong></p>
                                <form action="#">
                                    <div class="row mb-2">
                                        <div class="col-xl-6">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <input class="form-control" type="email" placeholder="email@server.com" />
                                                    <span class="input-group-btn"><button class="btn btn-secondary" type="button">Add</button></span>
                                                </div>
                                            </div>
                                            <div class="form-check">
                                                <input class="form-check-input" id="defaultCheck1" type="checkbox" value="" />
                                                <label class="form-check-label">Keep my email address private</label>
                                            </div>
                                        </div>
                                    </div>
                                    <button class="btn btn-info" type="button">Update email</button>
                                    <p><small class="text-muted">* Integer fermentum accumsan metus, id sagittis ipsum molestie vitae</small></p>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tabSetting4">
                        <form action="#">
                            <div class="card b">
                                <div class="card-header bg-gray-lighter text-bold">Notifications</div>
                                <div class="card-body bb">
                                    <div class="form-check">
                                        <input class="form-check-input" id="defaultCheck2" type="checkbox" value="" />
                                        <label class="form-check-label"><strong>Disable email notifications</strong></label>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <p><strong>Interaction</strong></p>
                                    <div class="form-check">
                                        <input class="form-check-input" id="defaultCheck3" type="checkbox" value="" />
                                        <label class="form-check-label">Alert me when someone start to follow me</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" id="defaultCheck4" type="checkbox" value="" />
                                        <label class="form-check-label">Alert me when someone star my work</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" id="defaultCheck5" type="checkbox" value="" />
                                        <label class="form-check-label">Alert me when post a new comment</label>
                                    </div>
                                    <p class="my-2"><strong>Marketing</strong></p>
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" id="defaultCheck6" type="checkbox" value="" />
                                        <label class="form-check-label">Send me news and interesting updates</label>
                                    </div>
                                    <button class="mb-3 btn btn-info" type="button">Update notifications</button>
                                    <p><small class="text-muted">Mauris sodales accumsan erat, ut dapibus erat faucibus vitae.</small></p>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane" id="tabSetting5">
                        <div class="card b">
                            <div class="card-header bg-gray-lighter text-bold">Applications</div>
                            <div class="card-body">
                                <p>
                                    <span>You have granted access for</span>
                                    <strong>3 applications</strong>
                                    <span>to your account.</span>
                                </p>
                                <div class="list-group">
                                    <div class="list-group-item d-flex align-items-center">
                                        <img class="mr-2 img-fluid thumb48" src="/img/dummy.png" alt="App" />
                                        <div>
                                            <p class="text-bold mb-0">Application #1</p>
                                            <small>Ut turpis urna, tristique sed adipiscing nec, luctus quis leo.</small>
                                        </div>
                                        <div class="ml-auto">
                                            <button class="btn btn-secondary" type="button"><strong>Revoke</strong></button>
                                        </div>
                                    </div>
                                    <div class="list-group-item d-flex align-items-center">
                                        <img class="mr-2 img-fluid thumb48" src="/img/dummy.png" alt="App" />
                                        <div>
                                            <p class="text-bold mb-0">Application #2</p>
                                            <small>Ut turpis urna, tristique sed adipiscing nec, luctus quis leo.</small>
                                        </div>
                                        <div class="ml-auto">
                                            <button class="btn btn-secondary" type="button"><strong>Revoke</strong></button>
                                        </div>
                                    </div>
                                    <div class="list-group-item d-flex align-items-center">
                                        <img class="mr-2 img-fluid thumb48" src="/img/dummy.png" alt="App" />
                                        <div>
                                            <p class="text-bold mb-0">Application #3</p>
                                            <small>Ut turpis urna, tristique sed adipiscing nec, luctus quis leo.</small>
                                        </div>
                                        <div class="ml-auto">
                                            <button class="btn btn-secondary" type="button"><strong>Revoke</strong></button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/forms.js') }}"></script>
@endsection
