<!DOCTYPE html>
<html lang="hu" dir="ltr">

<head>
    <link rel="stylesheet" href="/public/css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="/public/css/site.css?ver=<?= time() ?>">

    <script src="/public/js/jquery/jquery.min.js"></script>
    <script src="/public/js/bootstrap/bootstrap.min.js"></script>
    <script src="/public/js/site.js?ver=<?= time() ?>"></script>

    <script src="https://www.paypal.com/sdk/js?client-id=AVZSq8w9w6YfgGFVHqbUcfWNZjwwt6ztFBx7G5byP9zwjpdDjO9QKpUNgQAtTjFCUGm2Np7hrr-M_JCs&vault=true&intent=subscription" data-sdk-integration-source="button-factory"></script>

    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rendelés</title>
</head>

<body>
    <div id="paypal-button-container-P-2PX7209078748611GMJURNWI"></div>

    <img src="<?= $logo ?>" alt="">

    <?php if ($error != '') : ?>
        <div class="container index-container">
            <div class="alert alert-warning custom-alert" role="alert">
                <?= $error ?>
            </div>
        </div>
    <?php endif; ?>

    <div class="container index-container">
        <img src="/public/img/resourcemanager/loading.gif" id="loading_gif" />

        <form id="order-form" action="<?= $product->barion_url ?>" method="post">
            <input type="hidden" name="product_id" value="<?= $product->id ?>">
            <input type="hidden" name="userID" value="<?= $crmUser->nUserID ?>">
            <input type="hidden" id="barion_url" value="<?= $product->barion_url ?>">
            <div class="row">
                <div class="col-md-8">
                    <h3>Számlázási adatok</h3>
                    <hr>

                    <div class="form-group col-md-6">
                        <label for="name">Név *</label>
                        <input type="text" value="<?= $crmUser->name ?>" class="form-control" name="name" required>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="email">E-mail cím *</label>
                        <input type="email" value="<?= $crmUser->email ?>" class="form-control" name="email" required>
                    </div>

                    <div class="form-group col-md-6">
                        <label for="postcode">Irányítószám *</label>
                        <input type="text" value="<?= $crmUser->zip ?>" maxlength="4" class="form-control" id="postcode" name="postcode" required>
                    </div>
                    <div class="form-group col-md-6">
                        <label for="city">Város *</label>
                        <input type="text" value="<?= $crmUser->city ?>" class="form-control" name="city" required>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="address">Utca, házszám *</label>
                        <input type="text" value="<?= $crmUser->street ?>" class="form-control" name="address" required>
                    </div>

                    <div class="form-group col-md-12">
                        <label for="tax_number">Adószám</label> (A törvényi szabályozás értelmében 2020. július 1. után az adószám feltüntetése céges vevők esetében kötelező a számlán)
                        <input type="text" class="form-control" id="tax_number" name="tax_number">
                    </div>

                    <p style="margin-left: 2%;">Válassza ki, hogyan szeretné kifizetni a rendelését</p>
                    <div class="payment-radio">
                        <label><input type="radio" name="payment-radio" value="bankcard" checked> Bankkártyával előre</label>
                    </div>

                    <div class="payment-radio">
                        <label><input type="radio" name="payment-radio" value="transfer"> Közvetlen banki átutalás</label>
                    </div>

                    <h3>További információk</h3>
                    <hr>

                    <div class="form-group col-md-12">
                        <label for="address">Megjegyzés</label> (nem kötelező)
                        <textarea id="notes" cols="100%" name="notes" class="form-control" tabindex="14"></textarea>
                    </div>
                </div>
                <div class="col-md-4 frame">
                    <div class="form-group col-md-12">
                        <label for="postcode">
                            <h3>A rendelés tartalma</h3>
                        </label>
                    </div>
                    <br>

                    <div class="form-group col-md-8">
                        <label for="postcode">Termék</label>
                    </div>
                    <div class="form-group col-md-4 right-div">
                        <label for="postcode">Részösszeg</label>
                    </div>

                    <div class="form-group col-md-12 hr-div">
                        <hr>
                    </div>

                    <div class="form-group col-md-8 upper-div">
                        <label for="item-name"><?= $product->termek ?></label>
                        <?= $product->comment ?>
                    </div>
                    <div class="form-group col-md-4 right-div upper-div">
                        <label for="item-price"><span class="curr">€</span> <?= number_format($product->price, 0, ',', '.') ?></label>
                    </div>

                    <div class="form-group col-md-12 hr-div">
                        <hr>
                    </div>

                    <div class="form-group col-md-8 upper-div">
                        <label for="item-name">Áfa</label> (27%)
                    </div>
                    <div class="form-group col-md-4 right-div upper-div">
                        <label for="item-price"><span class="curr">€</span> <?= number_format($vat, 0, ',', '.') ?></label>
                    </div>

                    <div class="form-group col-md-12 hr-div">
                        <hr>
                    </div>

                    <div class="form-group col-md-8 upper-div">
                        <label for="item-name">Összeg</label>
                    </div>
                    <div class="form-group col-md-4 right-div upper-div">
                        <label for="item-price"><span class="curr">€</span> <?= number_format($brut, 0, ',', '.') ?></label>
                    </div>

                    <div class="form-group col-md-12 hr-div">
                        <hr>
                    </div>

                    <div class="form-group col-md-12 upper-div">
                        <label for="payment_method">Pénznem*</label>
                        <select id="currency_code" name="currency_code" class="form-control" required="" tabindex="2">
                            <option value="Ft" selected>Ft</option>
                            <!--<option value="Eur">EUR</option>-->
                        </select>
                    </div>

                    <div class="form-group col-md-12">
                        <h4>Vásárlással kapcsolatos megerősítések</h4>
                    </div>

                    <div class="form-group col-md-12">
                        <label><input type="checkbox" name="contract" required=""> Elolvastam és elfogadom az</label>
                        <a data-toggle="modal" data-target="#policy-dlg">Adatvédelmi nyilatkozatot</a>
                    </div>

                    <div class="form-group col-md-12">
                        <a data-toggle="modal" data-target="#agreement-dlg">
                            Elolvastam és elfogadom az Általános Szerződési Feltételeket
                        </a>
                    </div>

                    <div class="form-group col-md-12" style="text-align: center;">
                        <input type="submit" name="pay-btn" value="Megrendelés elküldése" class="btn btn-primary btn-lg">
                    </div>
                    <div class="col-md-12">
                        A "Megrendelés elküldése" gomb megnyomásával elfogadom, hogy a kiválasztott szolgáltatás nyújtása a 45/2014. (II. 26.) Kormányrendelet 20.§ (2) bekezdésében meghatározott,14 napos határidő lejártát megelőzően megkezdődik. A szolgáltatás teljesítését követően a felmondási jog megszűnik.
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Agreement modal -->
    <div class="modal fade" id="agreement-dlg" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel">Általános Szerződési Feltételek</h4>
                </div>
                <div class="modal-body" id="agreement">
                    <?= $license ?>
                </div>
                <div class="modal-footer">
                    <div class="form-group col-md-12" style="text-align: center;">
                        <button type="button" id="accept-btn" disabled class="btn btn-primary btn-lg" data-dismiss="modal">Elfogadom</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Policy modal -->
    <div class="modal fade" id="policy-dlg" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel">Adatvédelmi nyilatkozatot</h4>
                </div>
                <div class="modal-body">
                    <?= $policy ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Bezárás</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        paypal.Buttons({
            style: {
                shape: 'pill',
                color: 'blue',
                layout: 'horizontal',
                label: 'paypal'
            },
            createSubscription: function(data, actions) {
                return actions.subscription.create({
                    /* Creates the subscription */
                    plan_id: 'P-2PX7209078748611GMJURNWI'
                });
            },
            onApprove: function(data, actions) {
                alert(data.subscriptionID); // You can add optional success message for the subscriber here
            }
        }).render('#paypal-button-container-P-2PX7209078748611GMJURNWI'); // Renders the PayPal button
    </script>
</body>

</html>