@extends('layouts.backend')
@inject('app', 'Illuminate\Support\Facades\App')
@section('content')

<div class="row mt-4">
    <div class="col-11 col-md-4 offset-1">
        <div class="row justify-content-start pl-3">
            <ul class="nav nav-tabs btn-group" id="myTab" role="tablist"
                style="width: 100%; display: grid; grid-gap: 0px; width: 100%; justify-content: start; grid-template-columns: auto auto auto;">
                <li style="width: 33.33%; min-width:100px;" class="nav-item">
                    <button type="button" class="btn btn-alternative btn-chart active show" style="width:100%"
                        id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                        aria-selected="true">PERFIL</button>
                </li>

                <li style="width: 33.33%; min-width:118px" class="nav-item">
                    <button type="button" class="btn btn-alternative btn-chart" style="width: 100%" id="profile-tab"
                        data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
                        aria-selected="false">SEGURIDAD</button>
                </li>

                <li style="width: 33.33%; min-width:135px" class="nav-item">
                    <a href="{{ route('kyc-verification') }}">
                        <button type="button" class="btn btn-alternative btn-chart text-uppercase"
                            style="width: 100%">verificación</button>
                    </a>
                </li>
            </ul>

            <!-- <button type="button" class="btn btn-alternative btn-chart pr-5" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">PERFIL &nbsp;&nbsp;&nbsp;&nbsp;</button>
            <button type="button" class="btn btn-alternative btn-chart pr-5" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">SEGURIDAD</button>
            <button type="button" class="btn btn-alternative btn-chart pr-5" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button> -->
        </div>

        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <div class="card card-alternative">
                    <div class="card-body">
                        <img class="imageIcon" src="{{ url('/') }}/img/icons/user.png" width="30" alt="User"
                            height="auto">

                        <span class="username"></span>
                    </div>
                </div>

                <div class="row pl-4 mt-2">
                    <h4>
                        {{__('messages.name')}}:&nbsp;&nbsp;
                    </h4>
                </div>

                <div class="card card-alternative">
                    <div class="card-body">
                        <span id="name"></span>
                    </div>
                </div>

                <div class="row pl-4 mt-2">
                    <h4>
                        {{__('messages.lastname')}}:&nbsp;&nbsp;
                    </h4>
                </div>

                <div class="card card-alternative">
                    <div class="card-body">
                        <span id="lastname"></span>
                    </div>
                </div>

                <div class="row pl-4 mt-2">
                    <h4>
                        {{__('messages.email')}}:&nbsp;&nbsp;
                    </h4>
                </div>

                <div class="card card-alternative">
                    <div class="card-body">
                        <span id="email"></span>
                    </div>
                </div>

                <div class="row pl-4 mt-2">
                    <h4>Dirección: &nbsp;&nbsp;</h4>
                </div>

                <div class="card card-alternative">
                    <div class="card-body">
                        <span id="address"></span>
                    </div>
                </div>


            </div>

            <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                <div class="card card-alternative">
                    <div class="card-body">
                        <img class="imageIcon" src="{{ url('/') }}/img/icons/user.png" width="30" alt="User"
                            height="auto">

                        <span class="username"></span>
                    </div>
                </div>

                <nav>
                    <div class="nav nav-tabs justify-content-between" id="nav-tab" role="tablist">
                        <button type="button" class="btn btn-alternative btn-active active show" id="nav-home-tab"
                            data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home"
                            aria-selected="true">Contraseña</button>

                        <button type="button" class="btn btn-alternative btn-active" id="nav-auth-tab" data-toggle="tab"
                            href="#nav-auth" role="tab" aria-controls="nav-auth"
                            aria-selected="false">Autenticación</button>
                    </div>
                </nav>

                <div class="tab-content" id="nav-tabContent">
                    <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                        <div class="card card-alternative mt-2">
                            <div class="card-body">
                                <form id="UserForm">
                                    <input type="text" style='display:none;' id='idU' disabled>
                                    <h5>Contraseña Actual:</h5>

                                    <input id="old_password" name="old_password" type="password"
                                        class="small form-control form-control-search"
                                        placeholder="{{__('messages.old_password')}}"></input>

                                    <h5>Nueva Contraseña:</h5>

                                    <input id="new_password" name="new_password" type="password"
                                        class="small form-control form-control-search"
                                        placeholder="{{__('messages.new_password')}}"></input>

                                    <h5>Confirmar Nueva Contraseña:</h5>

                                    <input id="confirm_new_password" name="confirm_new_password" type="password"
                                        class="small form-control form-control-search"
                                        placeholder="{{__('messages.confirm')}} {{__('messages.new_password')}}"></input>

                                    <!-- fala colocar ruta corecta -->
                                    <div id="passwordBut">
                                        <button type="button" id="changePass"
                                            class="btn btn-alternative btn-active active"
                                            aria-selected="true">Cambiar</button>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="nav-auth" role="tabpanel" aria-labelledby="nav-auth-tab">
                        <div class="card card-alternative mt-2" id="authenticator1">
                            <div class="card-body">
                                <a href="{{ route('google-two-factor') }}">
                                    <div class="card card-alternative">
                                        <div class="card-body">
                                            <img src="{{ url('/') }}/img/icons/auth.png" height="50px" width='auto'
                                                alt="">
                                            <span>
                                                Google Authenticator
                                            </span>
                                        </div>
                                    </div>
                                </a>
                                <a href="{{ route('email-two-factor') }}">
                                    <div class="card card-alternative">
                                        <div class="card-body">
                                            <img src="{{ url('/') }}/img/icons/email.png" height="50px" width='auto'
                                                alt="">
                                            <span>
                                                Vía Email
                                            </span>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="card card-alternative mt-2" id="authenticator2" style="display:none;">
                            <div class="card card-alternative">
                                <div class="card-body">
                                    <button type="button" class="btn btn-alternative btn-active"
                                        id="disable2fa">Desactivar Autenticación</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="iconuser">
                <img class="align-middle" src="{{ url('/') }}/img/icons/iconprofile.png" alt="User">
            </div>
        </div>
    </div>
