<!DOCTYPE html>
<!--
Copyright (C) 2021 Echedey López Romero <elr@disroot.org>

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
<html lang='en'>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="author" content="Echedey López Romero" />
        <title>Crowdsourcing Store</title>
        <link rel="stylesheet" href="./frameworks/bootstrap/css/bootstrap.min.css" />
        <script src="./frameworks/jquery/jquery-3.5.1.min.js"></script>
        <script src="./frameworks/bootstrap/js/bootstrap.bundle.min.js"></script>
        <link rel="stylesheet" href="./frameworks/fontawesome/css/all.min.css" />
        <script src="./frameworks/fontawesome/attribution.js"></script>
        <link rel="stylesheet" href="./css/common.css" />
        <script src="./js/common.js"></script>
    </head>
    <body class="container-fluid">
        <div class="row my-2">
            <div class="col-sm-10 col-12 mx-auto">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col text-center"></div>
                        <h1 class="col-lg-6 col-12 mb-0 p-5 text-center">Crowdsourcing Store</h1>
                        <?php echo $TopButtons ?>
                    </div>
                    <div class="row mb-2">
                        <?php echo $Page ?>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            function RoundUp(Num, Precision) {
                Precision = Math.pow(10, Precision);
                return Math.ceil(Num * Precision) / Precision;
            }

            $('.favourite').click(function () {
                $(this).toggleClass('fas far');

                let URL = '.?favourite=' + $(this).attr('data-id');

                $.get(URL);
            });

            $('.addcart').click(function () {
                $('#quantitycart').text(parseInt($('#quantitycart').text()) + 1);

                let URL = '.?cart=' + $(this).attr('data-id');

                $.get(URL);
            });

            $('.quantityproduct').change(function () {
                let QuantityProduct = parseInt($(this).val()) === NaN || parseInt($(this).val()) === 0 ? 1 : parseInt($(this).val());

                let URLRemove = '.?nocart=' + $(this).attr('data-id');
                let URLAdd = '.?cart=' + $(this).attr('data-id');

                $.get(URLRemove);

                for (let Position = 0; Position < QuantityProduct; Position++) {
                    $.get(URLAdd);
                }

                $('#subtotal').text(0);
                $('#shipping').text(0);
                $('#total').text(0);

                $('[id^=quantityproduct-]').each(function () {
                    let ProductPrice = Number(Number($(this).val() * $(this).attr('data-price')));
                    $('#subtotal').text(RoundUp(Number($('#subtotal').text()) + ProductPrice, 2));
                })

                if (Number($('#subtotal').text()) >= 500) {
                    $('#shipping').text(0);
                } else {
                    $('#shipping').text(RoundUp(Number($('#subtotal').text()) * 10 / 100, 2));
                }

                $('#total').text(RoundUp(Number($('#subtotal').text()) + Number($('#shipping').text()), 2));
            });

            $(document).ready((async () => {
                if ($('#country').val() !== undefined && $('#province').val() !== undefined
                        && $('#municipality').val() !== undefined && $('#zipcode').val() !== undefined ) {
                    await LoadData();

                    ShowZIPCode();
                    ShowMunicipality();
                    ShowProvince();
                    
                    $('#country').attr('onchange', 'RestartProvince(); ShowProvince();');
                    $('#province').attr('onchange', 'RestartMunicipality(); ShowMunicipality();');
                    $('#municipality').attr('onchange', 'RestartZIPCode(); ShowZIPCode();');
                }
            })());
        </script>
    </body>
</html>
