//last: 2020-05-20 20:13
let dataSpecialty = {!! $dataSpecialty !!};
let dataUnit = {!! $dataUnit !!};

var $_GET = {};
if(document.location.toString().indexOf('?') !== -1) {
    var query = document.location
                   .toString()
                   // get the query string
                   .replace(/^.*?\?/, '')
                   // and remove any existing hash string (thanks, @vrijdenker)
                   .replace(/#.*$/, '')
                   .split('&');

    for(var i=0, l=query.length; i<l; i++) {
       var aux = decodeURIComponent(query[i]).split('=');
       $_GET[aux[0]] = aux[1];
    }
}

let specialty_id = $_GET["specialty"];

//let formSteps = new steps(document.querySelector('#steps'));
let apihost = 'https://upapet.com.br';


function init(){

    document.querySelectorAll('a').forEach((a) => {
        let href = a.getAttribute('href');
        if( href.indexOf('#') != -1 ){
            a.addEventListener('click',function( e ){

                hideAll()
                document.querySelector( href ).style.display = 'block'

                e.stopPropagation();
                e.preventDefault();
            })
        }
    });

    document.querySelectorAll('input,select').forEach((a) => {
        a.setAttribute('autocomplete', 'off');
    });
}

function initFormAccount( calbackLogin = function(){} ){

    document.querySelectorAll('input').forEach((input) => {
        if( String(input.dataset.original_id).indexOf('password') != -1){
            input.setAttribute('type','password')
        }
    });

    document.querySelector('#form-login button').addEventListener('click',function( e ){

        e.stopPropagation();
        e.preventDefault();

        let email = document.querySelector('#form-login [data-original_id=account__email]').value
        let password = document.querySelector('#form-login [data-original_id=account__password]').value

        loading( document.querySelector('#form-login') )
        ajax(apihost+`/api/account/login`, 'post', { email : email, password: password } , function( data ){

            // api_token
            localStorage.setItem('authapi',JSON.stringify(data) );
            //location.reload()
            calbackLogin()

        }, function( ){
            Swal.fire({
                type: 'error',
                title: 'Erro ao fazer Login',
                text: 'E-mail e/ou senha inválido!'
            }).then((result) => {
                loadingOff( document.querySelector('#form-login') )
            })
        })


    })

    initForm()

    document.querySelector('#form-forgot button').addEventListener('click',function( e ){

        e.stopPropagation();
        e.preventDefault();

        let form = document.querySelector('#form-forgot')
        var data = dataForm(form);
        loading( form )
        ajax(apihost+`/api/account/forgot`, 'post', data , function( data ){

            if( data.success ){
                FormAlterarSenha()
            } else {
                Swal.fire({
                    type: 'error',
                    title: 'E-mail não encontrado',
                    text: data.message
                }).then((result) => {
                    loadingOff( form )
                })
            }

        }, function( data ){
            loadingOff( form )
        })


    })

    document.querySelector('#form-change button').addEventListener('click',function( e ){

        e.stopPropagation();
        e.preventDefault();

        let form = document.querySelector('#form-change')
        var data = dataForm(form);
        loading( form )
        ajax(apihost+`/api/account/change-password`, 'post', data , function( data ){

            if( data.success ){
                Swal.fire({
                    type: 'success',
                    title: 'Senha alterada com sucesso',
                    showConfirmButton: false,
                    timer: 1500
                }).then((result) => {
                    FormLogin()
                })
            } else {
                Swal.fire({
                    type: 'error',
                    title: data.message,
                    text: data.message
                }).then((result) => {
                    loadingOff( form )
                })
            }

        }, function( data ){
            let errors = data.errors;
            for( let e in errors ){

                Swal.fire({
                    type: 'error',
                    title: 'Ops! Houve algum problema!',
                    text: errors[e][0]
                }).then((result) => {
                    loadingOff( form )

                })

                break;
            }
        })


    })

    let dataGender = { 'm' : "Masculino", 'f' : "Feminino" };
    for( let i in dataGender ){
        let option = document.createElement('option');
        option.value = i
        option.textContent = dataGender[i];
        //if( option ) document.querySelector('[data-original_id=account__gender]').appendChild( option );
    }

    let dataGenderPet = { 'm' : "Macho", 'f' : "Fêmea" };
    for( let i in dataGenderPet ){
        let option = document.createElement('option');
        option.value = i
        option.textContent = dataGenderPet[i];
        if( option ) document.querySelector('[data-original_id=account_pet__gender]').appendChild( option );
    }

    let dataFertil = { 'y' : "Fertil", 'n' : "Castrado" };
    for( let i in dataFertil ){
        let option = document.createElement('option');
        option.value = i
        option.textContent = dataFertil[i];
        if( option ) document.querySelector('[data-original_id=account_pet__fertile]').appendChild( option );
    }

    let dataEspecie = { 'c' : "Canino", 'f' : "Felino", 's' : "Silvestre", 'o' : "Outros" };
    for( let i in dataEspecie ){
        let option = document.createElement('option');
        option.value = i
        option.textContent = dataEspecie[i];
        if( option ) document.querySelector('[data-original_id=account_pet__species]').appendChild( option );
    }

    /*document.querySelector('[data-original_id=account__born_date]').addEventListener('keypress',function(e){
        handleMask(e, '99/99/9999')
    });*/

    /*document.querySelector('[data-original_id=account__cpf]').addEventListener('keypress',function(e){
        handleMask(e, '999.999.999-99')
    });*/
}

function initHome(){
    init()
    let specialty = document.querySelector('#et_pb_contact_specialty_0')

    document.querySelector('.et_contact_bottom_container').style.display = 'none';

    document.querySelector('#button_agendar').addEventListener('click',function(e){

        if( specialty.value ) {
            //location.href = '/agendamento-de-consultas/?specialty='+specialty.value
            location.href = 'https://acesso.upapet.com.br/novo-agendamento/?specialty='+specialty.value;
        }

        e.stopPropagation();
        e.preventDefault();
    })

    /*document.querySelector('#unit').onchange = function(  ){
        FindAgenda()
    }*/

    if( dataSpecialty ){
        specialty.options[1].remove()
        for( let i in dataSpecialty ){
            let option = document.createElement('option');
            option.value = dataSpecialty[i].id
            option.textContent = dataSpecialty[i].description;
            if( option ) specialty.appendChild( option );
        }
    }
}

function initAgendamento(){

    init()
    if( dataUnit ){
        let unit = document.querySelector('#et_pb_contact_unit_0')
        unit.options[1].remove()
        for( let i in dataUnit ){
            let option = document.createElement('option');
            option.value = dataUnit[i].id
            option.textContent = dataUnit[i].name;
            unit.appendChild( option );
        }

        unit.onchange = function(  ){
            FindAgenda()
        }
    }
    if( isAuth() ) {
        getPets()
    }

    initFormAccount( function(){ getPets(); FindAgenda() } )
}

function getPets(){

    ajax(apihost+`/api/account/pets`, 'get', '' , function( dataPets ) {
        if( dataPets ){
            document.querySelector('.et_pb_contact_field_1').style = 'display:block'
            let pets = document.querySelector('#et_pb_contact_paciente_0')
            pets.options.length = 0;
            for( let i in dataPets ){
                let option = document.createElement('option');
                option.value = dataPets[i].id
                option.textContent = dataPets[i].name;
                pets.appendChild( option );
            }

            pets.onchange = function(){
                FindAgenda()
            }
        }
    }, function( data, status ){

    })
}

function initAreaPaciente(){
    verAgendamentos()

    document.querySelector('#menu-agenda').addEventListener('click',function( e ){
        e.stopPropagation();
        e.preventDefault();
        verAgendamentos()

    })

    document.querySelector('#menu-pets').addEventListener('click',function( e ){
        e.stopPropagation();
        e.preventDefault();
        verPets()

    })

    document.querySelector('#menu-sair').addEventListener('click',function( e ){
        e.stopPropagation();
        e.preventDefault();
        Sair()
    })

}

function Sair(){
    localStorage.removeItem('authapi');
    if( isAuth() ) {
        ajax(apihost+`/api/account/logout`, 'get', '' , function( data ) {
            document.querySelector('#content').innerHTML = ''
            location.href = '/fazer-login'
        }, function( data, status ){
            location.href = '/fazer-login'
        })
    } else {
        location.href = '/fazer-login'
    }
}

function verAgendamentos(){

    if( isAuth() ){
        console.log('function: verAgendamentos')
        document.querySelector('#content').innerHTML = '<div style="width: 100%; text-align: center" ><img src="https://upapet.devphp.com.br/images/loading2.gif" width="70px"></div>';
        ajax(apihost+`/api/account/agenda`, 'get', '' , function( data ) {
            document.querySelector('#content').innerHTML = ''
            let blocks = []
            for( let i in data ){
                    blocks.push(`<div class="block line-bottom">
                                <div class="block-header row">
                                    ${data[i].specialty} / ${data[i].label}
                                </div>
                            <div class="block-content">
                                <div>Paciente: <b>${data[i].pet_name}</b></div>
                                <div>Profissional: <b>${data[i].name}</b></div>
                                <div>Unidade: <b>${data[i].unit}</b></div>
                                <div>Valor: <b>${data[i].price}</b></div>
                            </div>   
                            <div class="block-footer " style="margin-top: 10px; padding: 10px">
                                <button class="button red cancel" data-id="${data[i].id}" data-account_pet_id="${data[i].account_pet_id}" >Não posso ir</button>
                            </div>                                          
                    </div>`)
            }

            document.querySelector('#content').innerHTML = blocks.join('')
            let buttons = document.querySelectorAll('.cancel')
            buttons.forEach((button) => {
                button.addEventListener('click',function(){
                    CancelarAgenda( this.dataset.id, this.dataset.account_pet_id )
                })
            });

        }, function( data, status ){
            if( status === 401 ){
                location.href = '/fazer-login'
            }
        })
    } else {
        location.href = '/fazer-login'
    }
}

function verPets(){

    if( isAuth() ){
        // console.log('function: verAgendamentos')
        document.querySelector('#content').innerHTML = '<div style="width: 100%; text-align: center" ><img src="https://upapet.devphp.com.br/images/loading2.gif" width="70px"></div>';
        ajax(apihost+`/api/account/pets`, 'get', '' , function( data ) {
            document.querySelector('#content').innerHTML = ''
            let blocks = []
            for( let i in data ){
                blocks.push(`<div class="block line-bottom">
                                <div class="row" >
                                    <div style="width: 70%; float: left"><span class="block-header">${data[i].name}</span> / Gênero: <b>${data[i].gender}</b> / Espécie: <b>${data[i].species}</b></div>
                                    <div style="width: 30%; float: right"><button class="button blue edit" data-account_pet_id="${data[i].account_pet_id}" >Editar</button> <button class="button red cancel" data-account_pet_id="${data[i].account_pet_id}" >Apagar</button></div>
                                    <div style="clear: both"></div>                                    
                                </div>                                         
                            </div>`)
            }

            document.querySelector('#content').innerHTML = blocks.join('')

            document.querySelectorAll('.edit').forEach((button) => {
                button.addEventListener('click',function(){

                })
            });

        }, function( data, status ){
            if( status === 401 ){
                location.href = '/fazer-login'
            }
        })
    } else {
        location.href = '/fazer-login'
    }
}

function CancelarAgenda( id, account_pet_id ){
    if( isAuth() ){
        Swal.fire({
            title: 'Cancelar o agendamento',
            text: `Tem certeza que deseja prosseguir ?`,
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sim, tenho certeza!'
        }).then((result) => {
            if (result.value) {
                ajax(apihost+`/api/account/cancel`, 'post',
                    { id : id, account_pet_id : account_pet_id } , function( data ){
                        document.querySelector('#content').innerHTML = '';
                        Swal.fire({
                            type: 'success',
                            title: 'Cancelamento realizado com sucesso!!',
                            showConfirmButton: true
                        }).then((result) => {
                            verAgendamentos()
                        })
                    }, function(){

                        if( status === 401 ){
                            location.href = '/fazer-login'
                        } else {
                            Swal.fire({
                                type: 'error',
                                title: 'Ocorreu um erro!',
                                text: ( data.message ? data.message : 'Desculpe o transtorno!' )
                            })
                        }
                    })
            }
        })
    } else {
        location.href = '/fazer-login'
    }
}

function FindAgenda(){

    document.querySelector('#form-forgot').style.display = 'none';
    document.querySelector('#form-account').style.display = 'none';
    document.querySelector('#form-login').style.display = 'none';

    if( specialty_id ){
        document.querySelector('#result-find .list').innerHTML = '<div style="width: 100%; text-align: center" ><img src="https://upapet.devphp.com.br/images/loading.gif" width="70px"></div>';
        document.querySelector('#result-find').style.display = 'block';

        let unit = document.querySelector('#et_pb_contact_unit_0')
        let u = unit.value;

        ajax(apihost+`/api/callendar/avaliable/${specialty_id}/${u}`, 'get', '' , function( data ){
            document.querySelector('#result-find .list').innerHTML = '';

            for( let i in data ){

                let dataInner = [];
                let sub = data[i].data;
                for( let s in sub ){

                    let hours = [];
                    for( let h in sub[s].times ){
                        hours.push(`<button type="button" class="button red button_hour" data-date="${sub[s].date_db} ${sub[s].times[h]}:00" data-id="${sub[s].id}" data-text="${data[i].label} as ${sub[s].times[h]} com ${s}"  >${sub[s].times[h]}</button>`);
                    }

                    let avatar = ( sub[s].avatar ? `background-image: url(http://upapet.devphp.com.br/storage/images/users/${sub[s].avatar})` : '' ) ;

                    dataInner.push(`<div class="block-content row">
                                    <div class="avatar" style="${avatar}" >
                                           
                                    </div>
                                    <div class="title" >
                                    <div class="name">${s}</div>
                                    <div class="crm">CRM ${sub[s].crm}</div>
                                </div>
                                </div>
                                <div class="row hours">
                                    ${hours.join('')}                                        
                                </div>
                                <div class="block-footer row">
                                <a href="#login">Se quiser informações de valores, faça login no site. Clique aqui!</a>
                                <p class="note">O CRMV-RJ não permite divulgação de preços sem identificação do paciente!</p>
                                </div>
                                `)
                }

                let html = `<div class="block">
                        <div class="block-header row line-bottom">
                            ${data[i].label}
                        </div><div>${dataInner.join('')}</div>                                             
                    </div>`;

                document.querySelector('#result-find .list').innerHTML += html;

            }

            let buttons = document.querySelectorAll('.button_hour')
            buttons.forEach((button) => {
                button.addEventListener('click',function(){
                    AdicionarAgenda( this.dataset.id, this.dataset.date, this.dataset.text )
                })
            });


        }, function(){
            document.querySelector('#result-find .list').innerHTML = '';
            document.querySelector('#result-find').style.display = 'none';
        })
    } else {
        Swal.fire({
            type: 'error',
            title: 'Oops...',
            text: 'Não identificamos a especialidade!'
        }).then((result) => {
            location.href = '/'
        })
    }
}

function AdicionarAgenda( id, date_db, text ){
    let unit = document.querySelector('#et_pb_contact_unit_0').value

    if( isAuth() ){
        let pet = document.querySelector('#et_pb_contact_paciente_0').value
        let authapi = localStorage.getItem('authapi');
        Swal.fire({
            title: 'Confirme seu agendamento',
            text: `Tudo certo para o agendamento do seu Pet? \n${text}`,
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Sim, pode agendar!'
        }).then((result) => {
            if (result.value) {

                ajax(apihost+`/api/agenda/create`, 'post',
                    {   account_id : JSON.parse(authapi).id,
                        professional_id: id,
                        date_from: date_db,
                        unit_id : unit,
                        account_pet_id: pet
                    } , function( data ){

                        document.querySelector('#result-find').style.display = 'none';
                        Swal.fire({
                            type: 'success',
                            title: 'Seu agendamento foi realizado!!',
                            showConfirmButton: false,
                            timer: 1500
                        }).then((result) => {
                            location.href='/consulta-ok';
                        })
                    }, function( data, status ){

                        if( status === 401 ){
                            notLogged(unit, date_db)
                        } else {
                            Swal.fire({
                                type: 'error',
                                title: 'Ocorreu um erro!',
                                text: 'Erro não identificado!'
                            }).then((result) => {
                                loadingOff( document.querySelector('#form-login') )
                            })
                        }


                    })

            }
        })

    } else {
        notLogged(unit, date_db)
    }
}

function notLogged(specialty_id, unit, date_db){
    let dataTemp = { specialty_id: specialty_id, unit: unit, date_db: date_db }
    localStorage.setItem( 'dataTemp' , JSON.stringify( dataTemp ) );
    const swalWithBootstrapButtons = Swal.mixin({
        customClass: {
            cancelButton: 'button blue',
            confirmButton: 'button red',
        },
        buttonsStyling: false,
    })

    swalWithBootstrapButtons.fire({
        title: 'Você não se identificou!',
        text: "Para registrar uma agenda é preciso criar sua conta e fazer o login",
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Criar Cadastro',
        cancelButtonText: 'Fazer Login',
        reverseButtons: true
    }).then((result) => {
        if (result.value) {
            FormCreate()
        } else {
            FormLogin()
        }
    })
}

function dataForm( form ) {
    var obj = {};
    var elements = form.querySelectorAll( "input, select, textarea" );
    for( var i = 0; i < elements.length; ++i ) {
        var element = elements[i];
        var name = element.getAttribute('data-original_id');
        var value = element.value;
        if( element.type == 'checkbox' ){
            name = element.id.replace(/.*_contact_(.*?)_.*/,'$1');
            value = element.checked ? 'sim' : '';
        }
        if( name ) {
            obj[ name ] = value;
        }
    }
    return obj;
}

function FormLogin(){
    hideAll()
    document.querySelector('#form-login').style.display = 'block';
}

function FormCreate(){

    hideAll()
    document.querySelector('#form-account').style.display = 'block';
}

function FormAlterarSenha(){
    hideAll()
    document.querySelector('#form-change').style.display = 'block';
}

function hideAll(){
    if( document.querySelector('#result-find') != null ) document.querySelector('#result-find').style.display = 'none';
    if( document.querySelector('#result-find') != null ) document.querySelector('#result-find').style.display = 'none';
    document.querySelector('#form-forgot').style.display = 'none';
    document.querySelector('#form-login').style.display = 'none';
    document.querySelector('#form-account').style.display = 'none';
    document.querySelector('#form-change').style.display = 'none';
}



function ajax(path, method = 'get', data = '' , success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(JSON.parse(xhr.responseText), xhr.status);
            }
        }
    };
    xhr.open( method , path, true);
    xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    xhr.setRequestHeader('Accept', 'application/json');
    let authapi = localStorage.getItem('authapi');
    if( authapi ) xhr.setRequestHeader('AUTH-API', JSON.parse(authapi).api_token);
    xhr.send( JSON.stringify(data) );

}

