{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<style>
    
 .upload__box {
	 padding: 40px;
}
 .upload__inputfile {
	 width: 0.1px;
	 height: 0.1px;
	 opacity: 0;
	 overflow: hidden;
	 position: absolute;
	 z-index: -1;
}
.upload__btn {
    display: inline-block;
    font-weight: 600;
    color: #fff !important;
    text-align: center;
    min-width: 116px;
    padding: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid;
    background-color: #bb9949;
    border-color: #bb9949;
    border-radius: 10px;
    line-height: 26px;
    font-size: 14px;
}
 .upload__btn:hover {
	 background-color: unset;
	 color: #000 !important;
	 transition: all 0.3s ease;
}
 .upload__btn-box {
	 margin-bottom: 10px;
}
 .upload__img-wrap {
	 display: flex;
	 flex-wrap: wrap;
	 margin: 0 -10px;
}
 .upload__img-box {
	 width: 200px;
	 padding: 0 10px;
	 margin-bottom: 12px;
}
 .upload__img-close {
	 width: 24px;
	 height: 24px;
	 border-radius: 50%;
	 background-color: rgba(0, 0, 0, 0.5);
	 position: absolute;
	 top: 10px;
	 right: 10px;
	 text-align: center;
	 line-height: 24px;
	 z-index: 1;
	 cursor: pointer;
}
 .upload__img-close:after {
	 content: '\2716';
	 font-size: 14px;
	 color: white;
}
 .img-bg {
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: cover;
	 position: relative;
	 padding-bottom: 100%;
}
 
</style>
<title>Beni | Add New Service</title>
<div class="content-body">
          
    <!-- row -->

    <div class="container-fluid">
          <div class="row page-titles profile mx-0">
        <div class="col">
            <h2 class="fs-32 mb-0">Add New Service</h2>
        </div>
        <div class="col pl-0">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0)">Services</a></li>
                <li class="breadcrumb-item active"><a href="javascript:void(0)">Add New Service</a></li>
            </ol>
        </div>
    </div>
        <div class="row">
            <div class="col-lg-12 col-xl-12">
                <div class="card mt-4">
                    <div class="card-body">
                        <form method="POST" action='' id="store-add-service" class="form-profile  store-product-form" enctype="multipart/form-data">
                            <div class="form-field-reset">
                              
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Service Name <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Service Name in English</label>
                                            <select class="form-select" name="service" id="service">
                                                <option disabled selected>Detailing Product</option>
                                                <option>Stone Polishing</option>                                           
                                                <option>Certificate Extraction</option>                                           
                                                <option>Accessories Maintenance</option>                                           
                                                <option>Watches Maintenance</option>                                           
                                                <option>Gif Arrangement</option>                                           
                                               </select>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Service Name in Arabic</label>
                                            <select class="form-select" name="service" id="service">
                                                <option disabled selected>Detailing Product</option>
                                                <option>Stone Polishing</option>                                           
                                                <option>Certificate Extraction</option>                                           
                                                <option>Accessories Maintenance</option>                                           
                                                <option>Watches Maintenance</option>                                           
                                                <option>Gif Arrangement</option>                                           
                                            </select>
                                        </div>
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Service Type <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Service Type in English</label>
                                            <input type="text" name="service_name_english" placeholder="Enter Service Name" /> 
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Service Type in Arabic</label>
                                            <input type="text" name="service_name_arabic" placeholder="Enter Service Name" /> 
                                        </div>
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Service Model <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Service Model Name in English</label>
                                            <input type="text" name="service_model_english" placeholder="Enter Service Model" /> 
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Service Model Name in Arabic</label>
                                            <input type="text" name="service_model_arabic" placeholder="Enter Service Model" /> 
                                        </div>
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Stone Type <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Stone Type in English</label>
                                            <input type="text" name="stone_type_english" placeholder="Enter Stone Name" /> 
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Stone Type in Arabic</label>
                                            <input type="text" name="stone_type_arabic" placeholder="Enter Stone Name" /> 
                                        </div>
                                    </div>  
                                </div>                         
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Size</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input type="number" name="size" placeholder="Enter Size" /> 
                                        </div>  
                                    </div>  
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Shape <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Shape in English</label>
                                            <input type="text" name="shape_english" placeholder="Enter Shape Name" /> 
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Shape in Arabic</label>
                                            <input type="text" name="shape_arabic" placeholder="Enter Shape Name" /> 
                                        </div>
                                    </div>  
                                </div>     
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Upload Images and Price <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <div class="upload__box">
                                                <div class="upload__btn-box">
                                                  <label class="upload__btn">
                                                    <p class="mb-0">Upload images</p>
                                                    <input type="file" multiple="" name="images" id="fileupload" data-max-length="9" class="upload__inputfile" accept="image/png, image/jpeg">
                                                </label>
                                                </div>
                                                <div class="upload__img-wrap"></div>
                                              </div> 
                                        </div>  
                                    </div>  
                                </div>
                            </div>
                          
                            <div class="d-flex align-items-center justify-content-center">
                                <button class="btn btn-primary" type="submit"  >Submit</button>
                            </div>
                        </form>
                    </div>
                </div>

             
                </div>
            </div>
        </div>
    </div>
    <!-- #/ container -->
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

{% endblock %}