// sofianmeld.js   rxf   2020-09-21
// Anmeldungen anzeigen und abhaken lassen
//

function getAuthorisation(was) {
    let x = was.split(',')
    return { storno: x[0], name: x[1] , double: x[2]}
}


$(document).ready(() => {

    // Globale Konstanten und Variable
    const ajaxURL="php/sonnenfDB.php";
    const ANZAHL_DATES = 12;
    const TEXTE = {
        absagetext: "Absage an alle angemeldeten Besucher senden?",
        schonabgesagt: "Absage schon gesendet. Nochmal senden?",
        eingetragen: 'Besucher erfolgreich eingetragen.',
        subject: 'Absage der heutigen Sonnenführung',
        bodytext: `Sehr geehrte Dame, sehr geehrter Herr,

        Sie haben sich über unsere Webseite www.sternwarte-welzheim.de zur heutigen Sonnenführung angemeldet.
        Aufgrund der aktuellen Wetterlage können wir heute keine Sonnenführung anbieten.
        Bitte melden Sie sich für einen anderen Termin neu an.

    Mit freundlichen Grüßen
    Beobachtergruppe Sternwarte Welzheim`,
    }

    const liste = {
        emails: [],
        ids: []
    }

    let abgesagt = false;
    let actualdate;

    // Von der Datenbank Werte abholen
    // Param:
    //      body: Object mit cmd und param
    // Return:
    //      angeforderte Daten als JSON
    const fetchFromDbase = async (body) => {
        const response = await fetch(ajaxURL,{
            method: 'POST',
            headers: {'Content-Type': 'application/js'},
            body: JSON.stringify(body)
        });
        return await response.json();
    }


    // In die Datenbank Werte eintragen
    // Param:
    //      body: Object mit cmd und param
    // Return:
    //      angeforderte Daten als JSON
    const putToDbase = async (body) => {
        const response = await fetch(ajaxURL,{
            method: 'POST',
            headers: {'Content-Type': 'application/js'},
            body: JSON.stringify(body)
        });
        return await response.json();
    }


    // Aktuelle Anmeldungen anzeigen:
    // Für den ausgewählten Führungstag (date) die Anmeldungen aus der
    // Datenbank holen und in die Tabelle einbauen
    // Außerdem die globale Variable 'emails' mit den emails der Teilnehmer füllen
    const showAktAnmeldungen = async (date) => {
        actualdate = date;
        let auth = params.storno == 'true'
        let column = auth ? "col-2" : "col-6"
        liste.emails = [];
        liste.ids = [];
        abgesagt = false;
        console.log('date: ', date);
        let anmeldungen = await fetchFromDbase({cmd:'GET_ANMELD',id:date});
        let besucher = 0;
        $('tbody').empty();
        for (let e of anmeldungen) {
            besucher += parseInt(e.anzahl);
            liste.emails.push(e.email);
            liste.ids.push(e.id);
            if (e.abgesagt == '1') {
                abgesagt = true;
                $('#absagen').html('Absage<br />wurde gesendet');
            }
//            const selected = e.teilgenommen == "1" ? "checked" : "";
            let str = `<tr class="d-flex">
                <td class="tdname col-6">${e.name} ${e.vorname}</td>
                <td class=${column}>${e.anzahl}</td>`
//                <td class=${column}><input type="checkbox" value="${e.id}" ${selected}></td>`
            if (auth) {
                str += `<td class="tdstorno col-2"><input type="checkbox" value="${e.id}"></td>`
            }
            str += '</tr>'
            $('#tabAnmeld > tbody:last-child').append(str);
        }
        if(besucher != 0) {
            let str = `<tr id="summe" class="d-flex">
                <td class="col-6">Summe der Anmeldungen</td>
                <td class="col-6">${besucher}</td>`
            $('#tabAnmeld > tbody:last-child').append(str);
        }

        // Klick auf den Namen: Detail-Dialog öffnen
        $('.tdname').click( function() {
            const row = $(this).closest("tr")               // Finds the closest row <tr>
            const index = (row[0].rowIndex)-1
            $('#detail').data('id',anmeldungen[index].id).dialog('open');
        })

        // Klick auf 'storno' : den Eintrag stornieren
        $('.tdstorno').click( function() {
            const row = $(this).closest("tr")               // Finds the closest row <tr>
            const index = (row[0].rowIndex)-1
            austragen(anmeldungen[index])                           // Teilnehmer austragen
        })

    }

    // Aus dem rohen Führungsdatum von der Datenbank ein besser
    // leserliches Format erzeugen
    // Params:
    //      w -> Wochentag
    //      d -> Datum in DBase-Format
    //      t -> Uhrzeit
    // Return
    //      neu formatierter Datums-String
    const bauDate = (w,d,t) => {
        let dd = d.replace(/^(\d{4})(\d{2})(\d{2})$/, '$3.$2.$1',);
        let dt = w.substr(0,2) + ', ' + dd + ' ' + t.substr(0,2) + ':00';
        return dt;
    }


    // Führungsdaten in einer Select-Auswahl anzeigen
    // Zusätzlich den Eventhandler für die Auswahl registrieren.
    // Params:
    //      dates -> Array mit den geholten Führungsdaten
    const buildFuehrungsDates = async (dates, last) => {
        let n = 0;
        let i = 0;
        let summ = 0;
        let select =
//            <label for='ftermin' class='col-8 col-form-label'>
//        <strong>Führung am</strong></label>
        `<select name='ftermin' id='ftermin' >`;
        let selectedNext = false;
        const today = moment().startOf('day');
        for (let d of dates) {
            let isselected = "";
            const fday = moment(d.datum);
            if (!selectedNext) {
                if (fday.isSameOrAfter(today)) {
                    selectedNext = true;
                    isselected = "selected";
                    n = i;
                }
            }
            const count = await fetchFromDbase({cmd: 'GET_COUNTS', fdate: d.datum})
            const isFuehrung = ((count > 0) && (count != null)) ? ' ' : 'disabled';
            select += `
                <option value=${d.datum} ${isselected} ${isFuehrung}> ${bauDate('So', d.datum, '11')} &nbsp;&nbsp; ${count} Besucher</option>`;
            i++;
            summ += (count != null) ? parseInt(count) : 0;
            if (d.datum >= last) {
                break;
            }
        }
        select += `</select>
            <div id = "gesamtsumme">Gesamtzahl der Anmeldungen (ab heute): ${summ}</div>`;
        $('#auswahl').append(select);

        // Eventhandler für Auswahl eines Datums über die SelectBox:
        // Anzeigen der Anmeldungen dazu
        $('#ftermin').change( async () => {
            let x = $('#ftermin').find(':selected');
            let date = x[0].value;
            console.log('date: ', date);
            let index = $('#ftermin').prop('selectedIndex');
            if (index == 0) {
                $('#absagen').css('visibility', 'visible');
                $('#uebernehmen').css('visibility', 'visible');
            } else {
                $('#absagen').css('visibility', 'hidden');
                $('#uebernehmen').css('visibility', 'hidden');
            }
            await showAktAnmeldungen(date);
        });
        return n;
    }


    // Text für die Tabelle abh. von der Schirmbreite umstellen
    // Params
    //      x -> true/false für > oder < 700px
    function switchText(x) {
        let auth = params.storno == 'true'
        console.log("auth: ",auth)
        let column = auth ? "col-2" : "col-6"
        let thead = `
        <thead>
        <tr class="d-flex">
            <th class="col-6">Name</th>
            <th class=${column}>${x ? "Anz" : "Person"}</th>`
//            <th class=${column}>${x ? "tlg" : "teilgenommen"}</th>`
        if(auth) {
            thead += `<th class="col-2">${x ? "sto" : "stornieren"}</thclass>`
        }
        thead += '</tr></thead><tbody></tbody>'
        $('#tabAnmeld').empty()
        $('#tabAnmeld').append(thead)
        if (x) {
            $('#versn').html("V " + VERSION + ' ' + VDATE);
        } else {
            $('#versn').html("Version: " + VERSION + ' vom ' + VDATE);
        }
    }

    const getEintragetext = () => {
        let sel1 = $('input[type=checkbox]:checked').map(function (_, el) {
            return $(el).val();
        }).get();
        return `${sel1.length}  ${TEXTE.eingetragen}`;
    }

    // Für die übergebenen IDs das #abgesagt'-Flag in der DB setzen
    const storeAbsage = async (ids) => {
        let update = {cmd:'UPDATE', field: 'abgesagt', ids : ids, values: [1]};
        let erg1 = await putToDbase(update);
        abgesagt = true;
    }

    // die Daten des angewählten Teilnehmers anzeigen
    const getDetailText = async (id) => {
//        const nbr = parseInt(id.substr(-3));
        const nbr = parseInt(id);
        const holit = await fetchFromDbase({cmd:'GET_TEILN_ID',id:nbr});
        const entry = holit[0];
        const tafel = `
            <div class="det">${entry.name} ${entry.vorname}<br /></div>
            <div class="det">${entry.email}<br /></div>
            <div class="det">${entry.plz} ${entry.stadt}<br /></div>
            <div class="det">${entry.strasse}<br /></div>
            <div class="det">${entry.telefon}<br /></div>
            <div class="det">${entry.remarks}<br /></div>`
        return tafel;
    }

    // Teilnehmer aus 'anmeldungen' austragen und den count in 'fdatum1' anpassen
    const austragen = async (teilnehmer) => {
        let update = {cmd: 'DELETEONE', id: parseInt(teilnehmer.id)}
        const erg1 = await putToDbase(update)
//        update = {cmd: 'UPDATECOUNT',date: parseInt(teilnehmer.fdatum), anzahl: parseInt(teilnehmer.anzahl)}
//        const erg2 = await putToDbase(update)
        console.log("Storno Ergenisse: ",erg1)
        showAktAnmeldungen(actualdate)
    }


    // ******************
    // Event-Handler
    // ******************

    // Übernahme der angeklickten 'teilgenommen' Boxen
    //
    // Jeder Teilnehmer, der hier abgehakt ist, wird in der Datenbank
    // als 'teilgenommen' eingetragen, jeder, der NICHT abgehakt ist, wird
    // als 'nicht teilgenommen' markiert.
    $('#uebernehmen').click(async function() {
        let sel1 = $('input[type=checkbox]:checked').map(function(_, el) {
            return $(el).val();
        }).get();
        let sel0 = $('input[type=checkbox]:not(:checked)').map(function(_, el) {
            return $(el).val();
        }).get();
        let update = {cmd:'UPDATE', field: 'teilgenommen', ids : sel1, values: [1]};
        let erg1 = await putToDbase(update);
        update = {cmd:'UPDATE', field: 'teilgenommen', ids : sel0, values: [0]};
        let erg0 = await putToDbase(update);
        if (erg0 && erg1) {
            $('#eintragedialog').dialog('open');
        }
    });


    // Dialogbox zu Absage aufrufen
    $('#absagen').click(()=> {
        $('#absagedialog').dialog('open');
    })

    // ******************
    // Dialogboxen
    // ******************

    // Dialogbox zur Absage
    $("#absagedialog").dialog({
        autoOpen: false,
        modal: true,
        position: 'center',
        title: 'Absage-Mail',
        open: function() {
            if (abgesagt) {
                $('#absagetext').text(TEXTE.schonabgesagt)
            } else {
                $('#absagetext').text(TEXTE.absagetext)
            }
    },
        buttons: [
            {
                text: "Senden",
                click : async function() {
                    await storeAbsage(liste.ids);
                    await fetch('https://laufschrift.rexfue.de/switch/switch_on')
                    let erg = await fetchFromDbase({
                        cmd: 'SENDMYMAIL',
                        to: ['rexfue@gmail.com'],
                        betreff: TEXTE.subject,
                        body: TEXTE.bodytext,
                        bcc: liste.emails
                    });
                    console.log("Mail gesendet");
                    $('#absagen').html('Absage<br />wurde gesendet');
                    $(this).dialog("close");
                },
            },
            {
                text: "Abbrechen",
                click : function() {
                    $(this).dialog("close");
                },
            }
        ],
    });

    // Dialogbox für das 'eingetragen'
    $("#eintragedialog").dialog({
        autoOpen: false,
        modal: true,
        position: 'center',
        title: 'Teilnehmer',
        open: () => {
            $('#eintragetext').text(getEintragetext());
        }
    });

    // Dialogbox mit den genauen Daten des Teilnehmers
    $("#detail").dialog({
        autoOpen: false,
        modal: true,
        position: 'top',
        title: 'Teilnehmer-Details',
        open: () => {
            const id = $('#detail').data('id');
            getDetailText(id)
                .then((txt) => {
                    $('#detailtext').html(txt);
                });
        }
    });

    const filterDoubles = (data) => {
        let erg = {}
       return erg
    }

    async function getDoubles(date) {
        const update = { cmd: 'DOUBLE', date: date}
        let erg = await putToDbase(update)
        for (let i = erg.length-1; i>=0; i--) {
            if(erg[i].name == 'Donner') {
                console.log(erg)
            }
            if(
                ((erg[i].name == '-') && (erg[i].vorname == '-'))
                || (erg[i].abgesagt == "1")
                || (erg[i].fdatum <= parseInt(moment().format('YYYYMMDD')))
            ) {
                erg.splice(i, 1)
            }
        }
        erg.sort(function (a,b) {
            let na = a.name.toUpperCase()
            let nb = b.name.toUpperCase()
            if (na < nb) {
                return -1
            }
            if(na > nb) {
                return 1
            }
            return 0
        })
        console.log(erg)
        // alle die, die nur noch 1x drin sind, rausschmeißen
        let i
        for(i = 0; i < erg.length-1; i++) {
            console.log(`${i}   Name[${i}]: ${erg[i].name}   Name[${i+1}]: ${erg[i+1].name}`)
            if(erg[i].name != erg[i+1].name) {
                erg[i].single = true
            } else {
                i++
            }
        }
        erg[i].single = true
        return erg
    }

    const showDoubles = async (date) => {
        let erg = await getDoubles(date)
        console.log(erg)
        $('#tnames').append(
            '<thead><tr>' +
            '   <th class="col-3">Name</th>' +
            '   <th class="col-3">Email</th>' +
            '   <th class="col-1">Anzahl</th>' +
            '   <th class="col-2">Datum</th>' +
            '   <th class="col-2">Anmeldung</th>' +
            '   <th class="col-1">Finden</th>' +
            '</tr></thead><tbody>')
        for(let x of erg) {
            if((x.single != undefined) && (x.single == true)) {
                continue
            }
            $('#tnames').append(`<tr>
                <td class="tdname col-3">${x.name} ${x.vorname}</td>
                <td class="tdname col-3">${x.email}</td>
                <td class="col-1">${x.anzahl}</td>
                <td class="col-2">${moment(x.fdatum).format('YYYY-MM-DD')}</td>
                <td class="col-2" style="color:lightgray;">${moment(x.angemeldet).format('YYYY-MM-DD')}</td>
                <td class="tdfind col-1"><input type="checkbox" value="${x.id}"></td>\`

            </tr>
            `)
        }
        $('#tnames').append('</tbody')
        $('#names').show();
    }

    async function findName(name) {
        const update = { cmd: 'GET_TEILN_NAME', name: name}
        let erg = await putToDbase(update)
        console.log('Name: ',erg);
        $('#tnames').append(
            '<thead><tr>' +
            '   <th class="col-6">Name</th>' +
            '   <th class="col-2">Anzahl</th>' +
            '   <th class="col-2">Datum</th>' +
            '   <th class="col-2">Finden</th>' +
            '</tr></thead><tbody>')
        for(let x of erg) {
            $('#tnames').append(`<tr>
                <td class="tdname col-6">${x.name} ${x.vorname}</td>
                <td class="col-2">${x.anzahl}</td>
                <td class="col-2">${moment(x.fdatum).format('YYYY-MM-DD')}</td>
                <td class="tdfind col-2"><button type="button" class="findit btn btn-primary" id="b1" value="${x.id}"></td>\`
            </tr>
            `)
        }
        $('#tnames').append('</tbody')
        $('#names').show();

        // Event für 'find'
        $('.findit').click(() => {
            let id = $('.findit').val()
            $('#detail').data('id',id).dialog('open');
        })
    }



    // *****************************************
    // main
    // *****************************************

    // Hier gehts los:
    // Von der Datenbank die nächsten 'n' Führungsdaten holen
    // und anzeigen
    // Params:
    //      n -> Anzahl der zu holnden Daten
    async function main(n){
        // Media Query einbauen:
        let x = window.matchMedia("(max-width: 800px)");
        switchText(x.matches);
        x.addEventListener("change", async (e) => {
            switchText(e.matches);
            await showAktAnmeldungen(actualdate);
        });
        let curtime = moment().subtract(2,'months').format("YYYYMMDD");
//        let curtime = moment().format("YYYYMMDD");
        console.log(curtime)
        const y = await fetchFromDbase({cmd:'GET_DATES', anzahl:n, date: curtime});
        const last = await fetchFromDbase({cmd:'GET_LASTANMELDUNG', date: curtime});
        const sel = await buildFuehrungsDates(y, last);
        await showAktAnmeldungen(y[sel].datum);
        console.log(y);
        if(params.name != 'Null') {
            await findName(params.name)
        }
        if(params.double == 'true') {
            await showDoubles(curtime);
        }
    }


    main(ANZAHL_DATES).catch(console.error);

});