function loading( where ){
    where.style.opacity = '.5';
}

function loadingOff( where ){
    where.style.opacity = '1';
}

function handleMask(event, mask) {
    with (event) {
        stopPropagation()
        preventDefault()
        if (!charCode) return
        var c = String.fromCharCode(charCode)
        if (c.match(/\D/)) return
        with (target) {
            var val = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
            var pos = selectionStart + 1
        }
    }
    var nan = count(val, /\D/, pos) // nan va calcolato prima di eliminare i separatori
    val = val.replace(/\D/g,'')

    var mask = mask.match(/^(\D*)(.+9)(\D*)$/)
    if (!mask) return // meglio exception?
    if (val.length > count(mask[2], /9/)) return

    for (var txt='', im=0, iv=0; im<mask[2].length && iv<val.length; im+=1) {
        var c = mask[2].charAt(im)
        txt += c.match(/\D/) ? c : val.charAt(iv++)
    }

    with (event.target) {
        value = mask[1] + txt + mask[3]
        selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\D/, pos) - nan)
    }

    function count(str, c, e) {
        e = e || str.length
        for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
        return n
    }
}

function isAuth( onLogged = function(){ }, onLogout = function(){ } ){
    let authapi = localStorage.getItem('authapi');
    if( authapi ) {
        return true;
    } else {
        return false;
    }
}

function initForm(){
    document.querySelector('#form-account button').addEventListener('click',function( e ){
        e.stopPropagation();
        e.preventDefault();

        let form = document.querySelector('#form-account')
        var data = dataForm(form);
        data.complete = 1;
        data.with_password = 1;

        loading( form )
        ajax(apihost+`/api/account/create`, 'post', data , function( data ){
            FormLogin()
        }, function( data ){

            let message = '';
            if( data.message ){
                message = data.message;    
            }
                
            if( data.errors ){
                let errors = data.errors;
                for( let e in errors ){
                    message =  errors[e][0];
                    break;
                }    
            }

            if( message ){
                Swal.fire({
                    type: 'error',
                    title: 'Ops! Houve algum problema!',
                    text: message
                }).then((result) => {
                    loadingOff( form )

                })
            }

        })


    })

	
}

window.onload = function(){		
	if(location.href.indexOf('agendamento-de-consultas') != -1){
		initAgendamento()			 
	} else if( location.href.indexOf('area-do-paciente') != -1 ) {
		initAreaPaciente()
	} else {
		initHome()
	}
}