@extends('layouts.dashboard.template')

@section('content')
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <x-card class="card-primary card-outline">
                        <x-slot:body class="box-profile">
                            <div class="text-center">
                                <img class="profile-user-img img-fluid img-circle"
                                    src="{{ asset('adminlte/dist/img/user1-128x128.jpg') }}" alt="User profile picture">
                            </div>

                            <h3 class="profile-username text-center">Sergio López</h3>

                            <p class="text-muted text-center">Ingeniero de software</p>
                            <ul class="list-group list-group-unbordered mb-3">
                                <li class="list-group-item">
                                    <b>Seguidores</b> <a class="float-right">1,322</a>
                                </li>
                                <li class="list-group-item">
                                    <b>Siguiendo</b> <a class="float-right">543</a>
                                </li>
                                <li class="list-group-item">
                                    <b>Amigos</b> <a class="float-right">13,287</a>
                                </li>
                            </ul>
                            <a href="#" class="btn btn-primary btn-block"><b>Seguir</b></a>
                        </x-slot>
                    </x-card>
                    <x-card :title="'Acerce de'" class="card-primary">
                        <x-slot:body>
                            <strong><i class="fas fa-book mr-1"></i> Educación</strong>

                            <p class="text-muted">
                                Ingeniero en desarrollo de software
                            </p>

                            <hr>

                            <strong><i class="fas fa-map-marker-alt mr-1"></i> Ubicación</strong>

                            <p class="text-muted">Colima, Mexico</p>

                            <hr>

                            <strong><i class="fas fa-pencil-alt mr-1"></i> Habilidades</strong>

                            <p class="text-muted">
                                <span class="tag tag-danger">Desarrollo de aplicaciones moviles</span>
                                <span class="tag tag-success">iOS</span>
                                <span class="tag tag-info">Android</span>
                                <span class="tag tag-warning">CRM Inmobiliario</span>
                            </p>

                            <hr>

                            <strong><i class="far fa-file-alt mr-1"></i> Notas</strong>

                            <p class="text-muted">
                                Soy un ingeniero en desarrollo de software con mas de 6 años de experiencia en el desarrollo
                                de aplicaciones moviles y CRM inmobiliario.
                            </p>

                        </x-slot>
                    </x-card>
                </div>
                <div class="col-md-9">
                    <x-card>
                        <x-slot:header class="p-2">
                            <ul class="nav nav-pills">
                                <li class="nav-item"><a class="nav-link active" href="#activity" data-toggle="tab">Activity</a></li>
                                <li class="nav-item"><a class="nav-link" href="#timeline" data-toggle="tab">Timeline</a></li>
                                <li class="nav-item"><a class="nav-link" href="#settings" data-toggle="tab">Settings</a></li>
                            </ul>
                        </x-slot>
                        <x-slot:body>
                            <div class="tab-content">
                                @include('realEstates.profile.activity_types_tab.activityTab')
                                @include('realEstates.profile.timeline_tab.timeLineTab')
                                @include('realEstates.profile.settings_tab.settingsTab')
                            </div>
                        </x-slot>
                    </x-card>
                </div>
            </div>
        </div>
    </section>
@endsection