@extends('layouts.index')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <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') }}">
    <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-lg-9">
			<div class="row">
				<div class="col-lg-4 col-12"><h4 class="text-left">Solicitud de Atencion</h4></div>
			</div>
			<div class="row">
				<div class="col-lg-12 col-12">
					<div class="row">
                        <div class="col-lg-4 col-4">
                            <div class="small-box bg-white">
                                <a id="modal-638730" href="#hijos" role="button" class="btn" data-toggle="modal">
                                    <img alt="Atencion Movil" src="{{ asset('img/atencion/asignar_paciente.png') }}" class="img-fluid rounded-circle" width="50px" height="50px">
                                    <strong id="titulo" class="color_pag">&nbsp; Cambiar Paciente</strong>
                                </a>
                            </div>
                        </div>
						<div class="col-lg-4 col-4">
                            <div class="small-box bg-white">
                                <a id="modal-638730" href="#atencion_movil" role="button" class="btn" data-toggle="modal">
                                    <img alt="Atencion Movil" src="{{ asset('img/atencion/atencion_movil.png') }}" class="img-fluid rounded-circle" width="50px" height="50px"/>
                                    <strong class="color_pag">&nbsp; Atención móvil</strong>
                                </a>
                            </div>   
                        </div>
						<div class="col-lg-4 col-4">
                            <div class="small-box bg-white">
                                <a id="modal-638730" href="#atencion_clinica" role="button" class="btn" data-toggle="modal">
                                    <img alt="Atencion en Clinica" src="{{ asset('img/atencion/atencion_clinica.png') }}" class="img-fluid rounded-circle" width="50px" height="50px"/>
                                    <strong class="color_pag">&nbsp; Atención en clínica</strong>
                                </a>
                            </div>
                        </div>
					</div>
				</div>
			</div>
			<div class="row espacio5">
				<div class="col-lg-12 col-12"><h5 class="text-left">{{'Odontologos Disponibles (Atencion Inmediata)'}}</h5></div>
			</div>
			<div class="row">
				<div class="col-lg-12 col-12">
					<div class="row">
                        @foreach ($odontologos_disponibles as $odontologo)
                            @php($existen_odontologos = 1)
                            <div class="col-lg-4 col-4">
                                <div class="small-box bg-white">                     
                                    <div class="row">
                                        <div class="col-lg-12 col-12">
                                            <h6 class="text-left color_pag">{{$odontologo->nombres." ".$odontologo->apellido_paterno." ".$odontologo->apellido_materno}}</h6>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12 col-12">
                                            <div class="row">
                                                <div class="col-lg-5 col-12">
                                                    <div class="row">
                                                        <div class="col-lg-12 col-12">
                                                            @if ($odontologo->valoracion_entera == NULL)
                                                                <h6 class="text-left color_pag">{{'Sin Valoraciones'}}</h6>
                                                            @else
                                                                <img alt="Valoracion" src="{{ asset('img/estrellas/'.$odontologo->valoracion_entera.'.png')}}" width="120px" class="img-fluidg"/>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="row">
                                                        <div class="col-lg-8 col-12 espacio5">
                                                            <h4 class="text-center">{{distancia_KM(Auth::user()->lat,Auth::user()->lon,$odontologo->lat,$odontologo->lon)}}KM</h4>
                                                        </div>
                                                        <div class="col-lg-4 col-12 espacio8">
                                                            <img alt="Odontologo" src="{{ asset('img\atencion\ubicacion.png') }}" class="img-fluid"/>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-7 col-12">
                                                    <img alt="odontologo" src="{{ asset('storage/odontologos/avatar'.$odontologo->user_id.'.png')}}" class="centrador_avatar img-fluid"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <a href="#" id="{{$odontologo->user_id}}" onclick="seleccionar_odontologo_urgente(this)" class="small-box-footer">
                                        <span class="color_pag">Seleccionar </span><i class="fas fa-arrow-circle-right color_pag"></i>
                                    </a>
                                </div>
                            </div>
                        @endforeach
					</div>
                    @if (isset($existen_odontologos))
                        <div class="row espacio5"></div>
                    @else
                        <div class="row espacio5">
                            <div class="col-lg-12 col-12">
                                <h6 class="text-left">{{'No existen Odontologos disponibles por el momento, solo puede agendar su hora'}}</h6>
                            </div>
                        </div>
                        <div class="row espacio20"></div>
                    @endif
				</div>
                <div class="col-lg-6 col-12">
                    <a id="modal-odontologos" href="#odontologos" role="button" class="btn btn-primary btn-sm espacio1" data-toggle="modal">
                        Agendar Atencion Odontologica
                    </a>
                </div>

			</div>
            <div class="row espacio20">
				<div class="col-lg-12 col-12"><h5 class="text-left">Detalle Atencion</h5></div>
                <div class="col-lg-6 col-6">
                    <div class="small-box bg-white">
                        <div class="row espacio5">
                            <div class="col-lg-4 col-12">
                                <h6 class="text-left color_pag espacio5">{{'Paciente'}}</h6>
                            </div>
                            <div class="col-lg-8 col-12">
                                <input type="text" id="pac_at" name="pac_at" value="{{$atencion->paciente}}" readonly class="form-control form-control-sm bg-fondo-ip color_pag"/>
                            </div>
                        </div>
                        <div class="row espacio5">
                            <div class="col-lg-4 col-12">
                                <h6 class="text-left color_pag espacio5">{{'Odontologo'}}</h6>
                            </div>
                            <div class="col-lg-8 col-12">
                                @if (isset($atencion->odontologo_id))          
                                    <input type="text" id="odo_at" name="odo_at" readonly value="{{$odontologo->nombres.' '.$odontologo->apellido_paterno.' '.$odontologo->apellido_materno}}" class="form-control form-control-sm bg-fondo-ip color_pag"/>
                                @else
                                    <input type="text" id="odo_at" name="odo_at" readonly class="form-control form-control-sm bg-fondo-ip color_pag"/>
                                @endif
                            </div>
                        </div>
                        <div class="row espacio5">
                            <div class="col-lg-4 col-12">
                                <h6 class="text-left color_pag espacio5">{{'Estado'}}</h6>
                            </div>
                            <div class="col-lg-8 col-12">
                                <input type="text" id="est_at" name="est_at" value="{{$atencion->atencion}}" readonly class="form-control form-control-sm bg-fondo-ip color_pag"/>
                            </div>
                        </div>
                        <div class="row espacio5">
                            <div class="col-lg-4 col-12">
                                <h6 class="text-left color_pag espacio5">{{'Fecha'}}</h6>
                            </div>
                            <div class="col-lg-8 col-12">
                                <input type="text" id="fec_at" name="fec_at" value="{{date("d-m-Y",strtotime($atencion->fecha))}}" readonly class="form-control form-control-sm bg-fondo-ip color_pag"/>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-lg-6 col-6">
                    <div class="small-box bg-white">
                        <div class="col-lg-12 col-12">
                            <h6 class="text-left color_pag espacio5">{{'Pagar Solicitud de Atencion'}}</h6>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-12">
                                <a id="modal-pagos-web" href="#webpay" onclick="atencion_pago_webpay()" role="button" class="btn btn-sm espacio1" data-toggle="modal">
                                    <img alt="Webpay" src="{{ asset('img/pagos/webpay.png') }}" class="img-fluid" width="100px" height="50px"/>
                                </a>
                            </div>
                            <div class="col-lg-4 col-12">
                                <a id="modal-pagos-mercado" href="#mercado" onclick="atencion_pago_mercado()" role="button" class="btn btn-sm espaciomenos6" data-toggle="modal">
                                    <img alt="MercadoPago" src="{{ asset('img/pagos/mercadopago.png') }}" class="img-fluid" width="100px" height="50px"/>
                                </a>
                            </div>
                            <div class="col-lg-4 col-12">
                                <a id="modal-pagos-transferencia" href="#transferencia" onclick="atencion_pago_transferencia()" role="button" class="btn btn-primary btn-sm espacio1" data-toggle="modal">
                                    Transferencia
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
			</div>

            <div class="row espacio20 ocultar_div" id="genera_atencion">
                <form method="POST" action="{{route('atenciones.generar')}}">
                    @csrf
                    <h5 class="text-left">Revisar datos para proceder a generar la atencion</h5>
                    <input type="hidden" id="paciente_atender" name="paciente" value="{{$atencion->paciente_id}}">
                    @if (isset($atencion->odontologo_id))
                        <input type="hidden" id="odontologo_atender" name="odontologo" value="{{$atencion->odontologo_id}}">
                    @else
                        <input type="hidden" id="odontologo_atender" name="odontologo" value="N">
                    @endif
                    <input type="hidden" id="atencion_id" name="atencion_id" value="{{$atencion->id}}">
                    <input type="hidden" id="fecha_atencion" name="fecha_atencion" value="{{$atencion->fecha}}">
                    <input type="hidden" id="urgencia" name="urgencia" value="P">
                    <input type="hidden" id="agenda" name="agenda" value="">
                    <input type="hidden" id="jornada" name="jornada" value="">
                    <input type="hidden" id="tipo_pago" name="tipo_pago" value="">
                    <input type="hidden" id="valor" name="valor" value="">
                    <input type="submit" class="btn btn-primary btn-sm espacio10" value="Cargar Atencion"/>
                </form>
            </div>
		</div>
	</div>
