@extends('layouts.index')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/dataTables/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dataTables/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dataTables/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
@stop

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

@section('content')

<h3 class="text-muted color_pag">{{'Mis Odontologos'}}</h3>
<input type="hidden" id="identificador" value="#odontologos" >
<div class="espacio10">
    <table id="odontologos" class="table table-striped table-bordered shadow-lg mt-4 dt-responsive nowrap" style="width:100%">
        <thead class="bg-primary text-white">
            <tr>
                <th scope="col" width="35%">{{'Odontologo'}}</th>
                <th scope="col" width="15%">{{'Especialidad'}}</th>
                <th scope="col" width="15%">{{'Nro Atenciones'}}</th>
                <th scope="col" width="35%">{{'Opciones'}}</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($odontologos as $odontologo)
                <tr>
                    <td>{{$odontologo->nombre_completo}}</td>
                    <td>{{$odontologo->especialidad}}</td>
                    <td>{{$odontologo->total}}</td>
                    <td>
                        <a id="modal-det" href="#detalle{{$odontologo->user_id}}" role="button" class="btn btn-primary btn-sm" data-toggle="modal">Datos</a>
                        <a id="modal-ate" href="#atencion{{$odontologo->user_id}}" role="button" class="btn btn-warning btn-sm" data-toggle="modal">Atenciones</a>
                        <a id="modal-val" href="#valoracion{{$odontologo->user_id}}" role="button" class="btn btn-success btn-sm" data-toggle="modal">Valoraciones</a>
                        <a id="modal-val" href="#agenda{{$odontologo->user_id}}" role="button" class="btn btn-info btn-sm" data-toggle="modal">Agenda</a>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Modal Detalle Solicitud-->

@foreach ($odontologos as $odontologo)
    <div class="modal fade" id="detalle{{$odontologo->user_id}}" role="dialog" aria-labelledby="modal_detalle" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal_detalle">{{'Datos Odontologo'}}</h5> 
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h6 class="espacio5">{{"Nombre Completo : ".$odontologo->nombre_completo}}</h6>
                    <h5 class="espacio5">{{"Especialidades"}}</h5>
                    @foreach($especialidades as $especialidad)
                        @if($especialidad->odontologo_id == $odontologo->user_id)
                            <h6 class="espacio5">{{$especialidad->especialidad}}</h6>
                        @endif
                    @endforeach
                    <h6 class="espacio5">{{"Numero Total de Atenciones : ".$odontologo->atenciones_realizadas}}</h6>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>   
        </div>
    </div>

    <div class="modal fade" id="atencion{{$odontologo->user_id}}" role="dialog" aria-labelledby="modal_atencion" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal_detalle">{{'Detalle Atenciones'}}</h5> 
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{$odontologo->user_id}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>   
        </div>
    </div>

    <div class="modal fade" id="valoracion{{$odontologo->user_id}}" role="dialog" aria-labelledby="modal_valoracion" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal_detalle">{{'Valoraciones'}}</h5> 
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{$odontologo->user_id}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>   
        </div>
    </div>

    <div class="modal fade" id="agenda{{$odontologo->user_id}}" role="dialog" aria-labelledby="modal_agenda" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal_detalle">{{'agenda'}}</h5> 
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    {{$odontologo->user_id}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>   
        </div>
    </div>
@endforeach

@stop

@section('scripts')
    <script src="{{ asset('js/dataTables/jquery-3.5.1.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/jquery.dataTables.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/dataTables.bootstrap4.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/dataTables.responsive.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/responsive.bootstrap4.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/config-dt.js') }}" defer></script>
@stop