{% 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>
<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='/add-store-service' id="store-add-service" class="form-profile  store-product-form" enctype="multipart/form-data">
                            {%csrf_token%}
                            <div class="form-field-reset">
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-3">
                                           <label>Service Name <span class="red"> *</span></label>
                                        </div>
                                        <div class="col-12 col-md-9  ps-col position-relative">
                                            <label class="label-in">Service Name in English</label>
                                            <select class="form-select" name="service_id" id="service">
                                                <option disabled selected>Select Service Category</option>
                                                {% for main in service %}
                                                <option value="{{ main.id }}">{{ main.english_service_name}}</option>                              
                                                {% endfor %}                                     
                                               </select>
                                        </div>
                            </div>
                          
                            <div class="d-flex align-items-center justify-content-center pt-4">
                                <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 %}