{% extends "master.html" %}
{% load static %}

{% block title %}
Peyment
{% endblock%}

{% block content %}

<div class="container-lg text-center my-3 p-3 rounded-1" style="background-color: rgb(206, 221, 240);">
    <h3 class="section-title">Peyment</h3>
    <div class="row">
        <table class="table table-striped table-hover shadow-lg">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Product</th>
                    <th scope="col">Unit proce</th>
                    <th scope="col">Quantity</th>
                    <th scope="col">Sum</th>
                </tr>
            </thead>
            <tbody>
                {% for item in order_items %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.product.name }}</td>
                    <td>${{ item.unit_price}}</td>
                    <td>{{ item.quantity }}</td>
                    <td>${{ item.item_price }}</td>
                </tr>
                {% endfor %}
                <tr class="table-info">
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><strong>Total Price:</strong></td>
                    <td><strong>${{ total_price }}</strong></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="row">
        <div class="col">
            
            <form id="UnSuccessfulpaymentForm" action="{% url 'peyment:resault' is_paid=0 order_id=order_id %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-warning">Unsuccessful peyment</a>
            </form>

        </div>
        <div class="col">

            <form id="SuccessfulpaymentForm" action="{% url 'peyment:resault' is_paid=1 order_id=order_id %}" method="post">
                {% csrf_token %}
                <button type="submit" class="btn btn-success">Successful peyment</a>
            </form>

        </div>
    </div>
</div>
{% endblock %}