{% extends 'admin_layout_two.html' %}
{% load static %}
{% block content %}
<!-- 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> -->
<style>
@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext');
</style>
         <!--Content body start-->
             <title>Beni | Add Transaction</title>
         <div class="content-body">
            <div class="container-fluid">
                <div class="row page-titles  mx-0">
                    <div class="col">
                        <h2 class="fs-32 mb-0">Add Transaction</h2>
                    </div>
                </div>
             
                <div class="row add-maincats mt-4">
                    <div class="col-lg-12 col-xl-12">
                        <div class="card">
                            <div class="card-body">
                                <form method="POST" action='/add-transcation-wallet' class="form-catAdd" id="add-transcation-wallet" enctype="multipart/form-data">                           
                                    {% csrf_token %}
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                                <label>Type</label>
                                            </div>
                                            <div class="col-12 col-md-10 ps-col position-relative">
                                                <select name="type" id="type">    
                                                    <option selected disabled>Please select the type</option> 
                                                    <option value="Addition">Addition</option>
                                                    <option value="Subtraction">Subtraction</option>
                                                </select>                                            
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                                <label>User</label>
                                            </div>
                                            <div class="col-12 col-md-10 ps-col position-relative">
                                                <select name="buyer" id="buyer"> 
                                                <option selected disabled>Please select the user</option>
                                                {% for i in buyer_obj %}    
                                                    <option value="{{i.id}}">{{ i.first_name }} {{ i.last_name }} ({{ i.customer_id }})</option>
                                                {% endfor %}
                                                </select>                                            
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                                <label>Amount</label>
                                            </div>
                                            <div class="col-12 col-md-10 ps-col position-relative tr-amount-col">
                                                <input type="text" name="amount" id="amount"  placeholder="Enter Amount">   
                                                <p class="sar-amount">SAR</p>
                                            </div>
                                        </div> 
                                    </div>  
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                                <label>Reason</label>
                                            </div>
                                            <div class="col-12 col-md-10 ps-col position-relative">
                                                <textarea class="from-textarea" name="reason" id="reason" placeholder="Type Reason"> </textarea>
                                            </div>
                                        </div> 
                                    </div> 
                                    <div class="form-group">
                                        <div class="row">
                                            <div class="col-12 col-md-2">
                                                <label></label>
                                            </div>
                                            <div class="col-12 col-md-10 ps-col position-relative">
                                                <div class="d-flex align-items-center justify-content-center">
                                                    <button class="btn btn-primary">Submit</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>  
                                    
                                </form>
                            </div>
                        </div>
        
        
                    </div>
                </div>
            </div>
        </div>
         <!--Content body end-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
         
{% endblock %}