@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">
    <form action="{{ route('valoraciones.store')}}" method="POST" >
        @csrf
        <div class="row">
            <div class="col-md-8">
                <div class="row">
                    <div class="col-md-12">
                        <h3 class="text-left">
                            Valorar Atencion Odontologica
                        </h3>
                    </div>
                </div>
                <div class="small-box bg-white">
                    <div class="row">
                        <div class="col-lg-12 col-12 color_pag">
                            <h4><strong>&nbsp;Odontologo</strong></h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-10 col-12">
                            <div class="row">
                                <div class="col-lg-4 col-6">
                                    <img alt="odontologo" src="{{ asset('storage/odontologos/avatar'.$valoracion->odontologo_id.'.png')}}" class="img-fluid img_valoracion"/>
                                </div>
                                <div class="col-lg-8 col-6">
                                    <div class="row">
                                        <div class="col-lg-12 col-12 color_pag">
                                            <h4>{{$valoracion->nombre_odontologo}}</h4>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12 col-12 color_pag">
                                            <h6>{{'Valoracion actual'}}</h6>
                                        </div>
                                        <div class="col-lg-12 col-12">
                                            <img alt="Valoracion" src="{{ asset('img/estrellas/'.$valoracion->valoracion_entera.'.png')}}" width="180px" height="40px" class="img-fluid"/>
                                        </div>
                                    </div>
                                    <br>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="small-box bg-white">
                    <div class="row">
                        <div class="col-lg-12 col-12 color_pag">
                            <h6><strong>&nbsp;Usuario favor valorar la atencion</strong></h6>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-12 color_pag">
                            <h6><strong>&nbsp;Metodologia a usar: 1 mas baja y 5 mas alta</strong></h6>
                        </div>
                    </div>
                    <div class="row espacio10">
                        <div class="col-lg-12 col-12">
                            <div class="row">
                                <div class="col-lg-5 col-6">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input espacio15" type="radio" name="valoracion" id="1" value="1">
                                        <label class="form-check-label" for="valoracion">1</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="valoracion" id="2" value="2">
                                        <label class="form-check-label" for="valoracion">2</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="valoracion" id="3" value="3">
                                        <label class="form-check-label" for="valoracion">3</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="valoracion" id="4" value="4">
                                        <label class="form-check-label" for="valoracion">4</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" checked name="valoracion" id="5" value="5">
                                        <label class="form-check-label" for="valoracion">5</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="small-box bg-white">
                    <div class="row">
                        <div class="col-lg-12 col-12 color_pag">
                            <h6><strong>&nbsp;Si desea puede agragar una observacion</strong></h6>
                        </div>
                    </div>
                    <div class="row espacio10">
                        <div class="col-lg-12 col-12">
                            <textarea class="form-control" id="observacion" name="observacion" rows="3"></textarea>
                            <input type="hidden" name="atencion_id" value="{{$valoracion->id}}" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary btn-sm">Enviar Valoracion</button>
                    </div>
                    <div class="col-md-8"></div>
                </div>
            </div>
            <div class="col-md-4"></div>
        </div>
    </form>
</div>

@stop

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