{% extends "prk_template/base.html" %}



{% block content %}
<style>
	  table {
		  width: 100%;
		  border-collapse: collapse;
		  background-color: #fff;
	  }
	  th, td {
		  border: 1px solid #1abc9c;
		  padding: 4px;
		  text-align: left;
	  }
	  th {
		  background-color: #46c5ab;
		  font-size: 9px;
		  color: #fff;
	  }
	  td.number {
		  text-align: center;
	  }
	  .hidden {
		  display: none;
	  }
	  .expandable {
		  cursor: pointer;
	  }
	  .expandable:hover {
		  background-color: #f0f0f0;
	  }
	  .summary-row {
		  background-color: #e0e0e0;
		  font-weight: bold;
	  }  
   /* Loading Spinner Styles */
   .loading-spinner {
			  text-align: center;
		  }
  
		  .loading-spinner .fa-spinner {
			  font-size: 28px; /* Adjust size as needed */
			  color: #1abc9c; /* Change color as needed */
			  animation: spin 1s linear infinite;
		  }
  
		  /* Keyframes for spinning animation */
		  @keyframes spin {
			  0% { transform: rotate(0deg); }
			  100% { transform: rotate(360deg); }
		  }
  .input-row {
	  display: flex;
	  flex-wrap: wrap;
  }
  
  .col-2 {
	  flex: 0 0 16.67%; /* 2 out of 12 columns */
	  max-width: 16.67%; /* Adjust based on your grid system */
	  box-sizing: border-box; /* Ensure padding/margins are included */
	  
	  
  }
  /* Control the input height */
  .col-2 input,select {
	  height: 20px; /* Set your desired height */
	  padding: 0 10px; /* Optional: Add horizontal padding */
	  font-size: 10px; /* Optional: Set font size */
  }
  .col-3 input {
	  height: 20px; /* Set your desired height */
	  padding: 0 10px; /* Optional: Add horizontal padding */
	  font-size: 10px; /* Optional: Set font size */
  }
  .col-4 input {
	  height: 20px; /* Set your desired height */
	  padding: 0 10px; /* Optional: Add horizontal padding */
	  font-size: 10px; /* Optional: Set font size */
  }
  .col-2:last-child {
	  margin-right: 0; /* Remove margin for the last item */
  }
  
  @media (max-width: 768px) { /* Adjust for smaller screens */
	  .col-2 {
		  flex: 0 0 100%; /* Stack on smaller screens */
		  max-width: 100%;
	  }
  }
  
  .modal {
	  display: none; /* Hidden by default */
	  position: fixed; /* Stay in place */
	  z-index: 10; /* Sit on top */
	  left: 0;
	  top: 0;
	  width: 100%; /* Full width */
	  height: 100%; /* Full height */
	  overflow: auto; /* Enable scroll if needed */
	  background-color: rgb(0,0,0); /* Fallback color */
	  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  .modal-content {
	  background-color: #fefefe;
	  margin: 15% auto; /* 15% from the top and centered */
	  padding: 20px;
	  border: 1px solid #888;
	  width: 80%; /* Could be more or less, depending on screen size */
	  overflow: auto; /* Enable scroll if needed */
  }
  
  .close {
	  color: #a71212;
	  float:right;
	  font-size: 28px;
	  font-weight: bold;
	  padding-left: 98%;
  }
  
  .close:hover,
  .close:focus {
	  color: #a71212;
	  text-decoration: none;
	  cursor: pointer;
  }
 
  
</style>
<script>
    var style = document.createElement('style');
  style.setAttribute("id","multiselect_dropdown_styles");
  style.innerHTML = `
  .multiselect-dropdown{
    display: inline-block;
    padding: 0px;
    border-radius: 4px;
    border: solid 1px #ced4da;
    background-color: white;
    position: relative;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px !important;
    height: 2.4em !important;
    width: 19em !important;
  }
  .multiselect-dropdown span.optext, .multiselect-dropdown span.placeholder{
    margin-right:0.5em; 
    margin-bottom:2px;
    padding:1px 0; 
    border-radius: 4px; 
    display:inline-block;
  }
  .multiselect-dropdown span.optext{
    background-color:lightgray;
    padding:5px 0.75em; 
  }
  .multiselect-dropdown span.optext .optdel {
    float: right;
    margin: 0 -6px 1px 5px;
    font-size: 0.7em;
    margin-top: 2px;
    cursor: pointer;
    color: #666;
  }
  .multiselect-dropdown span.optext .optdel:hover { color: #c66;}
  .multiselect-dropdown span.placeholder{
    color:#ced4da;
    margin: 5px !important;

  }
  .multiselect-dropdown-list-wrapper{
    box-shadow: gray 0 3px 8px;
    z-index: 100;
    padding:2px;
    border-radius: 4px;
    border: solid 1px #ced4da;
    display: none;
    margin: -1px;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    background: white;
  }
  .multiselect-dropdown-list-wrapper .multiselect-dropdown-search{
    margin-bottom:5px;
  }
  .multiselect-dropdown-list{
    padding:2px;
    height: 15rem;
    overflow-y:auto;
    overflow-x: hidden;
  }
  .multiselect-dropdown-list::-webkit-scrollbar {
    width: 6px;
  }
  .multiselect-dropdown-list::-webkit-scrollbar-thumb {
    background-color: #bec4ca;
    border-radius:3px;
  }
  
  .multiselect-dropdown-list div{
    padding: 5px;
  }
  .multiselect-dropdown-list input{
    height: 1.15em;
    width: 1.15em;
    margin-right: 0.35em;  
  }
  .multiselect-dropdown-list div.checked{
  }
  .multiselect-dropdown-list div:hover{
    background-color: #ced4da;
  }
  .multiselect-dropdown span.maxselected {width:100%;}
  .multiselect-dropdown-all-selector {border-bottom:solid 1px #999;}
  `;
  document.head.appendChild(style);
  
  function MultiselectDropdown(options){
    var config={
      search:true,
      height:'15rem',
      placeholder:'Select',
      txtSelected:'selected',
      txtAll:'All',
      txtRemove: 'Remove',
      txtSearch:'search',
      ...options
    };
    function newEl(tag,attrs){
      var e=document.createElement(tag);
      if(attrs!==undefined) Object.keys(attrs).forEach(k=>{
        if(k==='class') { Array.isArray(attrs[k]) ? attrs[k].forEach(o=>o!==''?e.classList.add(o):0) : (attrs[k]!==''?e.classList.add(attrs[k]):0)}
        else if(k==='style'){  
          Object.keys(attrs[k]).forEach(ks=>{
            e.style[ks]=attrs[k][ks];
          });
         }
        else if(k==='text'){attrs[k]===''?e.innerHTML='&nbsp;':e.innerText=attrs[k]}
        else e[k]=attrs[k];
      });
      return e;
    }
  
    
    document.querySelectorAll("select[multiple]").forEach((el,k)=>{
      
      var div=newEl('div',{class:'multiselect-dropdown',style:{width:config.style?.width??el.clientWidth+'px',padding:config.style?.padding??''}});
      el.style.display='none';
      el.parentNode.insertBefore(div,el.nextSibling);
      var listWrap=newEl('div',{class:'multiselect-dropdown-list-wrapper'});
      var list=newEl('div',{class:'multiselect-dropdown-list',style:{height:config.height}});
      var search=newEl('input',{class:['multiselect-dropdown-search'].concat([config.searchInput?.class??'form-control']),style:{width:'100%',display:el.attributes['multiselect-search']?.value==='true'?'block':'none'},placeholder:config.txtSearch});
      listWrap.appendChild(search);
      div.appendChild(listWrap);
      listWrap.appendChild(list);
  
      el.loadOptions=()=>{
        list.innerHTML='';
        
        if(el.attributes['multiselect-select-all']?.value=='true'){
          var op=newEl('div',{class:'multiselect-dropdown-all-selector'})
          var ic=newEl('input',{type:'checkbox'});
          op.appendChild(ic);
          op.appendChild(newEl('label',{text:config.txtAll}));
    
          op.addEventListener('click',()=>{
            op.classList.toggle('checked');
            op.querySelector("input").checked=!op.querySelector("input").checked;
            
            var ch=op.querySelector("input").checked;
            list.querySelectorAll(":scope > div:not(.multiselect-dropdown-all-selector)")
              .forEach(i=>{if(i.style.display!=='none'){i.querySelector("input").checked=ch; i.optEl.selected=ch}});
    
            el.dispatchEvent(new Event('change'));
          });
          ic.addEventListener('click',(ev)=>{
            ic.checked=!ic.checked;
          });
    
          list.appendChild(op);
        }
  
        Array.from(el.options).map(o=>{
          var op=newEl('div',{class:o.selected?'checked':'',optEl:o})
          var ic=newEl('input',{type:'checkbox',checked:o.selected});
          op.appendChild(ic);
          op.appendChild(newEl('label',{text:o.text}));
  
          op.addEventListener('click',()=>{
            op.classList.toggle('checked');
            op.querySelector("input").checked=!op.querySelector("input").checked;
            op.optEl.selected=!!!op.optEl.selected;
            el.dispatchEvent(new Event('change'));
          });
          ic.addEventListener('click',(ev)=>{
            ic.checked=!ic.checked;
          });
          o.listitemEl=op;
          list.appendChild(op);
        });
        div.listEl=listWrap;
  
        div.refresh=()=>{
          div.querySelectorAll('span.optext, span.placeholder').forEach(t=>div.removeChild(t));
          var sels=Array.from(el.selectedOptions);
          if(sels.length>(el.attributes['multiselect-max-items']?.value??5)){
            div.appendChild(newEl('span',{class:['optext','maxselected'],text:sels.length+' '+config.txtSelected}));          
          }
          else{
            sels.map(x=>{
              var c=newEl('span',{class:'optext',text:x.text, srcOption: x});
              if((el.attributes['multiselect-hide-x']?.value !== 'true'))
                c.appendChild(newEl('span',{class:'optdel',text:'🗙',title:config.txtRemove, onclick:(ev)=>{c.srcOption.listitemEl.dispatchEvent(new Event('click'));div.refresh();ev.stopPropagation();}}));
  
              div.appendChild(c);
            });
          }
          if(0==el.selectedOptions.length) div.appendChild(newEl('span',{class:'placeholder',text:el.attributes['placeholder']?.value??config.placeholder}));
        };
        div.refresh();
      }
      el.loadOptions();
      
      search.addEventListener('input',()=>{
        list.querySelectorAll(":scope div:not(.multiselect-dropdown-all-selector)").forEach(d=>{
          var txt=d.querySelector("label").innerText.toUpperCase();
          d.style.display=txt.includes(search.value.toUpperCase())?'block':'none';
        });
      });
  
      div.addEventListener('click',()=>{
        div.listEl.style.display='block';
        search.focus();
        search.select();
      });
      
      document.addEventListener('click', function(event) {
        if (!div.contains(event.target)) {
          listWrap.style.display='none';
          div.refresh();
        }
      });    
    });
  }
  
  window.addEventListener('load',()=>{
    MultiselectDropdown(window.MultiselectDropdownOptions);
  });
  
  </script> 
  
<div class="pcoded-main-container">
	<div class="pcoded-content">
		<!-- [ breadcrumb ] start -->
		<div class="page-header">
			<div class="page-block">
				<div class="row align-items-center">
					<div class="col-md-12">
						<div class="page-header-title">
							<h5 class="m-b-10">Navs &amp; tabs</h5>
						</div>
						<ul class="breadcrumb">
							<li class="breadcrumb-item"><a href="index.html"><i class="feather icon-home"></i></a></li>
							<li class="breadcrumb-item"><a href="#!">Basic Components</a></li>
							<li class="breadcrumb-item"><a href="#!">Navs &amp; tabs</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- [ breadcrumb ] end -->
		<!-- [ Main Content ] start -->
		<div class="row">
			<!-- [ tabs ] start -->
			
			<div class="col-sm-12">
				
				<div class="card">
					<div class="card-body">
						<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
							           <li class="nav-item">
								<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-create-catalog" role="tab" aria-controls="pills-create-catalog" aria-selected="false">Product Catalog</a>
							</li>
				
						</ul>
						<div class="tab-content" id="pills-tabContent">
						
							<div class="tab-pane fade" id="pills-create-catalog" role="tabpanel" aria-labelledby="pills-profile-tab">
								
                                <div class="row">

                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroup-sizing-sm">Product Name</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="product_name" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroup-sizing-sm">SKU</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="description" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroup-sizing-sm">Brand</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="brand_name" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroup-sizing-sm">Price</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="price" autocomplete="off">
                                        </div>
                                    </div>
                                    
                                    
                                </div>
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroup-sizing-sm">Select Color</span>
                                            </div>
                                            <select id="colors" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" multiple multiselect-search="false" multiselect-select-all="true" multiselect-max-items="1">
                                                <option value="Black">Black</option>
                                                <option value="White">White</option>
                                                <option value="Red">Red</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroup-sizing-sm">Select Size</span>
                                            </div>
                                            <select id="sizes" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" multiple multiselect-search="false" multiselect-select-all="true" multiselect-max-items="1">
                                                <option value="xl">XL</option>
                                                <option value="xxl">XXL</option>
                                                <option value="large">LARGE</option>
                                            </select>
                                        </div>
                                        
                                    </div>
                                    <div class="col-md-6">
                                      <div class="input-group mb-3">
                                          <div class="custom-file">
                                              <input type="file" class="custom-file-input" id="image">
                                              <label class="custom-file-label" for="image">Choose File</label>
                                          </div>
                                          <div class="input-group-append">
                                              <span class="input-group-text">Upload</span>
                                          </div>
                                      </div>
                                  </div>
                                    
                                </div>
                                <button class="btn  btn-primary btn-sm" id="create_catalog_btn">Submit</button>
                                    
							</div>
						
						</div>
                        
					</div>
				</div>
			</div>
			
			<!-- [ tabs ] end -->
		</div>
		<!-- [ Main Content ] end -->
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>

<script>
    document.getElementById('create_catalog_btn').addEventListener('click', function() {
        
    
        // Create a FormData object
        const formData = new FormData();

         // Append text input fields to the FormData object
        formData.append('product_name', document.getElementById('product_name').value);
        formData.append('description', document.getElementById('description').value);
        formData.append('brand_name', document.getElementById('brand_name').value);
        formData.append('price', document.getElementById('price').value);
        // formData.append('colors', document.getElementById('colors').value);
        // formData.append('sizes', document.getElementById('sizes').value);
        
        // Get all selected options from the 'colors' select element
        
        let selectedColors = Array.from(document.getElementById('colors').selectedOptions).map(option => option.value);

       // Append the array to FormData as a string or individual values
        formData.append('colors', JSON.stringify(selectedColors)); // Or loop to add each color
        
        let selectedSizes = Array.from(document.getElementById('sizes').selectedOptions).map(option => option.value);

       // Append the array to FormData as a string or individual values
        formData.append('sizes', JSON.stringify(selectedSizes)); // Or loop to add each color

        

        const token = localStorage.getItem('token'); // Replace with your method to get JWT

        // Send data using Axios
        axios.post('/create_catelog_date_insertion', formData, {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(response => {
            alert('Dealer data submitted successfully');
            console.log(response.data);
        })
        .catch(error => {
            alert('Error submitting Dealer data');
            console.error(error);
        });
    });
</script>


{% endblock %}