{% extends 'admin_base_layout.html' %}
{% load static %}
{% block content %}
<title>FitnessIQ | Add Product</title>
<div class="main-content pt-0">
	<div class="content-wrapper">
        <div class="row">
            <div class="col-12 col-md-12">
                <h2 class="f-22 mb-0 bold">Add Product</h2>
                <p class="gray f-14 mb-2">Welcome to Fitness IQ</p>
            </div>   
        </div>
        <form class="row" action="/add-product" id="add-trianer" method="POST" enctype="multipart/form-data" novalidate="novalidate">
    
            <div class="row new-user-table bookings mt-3">
                <div class="col-12 col-md-12">
                    <div class="card addService fortune dashboard-card">
                        <div class="row">
                            <div class="col-12 mb-4">
                                <div class="card p-4">
                                    <div class="picUpdate d-flex align-items-center justify-content-between">
                                        <div class="profile-pic">
                                            <div class="d-block align-items-center">
                                                <div class="text-center">
                                                    <img src="/static/admin/images/user-default.png"  id="profile-image" />
                                                </div>
                                                <div class="px-3 text-center">
                                                    <input type="file" name='avatar' id="myFileInput" onchange="loadfile(event)" accept="image/*" />
                                                    <input type="button" class="btn mb-0" onclick="document.getElementById('myFileInput').click()" value="Upload a New Photo" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                        
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Product Name</label>
                                <input type="text" placeholder="Product Name" name="name" class="form-control">
                            </div>                         
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">SKU</label>
                                <input type="text" placeholder="SKU" name="sku" class="form-control">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Product Price</label>
                                <input type="text" placeholder="Product Price" name="price" class="form-control">
                            </div>
                            <div class="col-12 col-md-6">
                                <label class="col-form-label">Product Quantity</label>
                                <input type="number" placeholder="Product Quantity" name="quantity" class="form-control">
                            </div>
                            <div class="col-12 col-md-12">
                                <label class="col-form-label">Product Description</label>
                                <textarea class= 'ckeditor' type="texteditor" name="content" id="content"></textarea>
                            </div>
                            <div class="col-12">
                                <div class="save-btn text-center mt-4">
                                    <button type="submit" class="save-btn">Add Product</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
	</div>
</div>

{%endblock%}

{%block js%}
<script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<script>

    function loadfile(event){
        var image = document.getElementById('profile-image');
        image.src = URL.createObjectURL(event.target.files[0]);
    };
    
    </script>
{% endblock %}