@extends('layouts.index')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/odontograma.css') }}">
    <script src="{{ asset('js/jquery.slim.min.js') }}" defer></script>
@stop

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

@section('content')
<div class="container-fluid">
	<div class="row">
		<div class="col-md-8">
			<div class="row">
				<div class="col-md-12">
                    <h3>Odontograma</h3>
				</div>
			</div>
			<div class="row">
                <div class="col-md-12">
                    <div class="row">
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente1.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente2.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente3.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente4.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente4.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente4.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente4.png')}}" class="img-thumbnail img_diente" />
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente5.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente6.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente1.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente2.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente4.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente4.png')}}" class="img-thumbnail img_diente" />
                        </div>
                        <div class="col-md-3 contenido porte_diente">
                            <img alt="diente" src="{{asset('img/dientes/diente4.png')}}" class="img-thumbnail img_diente" />
                        </div>
                    </div>
                </div>
            </div>
			<div class="row">
				<div class="col-md-12">
                    <canvas id="odontograma"></canvas>
				</div>
			</div>
			<div class="row espacio20">
				<div class="col-md-10">
                    <table class="table table-bordered border-primary">
                        <tr>
                            <th>Dientes Sanos</th>
                            <th>Carie</th>
                            <th>Obturado</th>
                            <th>Perdido</th>
                            <th>Fractura</th>
                            <th>Carie incipiente</th>
                            <th>Ver mas</th>
                            <th>Ver mas</th>
                            <th>Ver mas</th>
                            <th>Ver mas</th>
                        </tr>
                            <td><div id="1" class="celda_center sanos" value="1" onclick="lesion(this)"></div></td>
                            <td><div id="2" class="celda_center carie" value="2"></div></td>
                            <td><div id="3" class="celda_center obturado" value="3"></div></td>
                            <td><div id="4" class="celda_center perdido" value="4"></div></td>
                            <td><div id="5" class="celda_center fractura" value="5"></div></td>
                            <td><div id="6" class="celda_center carie_incipiente" value="6"></div></td>
                            <td><div id="7" class="celda_center" value="7"></div></td>
                            <td><div id="8" class="celda_center borrar" value="8"></div></td>
                        <tr>
                    </table>
				</div>
			</div>
		</div>
		<div class="col-md-4">
            <input type="hidden" id="lesion" value="0" />
		</div>
	</div>
</div>
@endsection

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