<!DOCTYPE html>
<html>
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <title>EcoWater Systems </title>
        <link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900" rel="stylesheet">
                    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
            <link rel="stylesheet" href="/assets/frontend.d41d8cd98f00b204e9800998ecf8427e.css">
                                <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    </head>
    <body>
        <div class="container">
                <div class="row" style="margin-top:16px;margin-bottom:32px;">
        <div class="col-6">
            <a style="margin-right:16px;color:black;text-decoration: underline;" href="/en">Devices</a>
            <a style="margin-right:16px;color:black;text-decoration: underline;" href="/en/drinkwater">Drinking water</a>
        </div>
        <div class="col-6 text-right">
            <a style="margin-right:8px;color:black;text-decoration: underline;" href="/nl">NL</a>
            <a style="margin-right:8px;color:black;text-decoration: underline;" href="/fr">FR</a>
            <a style="color:black;text-decoration: underline;" href="/en">EN</a>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <img src="/assets/images/header_splash.65fa4dd4.jpg" style="width:100%;">
        </div>
    </div>
    <div class="row" style="margin-top:16px;margin-bottom:16px;">
        <div class="col-6">
            <a href="#" id="clearForm">clear form</a>
        </div>
        <div class="col-6">&nbsp;</div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <form>
                <div class="form-group">
                    <label for="postcode">Postal Code</label>
                    <input type="number" class="form-control" id="postcode" value="">
                </div>
                <div class="form-group">
                    <label for="verbruik">Annual water consumption (cube)</label>
                    <div class="input-group mb-3">
                        <input type="number" class="form-control" id="verbruik" value="">
                        <div class="input-group-append">
                            <span class="input-group-text">m³</span>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="hardheid">Water hardness</label>
                    <div class="input-group mb-3">
                        <input type="number" class="form-control" id="hardheid" value="">
                        <div class="input-group-append">
                            <span class="input-group-text">F°</span>
                        </div>
                    </div>
                    <div class="progress" style="font-size:0.65rem;">
                        <div class="progress-bar" role="progressbar" style="width: 0%;overflow:visible;color:#000;" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                        <div class="progress-lines" style="width:100%;position:absolute;"></div>
                    </div>
                    <div class="progress-bar-labels" style="width:100%;text-align:center;"></div>
                </div>
            </form>
        </div>

        <div class="col-sm-12">
            <div class="accordion" id="accordionExample"></div>
            <div style="display:none;" id="nodata">
                No devices found
            </div>
        </div>
    </div>

    <div style="display:none;">
        <div class="card">
            <div class="card-header" style="padding: .75rem .75rem;">
                <h5 class="mb-0" style="position:relative">
                    <button class="btn btn-link collapsed" type="button" data-toggle="collapse" aria-expanded="true" style="text-align:left;">
                        <div id="name"></div><small style="font-size:75%;"><strong>Number of days between 2 rinses</strong> : <span id="spoeling"></span></small>
                    </button>
                    <div style="position:absolute;right:0;top:0">
                        <svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z" clip-rule="evenodd"/>
                            <path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z" clip-rule="evenodd"/>
                        </svg>
                    </div>
                </h5>
            </div>
            <div class="collapse">
                <div class="card-body" style="font-size:0.8em;padding: .75rem .75rem;">
                    <strong>Resin content (l)</strong> : <span id="inhoud"></span><br />
                    <strong>Volume of soft water between 2 rinses (cube)</strong> : <span id="volume"></span><br />
                    <strong>Number of flushes per year</strong> : <span id="frequentie"></span><br />
                    <strong>Number of days between 2 rinses</strong> : <span id="spoeling"></span><br />
                    <strong>Annual cost of flushing water</strong> : <span id="prijs"></span><br />
                    <strong>Annual salt consumption (kg)</strong> : <span id="kg_zout"></span><br />
                    <strong>Annual cost of salt</strong> : <span id="prijs_zout"></span><br />

                    <strong>Number of liters of soft water per hour</strong> : <span id="liters_zacht_water"></span><br />
                    <strong>Consumption of salt per rinse (kg)</strong> : <span id="verbruik_zout_per_spoeling"></span><br />
                    <strong>Consumption of flushing water per regeneration (l)</strong> : <span id="verbruik_spoelwater_per_regeneratie"></span><br />
                </div>
            </div>
        </div>
    </div>

    <input type="hidden" value="en" id="lng" />

    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" id="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content"></div>
        </div>
    </div>
        </div>
                    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
            <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
            <script src="/assets/app.b7b0c6292e0b04b170cc.js"></script>
                    <script type="text/javascript">
        $(document).ready(function() {
            var template = $('.card').parent('div').html();

            var input = {
                'hardheid' : 0,
                'verbruik' : 0
            };
            var settings = {
                'prijsZout' : 0,
                'prijsSpoelwater': 0
            };
            var calc = {
                'kgZout' : 0,
                'prijsZout': 0
            };

            var ranges = [];
            var maxRange = 0;

            var call1 = function() {
                return jQuery.ajax({
                    dataType: 'json',
                    method: "GET",
                    url: "/api/settings",
                    data: { },
                    success: function(data) {
                        settings.prijsZout = data.prijs_zout;
                        settings.prijsSpoelwater = data.prijs_water;
                    }
                });
            }

            var call2 = function() {
                return jQuery.ajax({
                    dataType: 'json',
                    method: "GET",
                    url: "/api/hardheid",
                    data: { },
                    success: function(data) {
                        ranges = data;

                        // get max
                        maxRange = 0;

                        $.each(ranges, function(i, el) {
                            maxRange = el.max > maxRange ? el.max : maxRange;
                        });

                        // draw lines
                        var width = $('.progress').width();
                        var min = 0;

                        $.each(ranges, function(i, el) {
                            var max = el.max / maxRange * width;

                            if (max < width) {
                                var div = $('<div style="float:left;width:' + (max-min) + 'px;border-right:1px solid black;">&nbsp;</div>');
                                $('.progress-lines').append(div);
                            }

                            if ($('#lng').val() == 'nl') {
                                var description = el.description_nl;
                            } else {
                                var description = el.description_fr;
                            }

                            var div = $('<div  class="d-none d-md-block" style="font-size:0.65rem;float: left;width: ' + (max-min) + 'px">' + description + '</div>');
                            $('.progress-bar-labels').append(div);

                            min = max;
                        });
                    }
                });
            }

            $.when(call1(), call2()).done(function(f1, f2) {
                if ($('#postcode').val() != "") {
                    return jQuery.ajax({
                        dataType: 'json',
                        method: "GET",
                        url: "/api/postcode/" + $('#postcode').val(),
                        data: { },
                        success: function(data) {
                            if (!data) {
                                alert('postode niet gevonden');
                                $('#postcode').focus();

                                return false;
                            }
                            input.hardheid = (data.hardheid).toFixed(0);
                            input.verbruik = parseInt($('#verbruik').val());
                            calculate();
                        }
                    });
                } else {
                    if ($('#hardheid').val() && $('#verbruik').val()) {
                        input.hardheid = $('#hardheid').val();
                        input.verbruik = parseInt($('#verbruik').val());

                        calculate();
                    }
                }
            });

            $('#postcode').change(function() {
                jQuery.ajax({
                    dataType: 'json',
                    method: "GET",
                    url: "/api/postcode/" + $(this).val(),
                    data: { },
                    success: function(data) {
                        if (!data) {
                            alert('postode niet gevonden');
                            $('#postcode').focus();

                            return false;
                        }
                        input.hardheid = (data.hardheid).toFixed(0);
                        calculate();
                    }
                });
            });

            $('#hardheid').change(function() {
                input.hardheid = $(this).val();
                calculate();
            });

            $('#verbruik').change(function() {
                input.verbruik = parseInt($(this).val());
                calculate();
            });

            var calculate = function() {
                setProgressBar();

                $('#nodata').hide();
                $('#accordionExample').html("");

                if (input.hardheid) {
                    $('#hardheid').val(input.hardheid);
                } else {
                    $('#hardheid').val('');
                }


                if (!input.verbruik) { // nog geen hardheid ingegeven
                    return true;
                }

                calc.kgZout = (input.hardheid * input.verbruik * 0.017).toFixed(0);
                calc.prijsZout = (calc.kgZout * settings.prijsZout).toFixed(2);

                getProducts();
            };

            var getProducts = function() {
                jQuery.ajax({
                    dataType: 'json',
                    method: "GET",
                    url: "/api/product",
                    data: input,
                    success: function(data) {
                        if (data.length === 0) {
                            $('#nodata').show();

                            return;
                        }

                        var counter = 0;
                        $.each(data, function(key, value ) {
                            var tmp = $(template);
                            tmp.find('.card-header').attr('id', 'heading' + counter);
                            tmp.find('.card-header').find('.bi-search').parent('div').attr('productid', value.product.id);

                            tmp.find('button').attr('data-target', '#collapse' + counter);
                            tmp.find('button').attr('aria-controls', 'collapse' + counter);
                            if (value.aantalDagenTussenSpoeling >= 4 && value.aantalDagenTussenSpoeling <= 12) {
                                tmp.find('button').css('color', 'green');
                            }
                            tmp.find('button').find('#name').html(value.product.naam);
                            tmp.find('button').find('#spoeling').html(value.aantalDagenTussenSpoeling);

                            tmp.find('.collapse').attr('id', 'collapse' + counter);
                            tmp.find('.collapse').attr('aria-labelledby', 'heading' + counter);

                            tmp.find('.card-body').find('#inhoud').html(value.product.inhoud_commercieel);
                            tmp.find('.card-body').find('#volume').html(value.volumeTussenRegeneraties);
                            tmp.find('.card-body').find('#frequentie').html(value.frequentieOpJaarbasis);
                            tmp.find('.card-body').find('#spoeling').html(value.aantalDagenTussenSpoeling);

                            prijs = value.product.spoelwater * value.frequentieOpJaarbasis / 1000 * settings.prijsSpoelwater;
                            tmp.find('.card-body').find('#prijs').html("€ " + prijs.toFixed(2));

                            tmp.find('.card-body').find('#kg_zout').html(calc.kgZout);
                            tmp.find('.card-body').find('#prijs_zout').html(calc.prijsZout);

                            tmp.find('.card-body').find('#liters_zacht_water').html(" - ");

                            zout = calc.kgZout / value.frequentieOpJaarbasis;
                            tmp.find('.card-body').find('#verbruik_zout_per_spoeling').html(zout.toFixed(2));

                            spoelwater = prijs / settings.prijsSpoelwater / value.frequentieOpJaarbasis * 1000;
                            tmp.find('.card-body').find('#verbruik_spoelwater_per_regeneratie').html(spoelwater.toFixed(2));

                            $('#accordionExample').append(tmp.html());

                            counter++;
                        });
                    }
                });
            }

            $('#clearForm').click(function(e) {
                e.preventDefault();

                input = {
                    'hardheid' : 0,
                    'verbruik' : 0
                };

                $('input').val("");
                $('#accordionExample').html("");
            });

            var setProgressBar = function() {
                range = 0;

                $.each(ranges, function(i, el) {
                    if (el.min <= input.hardheid && el.max >= input.hardheid) {
                        range = i;
                    }
                });

                var prc = input.hardheid / maxRange * 100;

                $('.progress-bar-labels').find('div').addClass("d-none d-md-block");
                $($('.progress-bar-labels').find('div')[range]).removeClass("d-none d-md-block");

                $('.progress-bar').css('width', prc + '%');
                $('.progress-bar').css('background-color', ranges[range].color);
            };

            $(document).on('click', '.bi-search', function(e) {
                var id = $(this).parent('div').attr('productid');

                console.log(id);

                jQuery.ajax({
                    dataType: 'json',
                    method: "GET",
                    url: "/api/product-detail?id=" + id + "&lng=" + $('#lng').val(),
                    data: input,
                    success: function(data) {
                        $('#myModal').find(".modal-content").html(data);
                        $('#myModal').modal({});
                        $('#myModal').modal('show');
                    }
                });
            });
        });
    </script>
    </body>
</html>
