class RegVehicle_DocHead{
    constructor(){
        this.name = "RegVehicle_DocHead";
    }

    static GetCustomDestination(data, dest){
        return (data.vehicle_id ?? "" != "" ? "regvehicle.view" : "regvehicle.overview");
    }
    
    static GetCustomDestID(data, destID){
        return data.vehicle_id ?? destID;
    }
    static allowView(){
        return userrights.has("regvehicles.view");
    }
    static allowAddNew(){
        return true;
    }
    static allowEdit(){
        return userrights.has("regvehicles.edit");
    }
    static allowDelete(){
        return userrights.has("regvehicles.edit");
    }
    static GetColumns(){
        return ["doc_number", "creationdate" ,"status", "totalprice_no_discount","totalprice_discount","id"]
    }

    static TableDataCreate(row, key){
        if(key == "id"){
          return `
            <td>
                <button onclick="loadPage('regvehicle_dochead_details.dataload','regvehicle.view|${row[key]}')" class="btn btn-sm btn-accent">
                    <i class="fa-solid fa-circle-info"></i>
                </button>

            </td>`;
        }
        else if(key == "creationdate"){
            return `
                <td>
                ${System.formatTimestamp(row.creationdate)}<br>${System.buildEmployeeName(row.creator)}
                </td>`;
        }
        else if(key == "totalprice_no_discount" || key == "totalprice_discount"){
            return `
                <td>
                    ${System.FormatNumber(row[key])}
                </td>`;
        }
        else if(key == "status"){
            let selectClass = "";
            let selected1="";
            let selected2="";
            let selected3="";
            let selected4="";

            if(row["done"] == 1){
                selectClass = "success";
                selected4 = " selected";
            }
            else if(row["declined"] == 1){
                selectClass = "error";
                selected2 = " selected";
            }
            else if(row["invoiced"] == 1){
                selectClass = "primary";
                selected3 = " selected";
            }
            else{
                selectClass = "info";
                selected1 = " selected";
            }

            if(row.allow_decline){
                return `
                    <td>
                        <select onchange="RegVehicle_DocHead.SetStatus(${row.id}, ${row.vehicle_id}, this)" class="select ignore-readonly bg-${selectClass} text-${selectClass}-content select-${selectClass} select-sm">
                            <option value="0" class="btn btn-info btn-sm btn-block" ${selected1}>${getTranslation("status.open")}</option>
                            <option value="1" class="btn btn-error btn-sm btn-block"${selected2}>${getTranslation("status.declined")}</option>
                            <option value="2" class="btn btn-primary btn-sm btn-block" ${selected3}>${getTranslation("status.invoiced")}</option>
                            <option value="3" class="btn btn-success btn-sm btn-block" ${selected4}>${getTranslation("status.done")}</option>
                        </select>
                    </td>`
                ;
            }
            else{
                return `
                        <td>
                            <select onchange="RegVehicle_DocHead.SetStatus(${row.id}, ${row.vehicle_id}, this)" class="select ignore-readonly bg-${selectClass} text-${selectClass}-content select-${selectClass} select-sm">
                                <option value="0" class="btn btn-info btn-sm btn-block" ${selected1}>${getTranslation("status.open")}</option>
                                <option value="2" class="btn btn-primary btn-sm btn-block" ${selected3}>${getTranslation("status.invoiced")}</option>
                                <option value="3" class="btn btn-success btn-sm btn-block" ${selected4}>${getTranslation("status.done")}</option>
                            </select>
                        </td>`
                    ;
            }
  
            
        }
        else{
          return `<td>${row[key]}</td>`;
        }
    }

    static SetStatus(docId, vehicle_id, senderEl){

        let backEndData = {
            done: senderEl.value == "3" ? "1" : "0",
            declined: senderEl.value == "1" ? "1" : "0",
            invoiced: senderEl.value == "2" ? "1" : "0"
        }

        sendDataToAPI("regvehicle_dochead", "regvehicle.view",docId, vehicle_id, backEndData);        
    }




