@extends('layouts.app')

@section('head-title',' Turnos reprogramados')

@section('content_title','Turnos reprogramados')

@section('btn_principal')
    <button
      class="btn btn-primary"
      onclick="nuevoTurno()"
      >Nueva propuesta <i class="fa fa-plus"></i>
    </button>
@endsection

@section('content')
    <div class="row">
        <div class="col-12 row">
            <div class="col-8 form-group">
                <label class="label-form">Doctor</label>
                <p class="form-control">{{ $cancelacion->doctor->apellidos }} {{ $cancelacion->doctor->nombres }}</p>
            </div>
            <div class="col-4 form-group">
                <label class="label-form">Estado</label>
                <p class="form-control">{{ $cancelacion->estadoCancelacion->nombre }}</p>
            </div>
            <div class="col-6 form-group">
                <label class="label-form">Fecha Desde</label>
                <p class="form-control">{{ $cancelacion->fecha_desde->format('d-m-Y H:i') }}</p>
            </div>
            <div class="col-6 form-group">
                <label class="label-form">Fecha Hasta</label>
                <p class="form-control">{{ $cancelacion->fecha_hasta->format('d-m-Y H:i') }}</p>
            </div>
        </div>

        {{--****** HIDE ******--}}
        <div class="col-2 d-none">
            <label>Filtrar por estado</label>
            <select name="estado" class="select2 form-control" onchange="filterListByState()">
                <option value="">Todos</option>
                @foreach ($estados as $key => $estado)
                    <option value="{{ $key }}">{{ $estado }}</option>
                @endforeach
            </select>
        </div>

        @if ($cancelacion->fechasPropuestas->count() > 0)
            <div class="col-10">
                <label>Fechas Propuestas / Sede</label>
                <div class="form-group">
                    @foreach ($cancelacion->fechasPropuestas as $fecha)
                        <label class="badge badge-info">{{ $fecha->fecha_desde->format('d-m-Y H:i') }} - {{ $fecha->fecha_hasta->format('d-m-Y H:i') }}</label> - <label class="badge badge-info">{{ $cancelacion->sanatorio->nombre }}</label>
{{--                        <label class="btn btn-primary" onclick="nuevoTurno({{ $cancelacion->sanatorio->id }},{{ $fecha->fecha_desde->format('d-m-Y H:i') }},{{ $fecha->fecha_hasta->format('d-m-Y H:i') }})"> Agregar </label>--}}
                        <label
                            class="badge badge-primary"
                            onclick="nuevoTurno('{{ $cancelacion->sanatorio->id}}','{{$fecha->fecha_desde->format('d-m-Y H:i')}}','{{$fecha->fecha_hasta->format('d-m-Y H:i')}}')"
                        >Copiar propuesta <i class="fa fa-copy"></i>
                        </label>
                        <br>
                    @endforeach
                </div>
            </div>
        @endif

        <div class="p-2 container-fluid" id="body" title="Listado de Turnos reprogramados" data-list="{{ route('reprogramados.list', $cancelacion) }}"></div>

        @if ($cancelacion->turnosReprogramados->count() > 0)
            <div class="form-group col-lg-10 align-content-center">
                <a href="{{route('indexRecepcionist')}}" class="btn btn-primary">Volver</a>
                <button type="submit" class="btn btn-danger"onclick="changeStatusCancelacion('{{ route('cancelaciones.status.update', $cancelacion->id) }}', 2)">Finalizar</button>
            </div>
        @else
            <div class="form-group col-lg-10 align-content-center">
                <a href="{{route('indexRecepcionist')}}" class="btn btn-primary">Volver</a>
                <button type="submit" class="btn btn-danger"onclick="changeStatusCancelacion('{{ route('cancelaciones.status.update', $cancelacion->id) }}', 5)">Finalizar</button>
            </div>
        @endif

    </div>
@endsection

@section('more_scripts')
    <script>
        const estado = document.querySelector("select[name='estado']");

        const filterListByState = () => {
            getList("{{ route('reprogramados.list', $cancelacion) }}", {
                estado: estado.options[estado.selectedIndex].value
            });
        }

        const nuevoTurno = async (sanatorio_id = null, fecha_desde = null, fecha_hasta = null ) => {
            await showForm("{{ route('reprogramados.create', $cancelacion) }}", )
            .then(() => {
                document.querySelector("select[name='sanatorio']").focus();
                if(sanatorio_id && fecha_desde && fecha_hasta){
                    document.querySelector("input[name='fecha_desde']").value = fecha_desde;
                    document.querySelector("input[name='fecha_hasta']").value = fecha_hasta ;
                    document.querySelector("select[name='sanatorio']").value = sanatorio_id;
                }
                estado.parentElement.setAttribute('hidden', true);
                //document.querySelector("input[name='paciente_documento']").focus();
            })
        }

        const changeStatusCancelacion = (href, status) => {
            let msg = "";
            let icon = "";

            if (status === 2) {
                this.msg = "Si acepta finalizar la gestión de la cancelación pasará a reprogramada y no se podrá volver a configurar.";
                this.icon = "info";
            }

            if (status === 5) {
                this.msg = "Si acepta finalizar la gestión de la cancelación sin agregar una fecha su estado pasará a cancelado y no podrá reprogramar una fecha.";
                this.icon = "warning";
            }

            confirmMsg("Atención", this.msg , this.icon)
                .then(res => {
                    if (res) {
                        axios({
                            method: 'put',
                            url: href,
                            data: {
                                status: status
                            }
                        })
                        .then(res => {
                            window.location.href = ("{!! route('indexRecepcionist') !!}");
                        });
                    }
                })
        }


    </script>
@endsection