@extends('layouts.person')
@section('contenido')
    @php($searchText = empty($searchText) ? -1 : $searchText)
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href='../lib/main.css' rel='stylesheet' />
    <script src='../lib/main.js'></script>
    <script>
        var calendar = null;
        document.addEventListener('DOMContentLoaded', function() {


            var calendarEl = document.getElementById('calendar');
            let listarCita = "{{route('listarCitaPaciente', ':id')}}";
            listarCita = listarCita.replace(':id', @json($searchText));

            calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                },
                initialView: 'timeGridDay',
                locale: 'es',
                allDaySlot: false,
                slotMinTime: '{{ $empresa->horaEntrada }}',
                slotMaxTime: '{{ $empresa->horaSalida }}',
                editable: true,
                navLinks: true,
                selectable: true,
                selectMirror: true,
                slotLabelFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                },
                eventTimeFormat: {
                    hour: '2-digit',
                    minute: '2-digit',
                    hour12: true
                },
                select: function(arg) {

                    let f = moment(arg.start).format("YYYY-MM-DD");
                    let hi = moment(arg.start).format("HH:mm:ss");
                    console.log(hi);
                    $("#txtFecha").val(f);
                    $("#txtHoraInicial").val(hi);
                    $("#txtTiempo").val("{{ $empresa->intervCita }}");
                    $("#agenda_modal").modal();

                    calendar.unselect()
                },
                eventClick: function(info) {
                    // recargarLista2();

                    $("#txtFecha_e").val(moment(info.event.start).format('YYYY-MM-DD'));
                    $("#txtHoraInicial_e").val(moment(info.event.start).format('HH:mm:ss'));
                    $("#id_e").val(info.event.id);
                    $("#ddlPacientes_e").val(info.event.extendedProps.codPaciente);
                    $("#ddlConsultorio_e").val(info.event.extendedProps.codConsultorio);
                    // $("#ddlDoctor_e").val(info.event.extendedProps.codUsuario);
                    $("#txtIndicaciones_e").val(info.event.extendedProps.indicaciones);
                    console.log(info.event.extendedProps.codPaciente);
                    $("#txtTiempo_e").val(info.event.extendedProps.tiempo);
                    $("#txtCosto_e").val(info.event.extendedProps.costo);
                    $("#txtEstado_e").val(info.event.extendedProps.estado);
                    $("#txtAsunto_e").val(info.event.extendedProps.asunto);
                    // recargarLista2(info.event.extendedProps.codUsuario);
                    var codigoPaciente = parseInt('{{auth()->guard('webpaciente')->user()->codPaciente}}');
                    if (codigoPaciente === parseInt(info.event.extendedProps.codPaciente)) {
                        $("#agenda_modal_edit").modal();
                    }else{
                        Swal.fire(
                            'NO PUEDE REALIZAR ESTA ACCIÓN',
                            'No tiene permiso para editar registros que no le correspondan',
                            'warning'
                        );
                        // alert('No tiene permiso para editar este registro');
                    }



                },
                editable: true,
                eventDrop: function(info) {
                    if (info.event.extendedProps.estado === 'CULMINADO') {
                        Swal.fire(
                            'El Registro no se podrá modificar',
                            'Este registro se encuentra "CULMINADO" y no es posible hacer ninguna modificación.',
                            'warning'
                        );
                        calendar.refetchEvents();
                    } else {
                        var fd = new FormData(document.getElementById("formulario_agenda_edit"));
                        fd.append("id", info.event.id);
                        fd.append("txtFecha", moment(info.event.start.toISOString()).format(
                            "YYYY-MM-DD"));
                        fd.append("txtHoraInicial", moment(info.event.start.toISOString()).format(
                            "HH:mm:ss"));
                        fd.append("txtHoraFinal", moment(info.event.end.toISOString()).format(
                            "HH:mm:ss"));
                        console.log(info.event.extendedProps.estado)
                        edit(fd);
                    }
                    // info.revert();
                },

                events: listarCita,
            });
            calendar.render();


        });


        function guardar() {
            var fd = new FormData(document.getElementById("formulario_agenda"));
            let fecha = $("#txtFecha").val();
            let hora = $("#txtHoraInicial").val();
            let tiempo = $("#txtTiempo").val();
            let hora_inicial = moment(fecha + " " + hora).format("HH:mm:ss");
            let hora_final = moment(fecha + " " + hora).add(tiempo, 'm').format("HH:mm:ss");

            fd.append("txtHoraInicial", hora_inicial);
            fd.append("txtHoraFinal", hora_final);


            const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                    onOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                });
            if ($("#txtCosto").val() === '') {
                Toast.fire({
                    title: "Cancelado",
                    icon: 'error',
                    title: 'El valor del Costo no debe estar vacio.',
                    customClass: 'swal-pop',
                })
            }else if($("#txtTiempo").val() === ''){
                Toast.fire({
                    title: "Cancelado",
                    icon: 'error',
                    title: 'El valor del Tiempo no debe estar vacio.',
                    customClass: 'swal-pop',
                })
            }else if(parseInt($("#txtTiempo").val()) <= 0){
                Toast.fire({
                    title: "Cancelado",
                    icon: 'error',
                    title: 'El valor del Tiempo no puede ser negativo o cero.',
                    customClass: 'swal-pop',
                })
            }else if(hora_inicial < '{{$empresa->horaEntrada}}'){
                Toast.fire({
                    title: "Cancelado",
                    icon: 'error',
                    title: 'La cita no puede ser antes de las {{$empresa->horaEntrada}}',
                    customClass: 'swal-pop',
                })
            }else if(hora_final > '{{$empresa->horaSalida}}'){
                Toast.fire({
                    title: "Cancelado",
                    icon: 'error',
                    title: 'La cita no puede durar más de las {{$empresa->horaSalida}}',
                    customClass: 'swal-pop',
                })
            }else {
                $.ajax({
                    url: "{{route('guardarCitaPaciente')}}",
                    type: "POST",
                    data: fd,
                    processData: false, // tell jQuery not to process the data
                    contentType: false // tell jQuery not to set contentType

                }).done(function(r) {
                    if (r && r.ok == 0) {
                        calendar.refetchEvents();
                        Swal.fire(
                            'Operación Correcta',
                            'Se registro la agenda!',
                            'success'
                        );
                        limpiar();
                        calendar.refetchEvents()
                    } else if (r && r.ok == 1) {
                        Swal.fire(
                            'Seleccione otra fecha',
                            'La fecha seleccionada es una fecha anterior a la fecha actual!',
                            'warning'
                        );
                    } else if (r && r.ok == 2) {
                        Swal.fire(
                            'Personal medico ocupado',
                            'El Personal medico seleccionado ya tiene una cita pendiente en esas horas!',
                            'warning'
                        );
                    } else if (r && r.ok == 3) {
                        Swal.fire(
                            'Paciente con cita pendiente',
                            'El paciente seleccionado ya tiene una cita pediente en estas horas!',
                            'warning'
                        );
                    } else {
                        // console.log(r.ok)
                        alert(r.ok);
                    }
                });
            }
        }

        function edit(fd) {
            console.log(fd);
            $.ajax({
                url: "{{route('editarCitaPaciente')}}",
                type: "POST",
                data: fd,
                processData: false, // tell jQuery not to process the data
                contentType: false // tell jQuery not to set contentType

            }).done(function(r) {
                if (r && r.ok == 0) {
                    Swal.fire(
                        'Operación Correcta',
                        'Se registro la agenda!',
                        'success'
                    );
                    limpiar();
                } else if (r && r.ok == 1) {
                    Swal.fire(
                        'Seleccione otra fecha',
                        'La fecha seleccionada es una fecha anterior a la fecha actual!',
                        'warning'
                    );
                } else if (r && r.ok == 2) {
                    Swal.fire(
                        'Personal medico ocupado',
                        'El Personal medico seleccionado ya tiene una cita pendiente en esas horas!',
                        'warning'
                    );
                } else if (r && r.ok == 3) {
                    Swal.fire(
                        'Paciente con cita pendiente',
                        'El paciente seleccionado ya tiene una cita pediente en estas horas!',
                        'warning'
                    );
                } else {
                    // console.log(r.ok)
                    alert("Ocurrio un error");
                }
                calendar.refetchEvents();
            });
        }
        // Editar completo
        function editar() {
            if ($("#txtEstado_e").val() === 'CULMINADO') {
                Swal.fire(
                    'El Registro no se podrá modificar',
                    'Este registro se encuentra "CULMINADO" y no es posible hacer ninguna modificación.',
                    'warning'
                );
                calendar.refetchEvents();
            } else {
                var fd = new FormData(document.getElementById("formulario_agenda_edit2"));
                let fecha = $("#txtFecha_e").val();
                let hora = $("#txtHoraInicial_e").val();
                let tiempo = $("#txtTiempo_e").val();
                let hora_final = moment(fecha + " " + hora).add(tiempo, 'm').format("HH:mm:ss");

                fd.append("txtHoraFinal_e", hora_final);


                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 3000,
                    timerProgressBar: true,
                    onOpen: (toast) => {
                        toast.addEventListener('mouseenter', Swal.stopTimer)
                        toast.addEventListener('mouseleave', Swal.resumeTimer)
                    }
                });


                if ($("#txtCosto_e").val() === '') {
                Toast.fire({
                    title: "Cancelado",
                    icon: 'error',
                    title: 'El valor del Costo no debe estar vacio.',
                    customClass: 'swal-pop',
                })
                }else if($("#txtTiempo_e").val() === ''){
                    Toast.fire({
                        title: "Cancelado",
                        icon: 'error',
                        title: 'El valor del Tiempo no debe estar vacio.',
                        customClass: 'swal-pop',
                    })
                }else if(parseInt($("#txtTiempo_e").val()) <= 0){
                    Toast.fire({
                        title: "Cancelado",
                        icon: 'error',
                        title: 'El valor del Tiempo no puede ser negativo o cero.',
                        customClass: 'swal-pop',
                    })
                }else if(hora < '{{$empresa->horaEntrada}}'){
                    Toast.fire({
                        title: "Cancelado",
                        icon: 'error',
                        title: 'La cita no puede ser antes de las {{$empresa->horaEntrada}}',
                        customClass: 'swal-pop',
                    })
                }else if(hora_final > '{{$empresa->horaSalida}}'){
                    Toast.fire({
                        title: "Cancelado",
                        icon: 'error',
                        title: 'La cita no puede durar más de las {{$empresa->horaSalida}}',
                        customClass: 'swal-pop',
                    })
                }else {
                    $.ajax({
                        url: "{{route('editarCitaPaciente2')}}",
                        type: "POST",
                        data: fd,
                        processData: false, // tell jQuery not to process the data
                        contentType: false // tell jQuery not to set contentType

                    }).done(function(r) {
                        if (r && r.ok == 0) {
                            // calendar.refetchEvents();
                            Swal.fire(
                                'Operación correcta',
                                'Se modificó la agenda!',
                                'success'
                            );
                            // limpiar();
                            $("#agenda_modal_edit").modal('hide');

                        } else if (r && r.ok == 1) {
                            Swal.fire(
                                'Seleccione otra fecha',
                                'La fecha seleccionada es una fecha anterior a la fecha actual!',
                                'warning'
                            );
                        } else if (r && r.ok == 2) {
                            Swal.fire(
                                'Personal medico ocupado',
                                'El Personal medico seleccionado ya tiene una cita pendiente en esas horas!',
                                'warning'
                            );
                        } else if (r && r.ok == 3) {
                            Swal.fire(
                                'Paciente con cita pendiente',
                                'El paciente seleccionado ya tiene una cita pediente en estas horas!',
                                'warning'
                            );
                        } else {
                            // console.log(r.ok)
                            alert("Ocurrio un error");
                        }
                        calendar.refetchEvents();

                    });
                }
            }
        }

        function limpiar() {
            $("#agenda_modal").modal('hide');
            $("#txtFecha").val("");
            $("#txtHoraInicial").val("");
            $("#txtTiempo").val("");
            $("#txtIndicaciones").val("");
            $("#txtAsunto").val("");
            $("#txtCosto").val("0.00");
            // $("#ddlUsuarios").val("");
        }
    </script>




    <section class="content-header" style="padding: 0px">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <span class="title_header">CITAS</span><br>
                    <p>ESPECIALISTA: {{$doctor->nombres}}</p>
                    <p>CONSULTORIO: {{$doctor->nomConsul}}</p>
                </div>

            </div>
        </div>
    </section>


    <div class="row">
        <div class="col-12">
            <div id='calendar' style="margin-top: 0px;"></div>
        </div>
    </div>

    <div>
        <form action="" id="formulario_agenda_edit">
            @csrf
        </form>
    </div>

    <div class="modal fade" id="agenda_modal" data-backdrop="static" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-info">
                    <h5 class="modal-title" style="text-align: center; font-weight: bold">Agendar</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="" id="formulario_agenda">
                        @csrf
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Fecha</label>
                                    <input type="date" class="form-control" id="txtFecha" name="txtFecha" required>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">Hora Inicial</label>
                                    <input type="time" class="form-control" id="txtHoraInicial" required>
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">Tiempo (minutos)</label>
                                    <input type="number" class="form-control" id="txtTiempo" name="txtTiempo" min="{{$empresa->intervCita}}" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <input type="hidden" name="ddlUsuarios">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Motivo de Cita</label>
                                    <input type="text" class="form-control" id="txtAsunto" name="txtAsunto"
                                        placeholder="Ejm. Dolor de cabeza.">
                                </div>
                                <div class="form-group">
                                    <label for="">Paciente</label>
                                    <input type="hidden" name="ddlPacientes" id="ddlPacientes" value="{{auth()->guard('webpaciente')->user()->codPaciente}}">
                                    <input type="text"  class="form-control" value="{{auth()->guard('webpaciente')->user()->nombres}}" disabled>
                                </div>

                                <div class="form-group">
                                    <label for="">Consultorio</label>
                                    <input type="text" class="form-control" name="ddlConsultorio" value="{{$doctor->nomConsul}}" disabled>
                                </div>
                                <div class="form-group">
                                    <label for="">Doctor</label>
                                    <input type="hidden" name="ddlDoctor" id="ddlDoctor" value="{{ $doctor->codUsuario }}">
                                    <input type="text" disabled class="form-control" value="{{ $doctor->nombres }}">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Costo <span style="font-weight: normal; color: #c92f2f">El valor lo asignará el especialista</span></label>
                                    <input type="text" class="form-control txtCosto" id="txtCosto" name="txtCosto"
                                        value="0.00" required readonly>
                                </div>
                                <div class="form-group">
                                    <label for="">Indicaciones <span style="font-weight: normal; color: #c92f2f">El valor lo asignará el especialista</span></label>
                                    <textarea class="form-control" name="txtIndicaciones" id="txtIndicaciones" cols="30"
                                        rows="5" readonly></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button onclick="guardar()" type="button" class="btn btn-success">Guardar</button>
                </div>
            </div>
        </div>
    </div>
    {{-- -----------------------------------MODAL EDIT-------------------------------------------------- --}}
    <div class="modal fade" id="agenda_modal_edit" data-backdrop="static" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-info">
                    <h5 class="modal-title" style="text-align: center; font-weight: bold">Agendar</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="" id="formulario_agenda_edit2">
                        @csrf
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Fecha</label>
                                    <input type="hidden" id="id_e" name="id_e">
                                    <input type="hidden" id="txtEstado_e" name="txtEstado_e">
                                    <input type="date" class="form-control" id="txtFecha_e" name="txtFecha_e">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">Hora Inicial</label>
                                    <input type="time" class="form-control" id="txtHoraInicial_e" name="txtHoraInicial_e">
                                </div>
                            </div>
                            <div class="col-3">
                                <div class="form-group">
                                    <label for="">Tiempo (minutos)</label>
                                    <input type="number" class="form-control" id="txtTiempo_e" name="txtTiempo_e">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Motivo de Cita</label>
                                    <input type="text" class="form-control" id="txtAsunto_e" name="txtAsunto_e"
                                        placeholder="Ejm. Dolor de cabeza.">
                                </div>
                                <div class="form-group">
                                    <label for="">Paciente</label>
                                    <input type="hidden" name="ddlPacientes_e" id="ddlPacientes_e" value="{{auth()->guard('webpaciente')->user()->codPaciente}}">
                                    <input type="text" class="form-control" value="{{auth()->guard('webpaciente')->user()->nombres}}" disabled>
                                </div>
                                <div class="form-group">
                                    <label for="">Consultorio</label>
                                    <input type="text" class="form-control" name="ddlConsultorio_e" value="{{$doctor->nomConsul}}" disabled>
                                </div>
                                <div class="form-group">
                                    <label for="">Doctor</label>
                                    <input type="hidden" name="ddlDoctor_e" id="ddlDoctor_e" value="{{ $doctor->codUsuario }}">
                                    <input type="text" disabled class="form-control" value="{{ $doctor->nombres }}">
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="form-group">
                                    <label for="">Costo</label>
                                    <input type="text" class="form-control txtCosto_e" id="txtCosto_e" name="txtCosto_e"
                                        required readonly>
                                </div>
                                <div class="form-group">
                                    <label for="">Indicaciones</label>
                                    <textarea class="form-control" name="txtIndicaciones_e" id="txtIndicaciones_e" readonly
                                        cols="30" rows="5"></textarea>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button onclick="editar()" type="button" class="btn btn-success">Editar</button>
                </div>
            </div>
        </div>
    </div>
    {{-- @if (auth()->user()->tipo == 'SECRETARIA' || auth()->user()->tipo == 'ADMINISTRADOR')
        <script>
            const selectElement = document.querySelector('.searchText');
            selectElement.addEventListener('change', (event) => {
                $("#buscar").click();
            });
        </script>
    @endif --}}
    @push('scripts')
        <script>
            $('.txtCosto').on('input', function() {
                this.value = this.value.replace(/[^0-9,.]/g, '').replace(/,/g, '.');
            });
            $('.txtCosto_e').on('input', function() {
                this.value = this.value.replace(/[^0-9,.]/g, '').replace(/,/g, '.');
            });
        </script>
        @if (Session::has('success'))
            <script>
                toastr.success('{{ Session::get('success') }}', 'Operación Correcta', {
                    "positionClass": "toast-top-right"
                })
            </script>
        @endif

        @if (count($errors) > 0)
            <script type="text/javascript">
                $(document).ready(function() {