{% extends 'store_layout_two.html' %}
{% load static %}
{% block content %}
<title>Beni | Profile</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"
crossorigin="anonymous" />
<link rel="stylesheet" href="{% static 'store/build/css/countrySelect.css' %}">
<title>Beni | Profile</title>
<style>
.store-logo-wrap.banner-store .store-icon img {
    height: 100px;
    width: 100%;
    border-radius: 0;
    margin-bottom: 10px;
    object-fit: cover;
}
.store-logo-wrap.banner-store input[type="file"] {
    width: 200px;
    margin-bottom: 10px;
}
</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">Profile</h2>
        </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='/store-profile' id="store-profile" enctype="multipart/form-data" class="form-profile  store-prfle-form">
                           {% csrf_token %}
                            <div class="form-field-reset">
                                <div class="form-group">
                                    <div class="row">
                                      <div class="col-12 col-md-2"></div>
                                        <div class="col-12 col-md-5 ps-col position-relative text-center">
                                            <div class="store-logo-wrap relative">
                                                <input type="file" name="store_logo" onchange="loadfile(event)"/> 
                                                <div class="store-icon">
                                                    <img src="{% if store_obj.store_logo %}{{ store_obj.store_logo}}{% else %}{% static '/store/images/default.png' %}{% endif %}" id="store_logo">
                                                </div>
                                                <div class="profile-edit-icon">
                                                    <i class="icon-note menu-icon"></i>
                                                </div>
                                                <label><strong> Store Logo</strong> </label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-5 ps-col position-relative text-center">
                                            <div class="store-logo-wrap banner-store relative">
                                                <input type="file" name="store_banner" onchange="loadfilebanner(event)"/> 
                                                <div class="store-icon">
                                                    <img src="{% if store_obj.store_banner %}{{ store_obj.store_banner}}{% else %}{% static '/store/images/default.png' %}{% endif %}" id="store_banner">
                                                </div>
                                                <div class="profile-edit-icon">
                                                    <i class="icon-note menu-icon"></i>
                                                </div>
                                                <label><strong> Store Banner</strong> </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                           <label>Store Name</label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Store Name in English</label>
                                           <input type="text" name="store_name_english" placeholder="Enter Store Name" value="{% if store_obj.store_name_english %}{{ store_obj.store_name_english }}{% else %}{% endif %}" /> 
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Store Name in Arabic</label>
                                           <input type="text" name="store_name_arabic" placeholder="Enter Store Name" value="{% if store_obj.store_name_arabic %}{{ store_obj.store_name_arabic }}{% else %}{% endif %}" /> 
                                        </div>
                                    </div>  
                                </div>
                                 <div class="form-group">
                                     <div class="row">
                                        <div class="col-12 col-md-2">
                                          <label>Mobile Number</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input id="jquery-intl-phone" name="intel_phone_number" class="form-control" type="tel" value="{% if store_obj.store_number %}{{ store_obj.store_number }}{% else %}{% endif %}" >
                                            <input type="hidden" name="store_number" id="store_number" value="{% if store_obj.store_number %}{{ store_obj.store_number }}{% else %}{% endif %}">
                                            </div>
                                    </div>  
                                </div>
                                 <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                          <label>Email</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                           <input type="text" name="store_email" value="{% if store_obj.store_email %}{{ store_obj.store_email }}{% else %}{% endif %}" placeholder="store123@gmail.com" /> 
                                        </div>
                                    </div>  
                                </div>
                                <div class="form-group">
                                     <div class="row">
                                        <div class="col-12 col-md-2">
                                            <label>Country</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                            <input id="country_selector" type="text" name="country_selector" value="{% if store_obj.country %}{{ store_obj.country }}{% else %}Saudi Arabia {% endif %}">
                                            <input id="country" type="hidden" name="country" value="{% if store_obj.country %}{{ store_obj.country }}{% else %}Saudi Arabia {% endif %}">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                     <div class="row">
                                        <div class="col-12 col-md-2">
                                            <label>Store Bio</label>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Store Bio in English</label>
                                            <textarea class="form-text" name="store_description_english" placeholder="Enter Bio">{{ store_obj.store_description_english}}</textarea>
                                        </div>
                                        <div class="col-12 col-md-5  ps-col position-relative">
                                            <label class="label-in">Store Bio in Arabic</label>
                                            <textarea class="form-text" name="store_description_arabic" placeholder="Enter Bio">{{ store_obj.store_description_arabic}}</textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-12 col-md-2">
                                            <label>Store Address</label>
                                        </div>
                                        <div class="col-12 col-md-10  ps-col position-relative">
                                           <textarea class="form-text" name="address" placeholder="Enter Address">{{ store_obj.address }}</textarea>
                                        </div>
                                    </div>
                                </div>
                               
                            </div>
                          
                            <div class="d-flex align-items-center justify-content-center">
                                <button class="btn btn-primary" id="" >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/intl-tel-input/17.0.8/js/intlTelInput.min.js"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js" crossorigin="anonymous"></script>
<script src="{% static 'store/build/js/countrySelect.js' %}"></script>

<script>
    var input = document.querySelector("#jquery-intl-phone");
    window.intlTelInput(input, {
       initialCountry:"sa", 
       separateDialCode: true,
       autoFormat: false,

       customPlaceholder: function (
           selectedCountryPlaceholder,
           selectedCountryData
       ) {
           return "e.g. " + selectedCountryPlaceholder;
       },
   });

$("#country_selector").countrySelect(
);

$('#country_selector').change( function() {      
    var val = $(this).val();
    $('#country').val(val)
    console.log(val)
});
   
$("form").submit(function() {
   var iti = window.intlTelInputGlobals.getInstance(input);
   console.log('iti',iti)
   var full_number = iti.getNumber();
   $('#store_number').val(full_number)
   });

function loadfile(event){
    var image = document.getElementById('store_logo');
    image.src = URL.createObjectURL(event.target.files[0]);
  };

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