@extends('layouts.master')
@section('title')
    Perfil
@endsection
@section('css')
    <link rel="stylesheet" href="{{ URL::asset('build/libs/swiper/swiper-bundle.min.css') }}">
@endsection
@section('content')

@php
    $staff = App\Models\Staff::where('user_id', Auth::user()->id)->first();
    $user =  Auth::user();
    $date_created = \Carbon\Carbon::parse($user->created_at)->locale('es')->isoFormat('D [de] MMMM [de] YYYY');
@endphp

<div class="profile-foreground position-relative mx-n4 mt-n4">
    <div class="profile-wid-bg">
        <img src="{{ URL::asset('build/images/logo-light.png') }}" alt="" class="profile-wid-img" />
    </div>
</div>
<div class="pt-4 mb-4 mb-lg-3 pb-lg-4 profile-wrapper">
    <div class="row g-4">
        <div class="col-auto">
            <div class="avatar-lg">
                <img src="@if ($user->avatar != '') {{ URL::asset('images/' . $user->avatar) }}@else{{ URL::asset('build/images/users/avatar-1.jpg') }} @endif" alt="user-img" class="img-thumbnail rounded-circle" />
            </div>
        </div>
        <!--end col-->
        <div class="col">
            <div class="p-2">
                <h3 class="text-white mb-1">{{ $user->name }}</h3>
                <p class="text-white text-opacity-75">{{ $staff != null ? $staff->role->role_name : 'Administrador' }}</p>
            </div>
        </div>
        <!--end col-->

    </div>
    <!--end row-->
</div>

<div class="row">
    <div class="col-lg-12">
        <div>
            <div class="d-flex profile-wrapper">
                <!-- Nav tabs -->
                <ul class="nav nav-pills animation-nav profile-nav gap-2 gap-lg-3 flex-grow-1" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link fs-14 active" data-bs-toggle="tab" href="#overview-tab" role="tab">
                            <i class="ri-airplay-fill d-inline-block d-md-none"></i> <span class="d-none d-md-inline-block">Datos de Perfil</span>
                        </a>
                    </li>
                </ul>
            </div>
            <!-- Tab panes -->
            <div class="tab-content pt-4 text-muted">
                <div class="tab-pane active" id="overview-tab" role="tabpanel">
                    <div class="row">
                        <div class="col-xxl-4">
                            <form action="{{ route('password.update') }}" method="POST">
                                @csrf
                                <div class="card">
                                    <div class="card-body">
                                        <h5 class="card-title mb-3">Info</h5>
                                        <div class="table-responsive">
                                            <table class="table table-borderless mb-0">
                                                <tbody>
                                                    <tr>
                                                        <th class="ps-0" scope="row">Nombre Completo</th>
                                                        <td class="text-muted">{{ $user->name }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="ps-0" scope="row">Rol</th>
                                                        <td class="text-muted">{{ $staff != null ? $staff->role->role_name : 'Administrador' }}</td>
                                                    </tr>
                                                    <tr>
                                                        <th class="ps-0" scope="row">Usuario</th>
                                                        <td class="text-muted">{{ $user->username }}</td>
                                                    </tr>
                                                        <tr>
                                                            <th class="ps-0" scope="row">Nueva Contraseña</th>
                                                            <td class="text-muted">
                                                                <div class="position-relative auth-pass-inputgroup mb-3">
                                                                    <input type="password" class="form-control pe-5 password-input" name="password" placeholder="Enter password" id="password-input" value="">
                                                                    <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon"><i class="ri-eye-fill align-middle"></i></button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <th class="ps-0" scope="row">Confirmar Contraseña</th>
                                                            <td class="text-muted">
                                                                <div class="position-relative auth-pass-inputgroup mb-3">
                                                                    <input type="password" class="form-control pe-5 password-input" name="password_confirmation" placeholder="Enter password" id="password-input" value="">
                                                                    <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted password-addon" type="button" id="password-addon"><i class="ri-eye-fill align-middle"></i></button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                        <button class="btn btn-primary w-100" type="submit">Actualizar Contraseña</button>
                                    </div><!-- end card body -->
                                </div><!-- end card -->
                            </form>
                        </div>
                        <!--end col-->
                        {{-- <div class="col-xxl-8">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title mb-3">Sobre la App de Napoleon Team</h5>
                                    <p>Hi I'm Anna Adame, It will be as simple as Occidental; in
                                        fact, it will be Occidental. To an English person, it will
                                        seem like simplified English, as a skeptical Cambridge
                                        friend of mine told me what Occidental is European languages
                                        are members of the same family.</p>
                                    <div class="row">
                                        <div class="col-6 col-md-4">
                                            <div class="d-flex mt-4">
                                                <div class="flex-shrink-0 avatar-xs align-self-center me-3">
                                                    <div class="avatar-title bg-light rounded-circle fs-16 text-primary">
                                                        <i class="ri-user-2-fill"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 overflow-hidden">
                                                    <p class="mb-1">Rol :</p>
                                                    <h6 class="text-truncate mb-0">Redactor</h6>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-6 col-md-4">
                                            <div class="d-flex mt-4">
                                                <div class="flex-shrink-0 avatar-xs align-self-center me-3">
                                                    <div class="avatar-title bg-light rounded-circle fs-16 text-primary">
                                                        <i class="ri-global-line"></i>
                                                    </div>
                                                </div>
                                                <div class="flex-grow-1 overflow-hidden">
                                                    <p class="mb-1">Website :</p>
                                                    <a href="#" class="fw-semibold">www.napoleonteam.com</a>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end col-->
                                    </div>
                                    <!--end row-->
                                </div>
                                <!--end card-body-->
                            </div><!-- end card -->
                        </div> --}}
                        <!--end col-->
                    </div>
                    <!--end row-->
                </div>
            </div>
            <!--end tab-content-->
        </div>
    </div>
    <!--end col-->
</div>
<!--end row-->
@endsection
@section('script')
    <script src="{{ URL::asset('build/libs/swiper/swiper-bundle.min.js') }}"></script>

    <script src="{{ URL::asset('build/js/pages/profile.init.js') }}"></script>
    <script src="{{ URL::asset('build/js/app.js') }}"></script>
@endsection