</div>

<div class="mt-5">
    <div class="mt-5">
        <div class="card card-alternative card-report">
            <div class="card-body">
                <h5 class="card-title">DISPOSITIVOS CONFIRMADOS</h5>

                <div class="tab-pane active table-responsive" id="list">
                    <table id="table_balance" class="table table-hover">
                        <thead class="thead-default">
                            <tr>
                                <th style="cursor: pointer;">CONFIRMADO</th>

                                <!-- <th style="cursor: pointer;">NAVEGADOR</th> -->

                                <th style="cursor: pointer;">AGENTE</th>

                                <th style="cursor: pointer;">DIRECCIÓN IP</th>

                                <!-- <th style="cursor: pointer;">UBICACIÓN</th> -->
                            </tr>
                        </thead>

                        <tfoot>
                            <!-- <tr>
                                    <th colspan="1" id="balance_page">
                                        <div class="form-group" style="width: 70px;">
                                            <select id="result_balance_page" class="form-control form-control-table">
                                                <option value="5">5</option>
                                                <option value="10" selected="selected">10</option>
                                                <option value="15">15</option>
                                            </select>
                                        </div>
                                    </th>
                                    @if(Auth::User()->hasRole('20') || Auth::User()->hasRole('901'))
                                    <th id="table_balance_pagination" class="text-right" colspan="3"></th>
                                    @else
                                    <th id="table_balance_pagination" class="text-right" colspan="2"></th>
                                    @endif
                                </tr> -->
                        </tfoot>

                        <tbody>
                            @foreach($devices as $device)

                            <tr>
                                @if($device->verified)

                                <td>Si</td>

                                @else

                                <td>No</td>

                                @endif

                                <td>
                                    {{ $device->user_agent }}
                                </td>

                                <td>
                                    {{ $device->ip_address }}
                                </td>
                            </tr>

                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card-footer">
                <!-- <button class="btn btn-outline-success btn-alternative-plus float-right mt-4 mb-0">
                        <i class="fas fa-plus"></i>
                    </button> -->
            </div>
        </div>
    </div>

    <div class="mt-5">
        <div class="card card-alternative card-report">
            <div class="card-body">
                <div class="card-title">
                    <h5>
                        {{__('messages.withdrawal_address')}}
                    </h5>

                    <div class="text-right">
                        <a href="{{ route('accounts') }}">
                            <button type="button" class="btn btn-alternative" id="active">
                                {{__('messages.address_management')}}
                            </button>
                        </a>
                    </div>

                    <p class="small">
                        {{__('messages.profile_text_2')}}
                    </p>
                </div>

                <div class="tab-pane active table-responsive" id="list">
                    <table id="table_account" class="table table-hover">
                        <thead class="thead-default">
                            <tr>
                                <th id="table_account_account_type" style="cursor: pointer;">{{__('messages.type')}}
                                </th>
                                <th id="table_account_account_address" style="cursor: pointer;">
                                    {{__('messages.currency')}}</th>
                                <th id="table_account_account_address" style="cursor: pointer;">
                                    {{__('messages.address')}}</th>

                                <th id="table_account_account_address" style="cursor: pointer;">
                                    {{__('messages.entity')}}</th>

                                <th id="table_account_account_date" style="cursor: pointer;">{{__('messages.created')}}
                                </th>

                                <th id="table_account_account_update" style="cursor: pointer;">
                                    {{__('messages.last_modified')}}
                                </th>
                            </tr>
                        </thead>

                        <tfoot>
                            <tr>
                                <th colspan="1" id="account_page">
                                    <div class="form-group" style="width: 70px;">
                                        <select id="result_account_page" class="form-control form-control-table">
                                            <option value="5">5</option>

                                            <option value="10" selected="selected">10</option>

                                            <option value="15">15</option>
                                        </select>
                                    </div>
                                </th>
                                <th id="table_account_pagination" class="text-right" colspan="3"></th>
                            </tr>
                        </tfoot>

                        <tbody class="small" id="table_account_content"></tbody>
                    </table>
                </div>
            </div>

            <div class="card-footer">
                <!-- <button class="btn btn-outline-success btn-alternative-plus float-right mt-4 mb-0">
                <i class="fas fa-plus"></i>
            </button> -->
            </div>
        </div>
    </div>
</div>

@include('modals.LevelTwo')
@include('modals.confirmModal')
@include('modals.messageModal')
@endsection