    static CreateCustom(data){
        document.getElementById("currentpage-content").innerHTML = Form.BackEditBtn("regvehicle.view", "",-1, false, data.data.vehicle_id);

        let pricelistGroupData = {};
        pricelistGroupData.data = data.data.pricelist_groups


        PriceListGroups.CreateCustom({data: data.data.pricelist_groups}, true);        

        document.getElementById("currentpage-content").innerHTML += `
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-6">
                <button id="input-cancel-button" data-vehicle-id="${data.data.vehicle_id}" class="btn btn-sm btn-error">${getTranslation("cancel")}</button>
                <button id="input-save-button" data-vehicle-id="${data.data.vehicle_id}" class="btn btn-sm btn-primary">${getTranslation("save")}</button>
            </div>
        `;
        
        Form.initViewModeTopButtons();

        document.getElementById("input-cancel-button").onclick=function(){
            loadPage("regvehicle.view", this.getAttribute("data-vehicle-id"))
        }
        document.getElementById("input-save-button").onclick=function(){
            let saveData = RegVehicle_DocHead.GetDataForSave("edittable_row_", ".edittable_row", ["price","amount","discount","discounted_price","total_price","id"], "amount");

            if(!saveData.isValid){
                Form.openInfoModal();
            }
            else{

                let headData = {
                    vehicle_id : this.getAttribute("data-vehicle-id"),
                    totalprice_no_discount : 0,
                    totalprice_discount : 0
                };

                for (const key in saveData.posData) {
                    headData.totalprice_no_discount += parseInt(saveData.posData[key].amount) * parseInt(saveData.posData[key].price);
                    headData.totalprice_discount += parseInt(saveData.posData[key].total_price);

                    saveData.posData[key].total_price_no_discount = parseInt(saveData.posData[key].amount) * parseInt(saveData.posData[key].price);
                    saveData.posData[key].pricelist_id = saveData.posData[key].id;
                    saveData.posData[key].tuning_option_id = -1;
                    saveData.posData[key].default_price = saveData.posData[key].price;
                    saveData.posData[key].id = null;

                    delete saveData.posData[key].price;
                    delete saveData.posData[key].discounted_price;

                }
                
                let formData = {
                    headData: headData,
                    posData: saveData.posData
                }
                sendDataToAPI("regvehicle_dochead", "regvehicle.view",-1, this.getAttribute("data-vehicle-id"), formData);

            }
        }

        Array.from(document.getElementById("currentpage-content").querySelectorAll(".pricelistpos_calc_amount")).forEach(function(item){
            item.onkeyup=function(){
                RegVehicle_DocHead.CalcAmountAndDiscount(this);
            }
        });
        Array.from(document.getElementById("currentpage-content").querySelectorAll(".pricelistpos_calc_discount")).forEach(function(item){
            item.onkeyup=function(){
                RegVehicle_DocHead.CalcAmountAndDiscount(this);
            }
        });
    }

    static GetDataForSave(row_id_prefix, classToSearch, subElements, mustBeBiggerZero){
        let idElements = Array.from(document.querySelectorAll(classToSearch));

        let retval = [];
        let isValid = false;

        idElements.forEach(function(row){
            let rowIsValid = false;
            let rowID = row.id.replace(row_id_prefix, "");
            let rowData = {};

            for (const key in subElements) {
                rowData[subElements[key]] = document.getElementById("input-" + subElements[key] + "_" + rowID).value;

                if(subElements[key] == mustBeBiggerZero && (document.getElementById("input-" + subElements[key] + "_" + rowID).value*1) > 0){
                    isValid = true;
                    rowIsValid = true;
                }
            }

            if(rowIsValid){
                retval.push(rowData);
            }
        });

        return {
            isValid: isValid,
            posData: retval
        }
    }


    static CalcAmountAndDiscount(element){
        let rowId = element.id.replace("input-amount_", "").replace("input-discount_","");

        let amount = document.getElementById("input-amount_" + rowId).value;
        let discount = document.getElementById("input-discount_" + rowId).value;

        let price = document.getElementById("input-price_" + rowId).value;
        let max_discount = document.getElementById("input-max_discount_" + rowId).value;

        let discountedPriceEl = document.getElementById("input-discounted_price_" + rowId);
        let totalPriceEl = document.getElementById("input-total_price_" + rowId);

        if(discount.startsWith("0")){
            document.getElementById("input-discount_" + rowId).value = 1*discount;
        }

        if(1*discount > 1*max_discount){
            discount = max_discount;
            document.getElementById("input-discount_" + rowId).value = discount;
        }

        if(1*amount < 0){
            document.getElementById("input-amount_" + rowId).value = 0;
            amount = 0;
        }

        let percentage = -1 * ((1*discount / 100) - 1.0)        
        let discountedPrice = parseInt(price * percentage);

        discountedPriceEl.value = discountedPrice;
        totalPriceEl.value = discountedPrice * amount;


        let dataForSave = RegVehicle_DocHead.GetDataForSave("edittable_row_", ".edittable_row", ["price","amount","total_price"], "amount")

        let sum_total_price = 0;
        let sum_total_price_no_discount = 0;

        if(dataForSave.isValid){
            for (const key in dataForSave.posData) {
                sum_total_price_no_discount += parseInt(dataForSave.posData[key].amount) * parseInt(dataForSave.posData[key].price);
                sum_total_price += parseInt(dataForSave.posData[key].total_price);
            }
        }


        document.getElementById("summary_total_price_no_discount").innerHTML = System.FormatNumber(sum_total_price_no_discount);
        document.getElementById("summary_total_price").innerHTML = System.FormatNumber(sum_total_price);
    }



