<?php
// We import the required PHP files.
include_once $_SERVER["DOCUMENT_ROOT"] . "/shop/include/global.inc";
include_once $_SERVER["DOCUMENT_ROOT"] . "/shop/include/redirections/payment_redirection.inc";
include_once $_SERVER["DOCUMENT_ROOT"] . "/shop/include/cart_static.inc";
include_once $_SERVER["DOCUMENT_ROOT"] . "/shop/include/payment_dynamic.inc";
// And use a documentation block to point out the included variables.
/**
 * @var array $GLOBAL
 * @var array $event_data
 * @var array $event
 */
// We check if a cart cas sent.
was_cart_sent();
check_cart_integrity();
// We update the event data if the cart is valid.
$event_data = fetch_event_data();
// If everything is fine, we save the cart in the session.
// Start a session if it is not already started.
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
// We save the cart in the session.
$_SESSION["cart"] = $_POST["cartArray"];
?>
<!doctype html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $GLOBAL["SHOP_TITLE"].' - '.$event_data["name"]?></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="<?php echo $GLOBAL["FONT_URL"]?>" rel="stylesheet">
    <link rel="stylesheet" href="<?php echo $GLOBAL["SKELETON_CSS_PATH"]?>" media="all">
    <link rel="stylesheet" href="<?php echo $GLOBAL["SHOP_PAYMENT_CSS_PATH"]?>" media="all">
    <link rel="stylesheet" href="<?php echo $GLOBAL["ICONS_URL"]?>">
    <link rel="icon" href="<?php echo $GLOBAL["FAVICON_PATH"]?>" type="image/x-icon">
    <script src="/shop/js/api_calls.js" crossorigin="anonymous"></script>
    <script src="/shop/js/payment_handler.js" crossorigin="anonymous"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <script src="/shop/js/checkout.js" defer></script>
</head>

<body id="two-section-body">
<section id="content-section" class="body-section">
    <header id="pill-styled-header">
        <nav id="pill-styled-nav">
            <div class="pill-style-step" data-position="left">
                1. Remplis ton panier
            </div>
            <div class="pill-styled-separation"></div>
            <div class="pill-style-step" data-active="true">
                2. Paiement
            </div>
            <div class="pill-styled-separation" data-active="true"></div>
            <div class="pill-style-step" data-position="right">
                3. C'est bon !
            </div>
        </nav>
    </header>
    <h1 id="page-title">
        <i class="bi bi-currency-exchange" id="page-title-icon"></i>
        <span id="page-title-text">Paiement</span>
    </h1>
    <form action="/shop/api/payment/process.php" method="post" id="payment-form">
        <input type="hidden" name="cartArray" id="cartArray">
        <section class="payment-section">
            <h2 class="page-subtitle">
                <i class="bi bi-info-circle-fill" id="page-title-icon"></i>
                <span id="page-subtitle-text">Informations de facturation</span>
            </h2>
            <div class="payment-section-input">
                <label>
                    <input type="text" name="first-name-billing" placeholder="Prénom" data-size="S" required>
                </label>
                <label>
                    <input type="text" name="last-name-billing" placeholder="Nom" data-size="S" required>
                </label>
                <label>
                    <input type="email" name="email-billing" placeholder="Adresse e-mail" data-size="L" required>
                </label>
            </div>
            <div class="payment-section-info">
                <h3 class="in-payment-form">Pourquoi nous en avons besoin ?</h3>
                <p class="in-payment-form">Nous avons besoin de ces informations pour vous fournir un reçu. Celui-ci permettra d'identifier la transaction effectuée en cas de besoin.</p>
            </div>
        </section>
        <section class="payment-section">
            <h2 class="page-subtitle">
                <i class="bi bi-person-lines-fill" id="page-title-icon"></i>
                <span id="page-subtitle-text">Titulaire du billet</span>
            </h2>
            <div>
                <?php display_user_info_form(); ?>
                <p class="error" id="error-holders"></p>
            </div>
            <div class="payment-section-info">
                <h3 class="in-payment-form">Les billets sont-ils nominatifs ?</h3>
                <p class="in-payment-form">Les billets de cet événement sont nominatifs. Nous vous rappelons que cet événement est réservé aux étudiants majeurs de Toulouse, d'où la nécessité de vérifier son identité dans le cas des places non-amicalistes. Une carte étudiante pourra vous être demandée lors de l'événement en plus de votre billet.</p>
            </div>
        </section>
        <section class="payment-section">
            <h2 class="page-subtitle">
                <i class="bi bi-wallet" id="page-title-icon"></i>
                <span id="page-subtitle-text">Moyen de paiement</span>
            </h2>
            <div class="payment-section-input">
                <div id="checkout">

                </div>
            </div>
            <div class="payment-section-info">
                <h3 class="in-payment-form">Mes données sont-elles en sécurité ?</h3>
                <p class="in-payment-form">Le paiement se fera via notre partenaire Lydia afin de garantir la sécurité de vos informations.</p>
            </div>
        </section>
        <div class="footer in-form-footer">
            <button class="red-curved-button button-no-margin disabled" id="submit-button" type="submit">Confirmer le paiement</button>
        </div>
    </form>
    <script>
        // We make the submit button do expected behaviour only if cart is not empty.
        const paymentForm = document.getElementById("payment-form");
        paymentForm.addEventListener("submit", function(event) {
            // We check if the submit button is disabled.
            if (document.getElementById("submit-button").classList.contains("disabled")) {
                event.preventDefault();
            }
        });
        // As well as all the buttons with class student-code-sbmt if they hold the disabled class.
        const studentCodeSbmt = document.getElementsByClassName("student-code-sbmt");
        for (let i = 0; i < studentCodeSbmt.length; i++) {
            studentCodeSbmt[i].addEventListener("click", function(event) {
                if (studentCodeSbmt[i].classList.contains("disabled")) {
                    event.preventDefault();
                }
            });
        }
        // And everytime we update the form, we check if the submit button should be disabled.
        // The submit button should be disabled if the required fields are not filled.
        const requiredFields = document.querySelectorAll("input[required]");
        for (let i = 0; i < requiredFields.length; i++) {
            requiredFields[i].addEventListener("input", function() {
                let submitButton = document.getElementById("submit-button");
                let disabled = false;
                for (let j = 0; j < requiredFields.length; j++) {
                    if (requiredFields[j].value === "") {
                        disabled = true;
                        break;
                    }
                }
                if (disabled) {
                    submitButton.classList.add("disabled");
                } else {
                    submitButton.classList.remove("disabled");
                }
            });
        }
    </script>
</section>
<section id="cart-section" class="body-section">
    <div id="cart-ticket-top">
        <img id="cart-amicale-logo" alt="Logo de l'Amicale" src="/shop/assets/logo_amicale.svg">
    </div>
    <div id="cart-ticket-middle">
        <div id="cart-event-display">
            <h1 class="in-cart"><?php echo $GLOBAL["EVENT_NAME"]?></h1>
            <img id="cart-event-logo" alt="Logo de l'événement" src="/shop/assets/logo_event.svg">
            <h3 class="in-cart" id="cart-event-date"><?php echo $GLOBAL["EVENT_DATE"]?></h3>
            <h3 class="in-cart" id="cart-event-location"><?php echo $GLOBAL["EVENT_LOCATION"]?></h3>
        </div>
    </div>
    <div id="cart-ticket-bottom">
        <h2 class="in-cart">Mon panier</h2>
        <?php display_cart(); ?>
    </div>
</section>
</body>

</html>


