@extends('layouts.app')

@section('head-title',' Cancelaciones')

@section('content_title','Cancelaciones')

@section('content')
    <div class="row">
        <div class="col-12 row">
            <div class="col-2 form-group">
                <label for="profesional">Profesional</label>
                <select name="profesional" class="form-control select2" onchange="filterList()">
                    <option value="">Todos</option>
                    @foreach ($doctores as $doctor)
                        <option value="{{ $doctor->id }}">{{ $doctor->apellidos }} {{ $doctor->nombres }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-2 form-group">
                <label for="sanatorio">Sede</label>
                <select name="sanatorio" class="form-control select2" onchange="filterList()">
                    <option value="">Todos</option>
                    @foreach ($sedes as $key => $sede)
                        <option value="{{ $key }}">{{ $sede }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-2 form-group">
                <label for="estado">Estado</label>
                <select name="estado" class="form-control select2" onchange="filterList()">
                    <option value="">Todos</option>
                    @foreach ($estados as $key => $estado)
                        <option value="{{ $key }}">{{ $estado }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-2 form-group">
                <label for="estado">Tipo</label>
                <select name="tipo" class="form-control select2" onchange="filterList()">
                    <option value="Todos">Todos</option>
                    <option value="Anticipada" {{ Auth::user()->hasRole('Call Center') && session('role') === 'Call Center' ? 'selected' : '' }}>Anticipada</option>
                    <option value="Urgente" {{ Auth::user()->hasRole('Recepción') && session('role') === 'Recepción' ? 'selected' : '' }}>Urgente</option>
                </select>
            </div>
            <div class="col-2 form-group">
                <label for="estado">Servicios</label>
                <select name="servicio" class="form-control select2" onchange="filterList()">
                    <option value="">Todos</option>
                    @foreach ($servicios as $servicio)
                        <option value="{{ $servicio->getKey() }}">{{ $servicio->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-2 form-group">
                <label for="estado">Fecha desde</label>
                <input type="text" name="fecha_reprogramada" id="date" class="form-control datepicker" onchange="filterList()">
            </div>
        </div>

        <button type="button" class="btn btn-primary ml-2 mb-3 mt-2" id="sendMail" style="display: none">Enviar cancelaciones</button>

        <div class="p-2 container-fluid" id="body" title="Gestión de Cancelaciones"></div>
    </div>

@endsection

@section('more_scripts')
    <script>
        const confirmMsg = (title, msg, icon) => {
                    return Swal.fire({
                        title: title,
                        text: msg,
                        icon: icon,
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Confirmar',
                        cancelButtonText: 'Cancelar'
                    }).then((result) => {
                        if (result.value) {
                            return true;
                        } else {
                            return false;
                        }
                    });
                }
        const generateSelect = () => {
            // Creo el div
            const divElement = document.createElement('div');
            divElement.className = 'col-lg-12';
            divElement.id = 'inside-modal-scrollable';

            // Crear el elemento label para "Emails"
            const labelElement = document.createElement('label');
            labelElement.setAttribute('for', 'permisos');
            labelElement.textContent = 'Emails';

            // Creo el select
            const selectElement = document.createElement('select');
            selectElement.id = 'mainSelect';
            selectElement.name = 'mail';
            selectElement.required = true;
            selectElement.className = 'form-control';
            selectElement.multiple = true;

            /*Obtengo los mails desde el controlador y los paso a json*/
            const mails = @json($mails);

            for (const mailsKey in mails) {
                const optionElement = document.createElement('option');
                optionElement.value = mailsKey;
                optionElement.textContent = mails[mailsKey];
                selectElement.appendChild(optionElement);
            }

            // Agregar los elementos al documento HTML
            divElement.appendChild(labelElement);
            divElement.appendChild(selectElement);

            const divElementFather = document.createElement('div');
            divElementFather.appendChild(divElement);

            return divElementFather.innerHTML;
        }
        const mostrarModal = (title, select) => {
            return Swal.fire({
                title: title,
                html: select,
                showCancelButton: true,
                confirmButtonText: 'Enviar',
                cancelButtonText: 'Cancelar',
                showLoaderOnConfirm: true,
                onOpen: function () {
                    $('#mainSelect').select2({
                        dropdownParent: $('#inside-modal-scrollable')
                    });
                    $('.swal2-content').css( 'z-index','auto');
                },
                preConfirm: () => {
                    const selectedValues = $('#mainSelect').val();
                    return selectedValues;
                },
                allowOutsideClick: () => !Swal.isLoading(),
            }).then((result) => {
                return result.value;
            });
        }
        const cancelMsg = (title, text, icon) => {
            return Swal.fire({
                title: title,
                text: text,
                icon: icon,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Entiendo',
            })
        }

        const filterList = async (link = "{{ route('cancelacionesByFilter') }}") => {
            const profesional = document.querySelector("select[name='profesional']");
            const sanatorio = document.querySelector("select[name='sanatorio']");
            const estado = document.querySelector("select[name='estado']");
            const tipo = document.querySelector("select[name='tipo']");
            const servicio = document.querySelector("select[name='servicio']");
            const fecha = document.querySelector("input[name='fecha_reprogramada']");

            saveSession();
            await getList(link, {
                profesional: profesional.options[profesional.selectedIndex].value,
                sanatorio: sanatorio.options[sanatorio.selectedIndex].value,
                estado: estado.options[estado.selectedIndex].value,
                tipo: tipo.options[tipo.selectedIndex].value,
                servicio: servicio.options[servicio.selectedIndex].value,
                date: fecha.value
            });

            let user_is_admin = {!! Auth::user()->hasRole('Administrador') && session('role') === 'Administrador' ? 6 : 0 !!};
            let user_is_callcenter = {!! Auth::user()->hasRole('Call Center')  && session('role') === 'Call Center'? 2 : 0 !!};
            let user_is_recepcion = {!! Auth::user()->hasRole('Recepcion')  && session('role') === 'Recepcion' ? 3 : 0 !!};

            if (user_is_callcenter != 0 || user_is_recepcion != 0) {
                $("#sendMail").css('display', 'none');
                $("#cancelacionesAll").css('display', 'block');
            }

            if (user_is_admin === 6) {
                $("#sendMail").css('display', 'none');
                $("#cancelacionesAll").css('display', 'none');
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            let tipo_cancelacion_filter = document.querySelector("select[name='tipo']").value;
            let fecha_by_type_filter = setDateByType(tipo_cancelacion_filter);

            $('.datetimepicker').datetimepicker({
                format:'d-m-Y H:i',
                dateFormat: "dd-mm-yy",
                timeFormat:  "hh:mm",
                mask:true,
            });

            $('.datepicker').datepicker({
                dateFormat:'dd-mm-yy'
            });

            $('#date').val(fecha_by_type_filter);

            if (!document.referrer.includes('turnos-reprogramados')) {
                saveSession();
            } else {
                replaceSession();
            }

            filterList();
        })

        function setDateByType(tipo_cancelacion) {
            const umbral = Number.parseInt("{{ $umbral->umbral_urgentes }}");
            let date = new Date();
            let day; let month; let year;  let currentDate;

            if (tipo_cancelacion === 'Todos') {
                @if (Auth::user()->hasRole('Administrador') && session('role') === 'Administrador' )
                    currentDate = "{{date('d-m-Y', strtotime('-7 days'))}}";
                @elseif (Auth::user()->hasRole('Recepción') && session('role') === 'Recepción')
                    tipo_cancelacion = 'Urgente';
                @elseif (Auth::user()->hasRole('Call Center') && session('role') === 'Call Center')
                    tipo_cancelacion = 'Anticipada';
                @endif
            }

            if (tipo_cancelacion === 'Urgente') {
                day = String(date.getDate());
                month = String(date.getMonth()+1);
                year = String(date.getFullYear());

                if (day.length === 1) {
                    day = '0' + day;
                }

                if (month.length === 1) {
                    month = '0' + month;
                }

                currentDate = day+"-"+month+"-"+year;
            }

            if (tipo_cancelacion === 'Anticipada') {
                date.setHours(date.getHours() - umbral);
                day = String(date.getDate());
                month = String(date.getMonth()+1);
                year = String(date.getFullYear());

                if (day.length === 1) {
                    day = '0' + day;
                }

                if (month.length === 1) {
                    month = '0' + month;
                }

                currentDate = day+"-"+month+"-"+year;
            }

            return currentDate;
        }

        cancelacion_id = '';
        cancelaciones_array = [];
        cancelaciones_array_unique = [];
        href = '{{ route('cancelaciones.mail.send') }}';

        function reciveId(cancelacion_id) {
            $("#cancelacionesAll").css('display', 'none');
            $("#sendMail").css('display', 'block');

            cancelaciones_array.push(cancelacion_id);

            if (cancelaciones_array.length > 0) {
                cancelaciones_array.forEach(cancelacionId => {
                    if (!cancelaciones_array_unique.includes(cancelacionId)) {
                        cancelaciones_array_unique.push(cancelacionId);
                    }
                });
            }
        }

        if (cancelaciones_array_unique.length >= 0) {
            $("#sendMail").click(function () {
                mostrarModal('Seleccion de email',generateSelect()).then(resModal => {
                    if( resModal) {
                        if(resModal.length > 0){
                            confirmMsg("Atención!", "Se enviarán por correo solamente las cancelaciones seleccionadas en pantalla.", 'info')
                                .then(res => {
                                    if (res) {
                                        sendCancelacionToMail(cancelaciones_array_unique, href,resModal);
                                    }
                                })
                        }else{
                            cancelMsg('Error!','Debe seleccionar al menos un email','error');
                        }

                    }
                })
            });
        }

        function sendAll(cancelaciones) {
            if (cancelaciones.length > 0) {
                mostrarModal('Seleccion de email',generateSelect()).then(resModal => {
                    if(resModal){
                        if(resModal.length > 0){
                            confirmMsg("Atención!", "Se enviarán por correo todas las cancelaciones listadas en pantalla.", 'info')
                                .then(res => {
                                    if (res) {
                                        sendCancelacionToMail(cancelaciones, href,resModal);
                                    }
                                })
                        }else{
                            cancelMsg('Error!','Debe seleccionar al menos un email','error');
                        }
                    }
                })
            }
        }

        const replaceSession = () => {
            const profesional = document.querySelector("select[name='profesional']");
            const sanatorio = document.querySelector("select[name='sanatorio']");
            const estado = document.querySelector("select[name='estado']");
            const tipo = document.querySelector("select[name='tipo']");
            const servicio = document.querySelector("select[name='servicio']");
            const fecha = document.querySelector("input[name='fecha_reprogramada']");

            // profesional.selectedIndex = sessionStorage.getItem('profesional');
            profesional.options[sessionStorage.getItem('profesional')].setAttribute('selected', true);
            sanatorio.selectedIndex = sessionStorage.getItem('sanatorio');
            estado.selectedIndex = sessionStorage.getItem('estado');
            tipo.selectedIndex = sessionStorage.getItem('tipo');
            servicio.selectedIndex = sessionStorage.getItem('servicio');
            fecha.value = sessionStorage.getItem('fecha');

            $('.select2').select2({
                theme: "bootstrap-5"
            });
        }

        const saveSession = () => {
            const profesional = document.querySelector("select[name='profesional']");
            const sanatorio = document.querySelector("select[name='sanatorio']");
            const estado = document.querySelector("select[name='estado']");
            const tipo = document.querySelector("select[name='tipo']");
            const servicio = document.querySelector("select[name='servicio']");
            const fecha = document.querySelector("input[name='fecha_reprogramada']");

            sessionStorage.setItem('profesional', profesional.selectedIndex);
            sessionStorage.setItem('sanatorio', sanatorio.selectedIndex);
            sessionStorage.setItem('estado', estado.selectedIndex);
            sessionStorage.setItem('tipo', tipo.selectedIndex);
            sessionStorage.setItem('servicio', servicio.selectedIndex);
            sessionStorage.setItem('fecha', fecha.value);
        }

    </script>
@endsection