@extends('layouts.index')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/iconos/font-awesone.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
@stop

@section('menu')
    @include('menu.index')
@stop

@section('content')
<div class="container-fluid">
    <div class="row ">
        <div class="col-lg-5 col-12 espacio10">
        <!-- small box -->
            <div class="small-box bg-white">
                <div class="row">
                    <div class="col-lg-12 col-12 color_pag">
                        <h4><strong>&nbsp;Atención</strong></h4>
                        <p>&nbsp; Último Odontologo solicitado</p>
                    </div>
                </div>
                @if (isset($odontologo->user_id))
                    <div class="row">
                        <div class="col-lg-12 col-12">
                            <div class="row">
                                <div class="col-lg-6 col-6">
                                    <img alt="odontologo" src="{{ asset('storage/odontologos/avatar'.$odontologo->user_id.'.png') }}" class="img-fluid"/>
                                </div>
                                <div class="col-lg-6 col-6">
                                    <div class="row">
                                        <div class="col-lg-12 col-12 color_pag">
                                            <h4>{{$odontologo->nombre_odontologo}}</h4>
                                            <p>{{$odontologo->frase_descriptiva}}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12 col-12">
                                            <img alt="valoracion" src="{{ asset('img/estrellas/'.$odontologo->valoracion_entera.'.png') }}" class="img-fluid"/>
                                        </div>
                                    </div>
                                    <br>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="row">
                        <div class="col-lg-12 col-12">
                            <div class="row">
                                <div class="col-lg-8 col-6">
                                    <p class="color_pag">&nbsp;&nbsp;Aún no ha solicitado la atencion de un odontologo</p>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
                <a href="{{ route('atenciones.create') }}" class="small-box-footer"><sapn class="color_pag">Solicitar Atención </span><i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-4 col-12 espacio10">
            <div class="row">
                <div class="col-lg-12 col-12">
                <!-- small box -->
                    <div class="small-box bg-white">
                        <div class="row">
                            <div class="col-lg-9 col-12">
                                <div class="row">
                                    <div class="col-lg-12 col-12 inner">
                                        <h5 class=color_pag><strong>&nbsp;Historial de Atenciones</strong></h5>
                                    </div>
                                    <div class="col-lg-12 col-12">
                                        <h6 class="color_pag">&nbsp;-Ficha</h6>
                                        <h6 class="espaciomenos5 color_pag">&nbsp;-Atenciones</h6>
                                        <h6 class="espaciomenos5 color_pag">&nbsp;-Valoraciones</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-12">
                                <div class="row">
                                    <div class="col-lg-12 col-12"></div>
                                    <div class="col-lg-12 col-12">
                                        <div class="icon">
                                            <i class="far fa-folder-open fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('clientes.atenciones') }}" class="small-box-footer"><sapn class="color_pag">Ver Historial de atenciones </span><i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <div class="col-lg-12 col-12">
                <!-- small box -->
                    <div class="small-box bg-white">
                        <div class="row">
                            <div class="col-lg-9 col-12">
                                <div class="row">
                                    <div class="col-lg-12 col-12 inner">
                                        <h5 class=color_pag><strong>&nbsp;Historial de pagos</strong></h5>
                                    </div>
                                    <div class="col-lg-12 col-12">
                                        <h6 class="color_pag">&nbsp;-Último pago</h6>
                                        <h6 class="espaciomenos5 color_pag">&nbsp;-Comprobantes de pago</h6>
                                        <h6 class="espaciomenos5 color_pag">&nbsp;-Beneficios</h6>
                                        <h6 class="espaciomenos5 color_pag">&nbsp;-Notificaciones</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-12">
                                <div class="row">
                                    <div class="col-lg-12 col-12"></div>
                                    <div class="col-lg-12 col-12">
                                        <div class="icon">
                                            <i class="fas fa-comment-dollar fa-2x"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a href="{{ route('pagos.index') }}" class="small-box-footer"><sapn class="color_pag">Ver Historial de pagos </span><i class="fas fa-arrow-circle-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-5 col-12">
        <!-- small box -->
            <div class="small-box bg-white">
                <div class="row">
                    <div class="col-lg-9 col-12">
                        <div class="row">
                            <div class="col-lg-12 col-12 inner">
                                <h5 class=color_pag><strong>&nbsp;Editar Cuenta</strong></h5>
                            </div>
                            <div class="col-lg-12 col-12">
                                <h6 class="color_pag">&nbsp;-Cambio Password</h6>
                                <h6 class="espaciomenos5 color_pag">&nbsp;-Editar Datos Personales</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-12">
                        <div class="row">
                            <div class="col-lg-12 col-12"></div>
                            <div class="col-lg-12 col-12 espaciomenos10">
                                <div class="icon">
                                    <i class="far fa-edit fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="{{ route('clientes.edit',Auth::user()->id)}}" class="small-box-footer"><sapn class="color_pag">Editar datos de cuenta </span><i class="fas fa-arrow-circle-right"></i></a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-9 col-12">
        <!-- small box -->
            <div class="small-box bg-white">
                <div class="row">
                    <div class="col-lg-4 col-12">
                        <div class="row">
                            <div class="col-lg-1 col-12"></div>
                            <div class="col-lg-11 col-12 color_pag">
                                <h5><strong>&nbsp;Para ti</strong></h5>
                                <span class="color_pag"><small>
                                    &nbsp;Revisa el material educativo &nbsp;recomendado para ti y podamos &nbsp;aportar a la prevencion de las caries &nbsp;junto a Happy Bee
                                </small></span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-2 col-3">
                        <a href="#"><img alt="para ti 1" src="{{ asset('img\para_ti\parati1.png')}}" width="90px" height="90px" class="img-fluid img-thumbnail"/></a>
                    </div>
                    <div class="col-lg-2 col-3">
                        <a href="#"><img alt="para ti 2" src="{{ asset('img\para_ti\parati2.png')}}" width="90px" height="90px" class="img-fluid img-thumbnail"/></a>
                    </div>
                    <div class="col-lg-2 col-3">
                        <a href="#"><img alt="para ti 3" src="{{ asset('img\para_ti\parati3.png')}}" width="90px" height="90px" class="img-fluid img-thumbnail"/></a>
                    </div>
                    <div class="col-lg-2 col-3">
                        <a href="#"><img alt="para ti 4" src="{{ asset('img\para_ti\parati4.png')}}" width="90px" height="90px" class="img-fluid img-thumbnail"/></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@stop

@section('scripts')
    <script src="{{ asset('js/jquery-3.5.1.js') }}" defer></script>
    <script src="{{ asset('js/scripts.js') }}" defer></script>
@endsection