{% extends 'core/base.html' %}

{% block title %}Cart{% endblock title %}

{% block content %}

    <h1 class="title">Cart</h1>

<div class="modal" tabindex="-1" id="div" style="z-index:100; display:none;" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Order Success</h5>
        <button type="button" class="close" id="closebtn" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Your order is successfully placed 🎉 <br> Check your email for confirmation..</p>
      </div>
      <div class="modal-footer">
        <button type="button" id="close" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
    {% if cart %}
    
        <div class="box mb-6">
            <div class="table">
                <table class="table is-fullwidth is-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Product</th>
                            <th>Quantity</th>
                            <th>Price</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for item in cart %}
                        
                            <tr>
                                <td>
                                    <figure class="image is-64x64">
                                        <img src="{{ item.product.get_thumbnail }}" alt="{{item.product.title}}">
                                    </figure>
                                </td>
                                <td>
                                    <a href="{% url 'product:product' item.product.category.slug item.product.slug %}">{{item.product.title}}</a>
                                </td>
                                <td>
                                    ${{item.quantity}}

                                    <a href="?change_quantity={{ item.id }}&quantity=-1">-</a>
                                    <a href="?change_quantity={{ item.id }}&quantity=1">+</a>

                                </td>

                                <td>${{ item.total_price }}</td>
                                <td>
                                    <a href="?remove_from_cart={{item.id}}" class="delete">Remove</a>
                                </td>
                            </tr>
                        
                        {% endfor %}
                    </tbody>

                    <tfoot>
                        <tr>
                            <td></td>
                            <td><strong>Total Cost</strong> </td>
                            <td><strong>{{ cart|length }}</strong> </td>
                            <td colspan="2">${{cart.get_total_cost}}</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>



        <h2 class="subtitle">Contact Information</h2>

        <form method="post" action="" id="payment-form">
            {% csrf_token %}

            {% if form.non_field_errors %}
                <div class="notification is-danger">
                    {{form.non_field_errors}}
                </div>
            {% endif %}

            {% if form.errors %}
                <div class="notification is-danger">
                    <ul>
                        {% for field in form %}
                            {% for error in field.errors %}
                                <li><strong>{{field.label}}</strong>{{error}}</li>
                            {% endfor %}
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            <div class="columns">
                <div class="column is-6">
                    <div class="field">
                        <label>First Name</label>

                        <div class="control">
                            <input type="text" name="first_name" id="" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label>Last Name</label>

                        <div class="control">
                            <input type="text" name="last_name" id="" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label>Email</label>

                        <div class="control">
                            <input type="email" name="email" id="" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label>Phone</label>

                        <div class="control">
                            <input type="text" name="phone" id="" class="input">
                        </div>
                    </div>

                </div>

                <div class="column is-6">
                    <div class="field">
                        <label>Address</label>

                        <div class="control">
                            <input type="text" name="address" id="" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label>Zip Code</label>

                        <div class="control">
                            <input type="text" name="zipcode" id="" class="input">
                        </div>
                    </div>

                    <div class="field">
                        <label>Place</label>

                        <div class="control">
                            <input type="text" name="place" id="" class="input">
                        </div>
                    </div>

                </div>

            </div>


            <h2 class="subtitle">Payment Information</h2>

            <div id="card-element">
                {% comment %} A stripe Element will be inserted here {% endcomment %}
            </div>

            {% if messages %}
                {% for message in messages %}
                    <div class="notification is-danger">
                        {{message}}
                    </div>
                {% endfor %}
            {% endif %}

            <div class="field">
                <div class="control">
                    <button class="button mt-4 is-uppercase" id="submit" style="background-color: #ca373d; color: #fff;">Checkout</button>
                </div>
            </div>
        </form>
    {% else %}

    <p>You don't have any products in your cart.</p>

    {% endif %}

{% endblock content %}


{% block scripts %}


    <script src="https://js.stripe.com/v3/"></script>
    <script>

        const submit = document.getElementById('submit');
        const div = document.getElementById('div');
        const close = document.getElementById('close');
        const closebtn = document.getElementById('closebtn');
        submit.addEventListener('click', ()=>{
            div.style.display = 'block';
        });
        close.addEventListener('click', ()=>{
            div.style.display = 'none';
        });
        closebtn.addEventListener('click', ()=>{
            div.style.display = 'none';
        });

        var stripe = Stripe('{{ stripe_pub_key }}');
        var elements = stripe.elements();

        var card = elements.create('card');

        card.mount('#card-element');

        var form = document.getElementById('payment-form');
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            stripe.createToken(card).then(function(result) {
                if (result.error) {
                    var errorElement = document.getElementById('card-errors');
                    errorElement.textContent = result.error.message;
                } else {
                    stripeTokenHandler(result.token);
                }
            });
        });

        function stripeTokenHandler(token) {
            var form = document.getElementById('payment-form');
            var hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripe_token');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);

            form.submit();
        }
    </script>

{% endblock scripts %}