    static GetDetailView(row, vehicle_id = -1, drawViewButton = false){
        let bottomButton = "";
        let contentHtml = ``;

        if(row === undefined || row === null ){
            return "";
        }

        

        if(row.note !== undefined && row.note !== null && row.note.replace(/ /g, "") != ""){
            contentHtml = `<p class="border border-current rounded-xl p-1 break-all">${row.note.replace(/\n/g,"<br>")}</p>`;
        }

        if(drawViewButton){
            bottomButton = `<button onclick="loadPage('regvehicle_mot.dataload',${vehicle_id})" class="btn btn-sm btn-primary btn-block" >${getTranslation("view_history")}</button>`
        }

        

        return `
            <div class="card w-full bg-neutral text-neutral-content">
                <div class="card-body">
                <p><strong>${System.buildEmployeeName(row.creator)} - ${System.formatTimestamp(row.createddate)}</strong></p>
                <p></p>
                <p><strong>${getTranslation("passed")}</strong>: <span class="badge badge-${row.passed ? "success" : "error"} gap-2 font-bold">${getTranslation(row.passed == 1 ? "yes": "no")}</span></p>
                <p><strong>${getTranslation("new_mot")}</strong>: ${System.formatDate(row.new_mot) }</p>
                <p><strong>${getTranslation("old_mot")}</strong>: ${System.formatDate(row.old_mot) }</p>
                ${contentHtml}

                <table>
                    <thead>
                    <tr>
                        <th>${getTranslation("mot.lights")}</th>
                        <th>${getTranslation("mot.brakes_tyres")}</th>
                        <th>${getTranslation("mot.windows")}</th>
                        <th>${getTranslation("mot.others")}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="text-center"><span class="badge badge-${row.headlights ? "success" : "error"} gap-2 font-bold">${getTranslation("headlights")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.front_brakes ? "success" : "error"} gap-2 font-bold">${getTranslation("front_brakes")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.windscreen ? "success" : "error"} gap-2 font-bold">${getTranslation("windscreen")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.horn ? "success" : "error"} gap-2 font-bold">${getTranslation("horn")}</span></td>
                    </tr>
                    <tr>
                        <td class="text-center"><span class="badge badge-${row.rear_lights ? "success" : "error"} gap-2 font-bold">${getTranslation("rear_lights")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.rear_brakes ? "success" : "error"} gap-2 font-bold">${getTranslation("rear_brakes")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.rear_window ? "success" : "error"} gap-2 font-bold">${getTranslation("rear_window")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.exhaust_system ? "success" : "error"} gap-2 font-bold">${getTranslation("exhaust_system")}</span></td>
                    </tr>
                    <tr>
                        <td class="text-center"><span class="badge badge-${row.indicators ? "success" : "error"} gap-2 font-bold">${getTranslation("indicators")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.front_tyres ? "success" : "error"} gap-2 font-bold">${getTranslation("front_tyres")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.side_windows ? "success" : "error"} gap-2 font-bold">${getTranslation("side_windows")}</span></td>
                        <td class="text-center"><span class="badge badge-${row.engine ? "success" : "error"} gap-2 font-bold">${getTranslation("engine")}</span></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td class="text-center"><span class="badge badge-${row.rear_tyres ? "success" : "error"} gap-2 font-bold">${getTranslation("rear_tyres")}</span></td>
                        <td></td>
                        <td class="text-center"><span class="badge badge-${row.bodywork ? "success" : "error"} gap-2 font-bold">${getTranslation("bodywork")}</span></td>
                    </tr>
                    </tbody>
                </table>
                <p></p>
                ${bottomButton}
                </div>
            </div>
        `;
    }

    static GetEdit(data={}){
        let retval = {
            "vehicle_id": {
                "val" : data.vehicle_id ?? -1
                ,"type" : "text"
                ,"mandatory":true
                ,"isRow":true
            },
        }

        return retval;
    }
}