</div>

<!-- Modal  Cambiar Pacientes-->

<div class="modal fade" id="hijos" role="dialog" aria-labelledby="modal_hijos" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal_hijos">{{'Seleccionar nuevo paciente para atencion'}}</h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <!--<table id="hijos" class="table table-striped table-bordered shadow-lg mt-4 dt-responsive nowrap" style="width:100%">-->
                <table class="table table-striped table-bordered shadow-lg mt-4 nowrap" style="width:100%">
                    <thead class="bg-primary text-white">
                        <tr>
                            <th scope="col" width="60%">{{'Nombre'}}</th>
                            <th scope="col" width="20%">{{'Edad'}}</th>
                            <th scope="col" width="20%">{{'Asignar'}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($pacientes as $paciente)
                            <tr>
                                <td>{{$paciente->nombres." ".$paciente->apellido_paterno." ".$paciente->apellido_materno}}</td>
                                <td>{{edad($paciente->fecha_nacimiento)." años"}}</td>
                                <td>
                                    <input type="button" id="{{$paciente->id}}" onclick="atencion_paciente(this)" value="Asignar" data-dismiss="modal" class="btn btn-sm btn-success" />
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

<!-- Modal  Atencion Movil-->

<div class="modal fade" id="atencion_movil" role="dialog" aria-labelledby="modal_atencion_movil" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal_atencion_movil">{{'Atencion Movil'}}</h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                {{'Proximamente estara habilitada esta opcion'}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

<!-- Modal  Atencion Clinica-->

<div class="modal fade" id="atencion_clinica" role="dialog" aria-labelledby="modal_atencion_clinica" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal_atencion_clinica">{{'Atencion Clinica'}}</h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                {{'Proximamente estara habilitada esta opcion'}}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

<!-- Modal Odontologos-->

<div class="modal fade" id="odontologos" role="dialog" aria-labelledby="modal_odontologos" aria-hidden="true">
	<div class="modal-dialog modal-xl" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal_odontologos">{{'Seleccionar Odontólogo según agenda'}}</h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="identificador" value="#odontologos-dt" >
                <table id="odontologos-dt" 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="10%">{{'Fecha'}}</th>
                            <th scope="col" width="10%">{{'Horario'}}</th>
                            <th scope="col" width="25%">{{'Odontologo'}}</th>
                            <th scope="col" width="15%">{{'Imagen'}}</th>
                            <th scope="col" width="15%">{{'Valoracion'}}</th>
                            <th scope="col" width="15%">{{'Especialidad'}}</th>
                            <th scope="col" width="10%">{{'Asignar'}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($odontologos as $odontologo)
                            <tr>
                                <td>{{date("d-m-Y",strtotime($odontologo->fecha))}}</td>
                                <td>{{date("H:i",strtotime($odontologo->hora_inicio))."-".date("H:i",strtotime($odontologo->hora_termino))}}</td>
                                <td>{{$odontologo->nombres." ".$odontologo->apellido_paterno." ".$odontologo->apellido_materno}}</td>
                                <td>
                                    <img alt="odontologo" src="{{ asset('storage/odontologos/avatar'.$odontologo->user_id.'.png')}}" class="centrador_sel_avatar img-fluid"/>
                                </td>
                                <td>
                                    @if ($odontologo->valoracion_entera == NULL)
                                        <h6 class="text-left color_pag">{{'Sin Valoraciones'}}</h6>
                                    @else
                                        <img alt="Valoracion" src="{{ asset('img/estrellas/'.$odontologo->valoracion_entera.'.png')}}" width="180px" height="40px" class="img-fluid"/>
                                    @endif
                                </td>
                                <td>{{$odontologo->especialidad}}</td>
                                <td>
                                    <input type="button" id="{{$odontologo->agenda_id}}" name="{{$odontologo->jornada}}" onclick="seleccionar_odontologo(this)" value="Seleccionar" data-dismiss="modal" class="btn btn-sm btn-success" />
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

<!-- Modal Pagos WebPay-->

<div class="modal fade" id="webpay" role="dialog" aria-labelledby="modal_webpay" aria-hidden="true">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal_webpay">
                    Simulacion de Pago - WebPay
                </h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-lg-4 col-12">
                    <h6 class="text-left color_pag espacio5">{{'Valor Atencion $186.000.-'}}</h6>
                    <h6 class="text-left color_pag espacio5">{{'Promocion.-'}}</h6>
                    <h6 class="text-left color_pag espacio5">{{'$108.500.-'}}</h6>
                    @if(isset($atencion->odontologo_id))
                        <button type="button" id="boton_pago_webpay" onclick="pago_webpay()" class="btn btn-primary" data-dismiss="modal">Pagar</button>
                    @else
                        <button type="button" disabled id="boton_pago_webpay" onclick="pago_webpay()" class="btn btn-primary" data-dismiss="modal">Pagar</button>
                    @endif
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

<!-- Modal Pagos MercadoPago-->

<div class="modal fade" id="mercado" role="dialog" aria-labelledby="modal_mercado" aria-hidden="true">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="modal_mercado">
                    Simulacion de Pago - Mercado Pago
                </h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-lg-4 col-12">
                    <h6 class="text-left color_pag espacio5">{{'Valor Atencion $186.000.-'}}</h6>
                    <h6 class="text-left color_pag espacio5">{{'Promocion.-'}}</h6>
                    <h6 class="text-left color_pag espacio5">{{'$108.500.-'}}</h6>
                    @if(isset($atencion->odontologo_id))
                        <button type="button" id="boton_pago_mercado" onclick="pago_mercado()" class="btn btn-primary" data-dismiss="modal">Pagar</button>
                    @else
                        <button type="button" disabled id="boton_pago_mercado" onclick="pago_mercado()" class="btn btn-primary" data-dismiss="modal">Pagar</button>
                    @endif
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

<!-- Modal Pagos Transferencia-->

<div class="modal fade" id="transferencia" role="dialog" aria-labelledby="modal_transferencia" aria-hidden="true">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title color_pag" id="modal_transferencia">
                    Pago por Transferencia Bancaria
                </h5> 
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="col-lg-12 col-12">
                    <h5 class="text-left color_pag">{{'Datos Para transferencia'}}</h5>
                    <h6 class="text-left color_pag">{{'Razon : HappyBee Spa'}}</h6>
                    <h6 class="text-left color_pag">{{'Cuenta Corriente : 999-999-999'}}</h6>
                    <h6 class="text-left color_pag">{{'Banco : Banco Nombre S.A'}}</h6>
                    <h6 class="text-left color_pag">{{'Rut : 77.777.777-7'}}</h6>
                    <h6 class="text-left color_pag">{{'E-mail : ventas@happybee.cl'}}</h6>
                </div>
                <div class="col-lg-12 col-12 espacio20">
                    <h6 class="text-left color_pag espacio5">{{'Valor Atencion $186.000.-'}}</h6>
                    <h6 class="text-left color_pag espacio5">{{'Promocion.-'}}</h6>
                    <h4 class="text-left color_pag espacio5">{{'$108.500.-'}}</h4>
                </div>
                <div class="col-lg-12 col-12 espacio20">
                    <div class="form-group">
                        <input type="hidden" name="MAX_FILE_SIZE" value="10000000"> 
                        <label for="comprobante">Subir Comprobante de Transferencia</label>
                        <input type="file" name="comprobante" class="form-control-file color_pag" id="comprobante"/>
                    </div>
                </div>
                <div class="col-lg-4 col-12 espacio20">
                    @if(isset($atencion->odontologo_id))
                        <button type="button" id="boton_pago_transferencia" onclick="pago_transferencia()" class="btn btn-primary" data-dismiss="modal">Enviar Pago</button>
                    @else
                        <button type="button" disabled id="boton_pago_transferencia" onclick="pago_transferencia()" class="btn btn-primary" data-dismiss="modal">Enviar Pago</button>
                    @endif
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
            </div>
        </div>   
    </div>
</div>

@stop

@section('scripts')
    <script src="{{ asset('js/jquery-3.5.1.js') }}" defer></script>
    <script src="{{ asset('js/popper.min.js') }}" defer></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" defer></script>
    <script src="{{ asset('js/scripts.js') }}" defer></script>
    <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