{% 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>
  
<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 active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Store Info</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-address" role="tab" aria-controls="pills-address" aria-selected="false">Address</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-operation" role="tab" aria-controls="pills-operation" aria-selected="false">Operation</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-post" role="tab" aria-controls="pills-post" aria-selected="false">Post</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-file" role="tab" aria-controls="pills-file" aria-selected="false">File</a>
							</li>
						</ul>
						<div class="tab-content" id="pills-tabContent">
							<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
								<!-- <div class="alt" id="tbl_div">
									<table id="park_free_data">
									</table>
								 
								</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">Shop Name</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="shop_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">Display Name</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="display_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">PAN No.</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="pan_number" 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">Owner Name</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="owner_name" autocomplete="off">
                                        </div>
                                    </div>
                                    

                                </div>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="input-group input-group-sm mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroup-sizing-sm">Shop Description</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="shop_description" 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">Name</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Contact Person Name" id="contact_person_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">Mobile</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Contact Person Mobile" id="contact_person_mobile" 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">Email</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Contact Email" id="contact_email" 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">Phone</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="phone_number" 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">Mobile</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="mobile_number" 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">Whatsapp</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="Whatsapp_number" 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">Established Date</span>
                                            </div>
                                            <input type="date" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="established_date" 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">Brands</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="brands" autocomplete="off">
                                        </div>
                                    </div>
                                   
                                    
                                </div>
                                <div class="row">

                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <select id="service_area" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                                                <option selected disabled>Select Service Area</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <select id="business_category" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                                                <option selected disabled>Select Business Category</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <select id="shop_type" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                                                <option selected disabled>Select Shop Type</option>
                                            </select>
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    </div>
                                    
                                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-address" role="tab" aria-controls="pills-address" aria-selected="false">Next</a>

							</div>
							<div class="tab-pane fade" id="pills-address" 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">City</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="city" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <select id="municipalityDropdown" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                                                <option selected disabled>Select Municipality</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">Landmark</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="landmark" 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">Latitude</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="latitude" 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">Longitude</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="longitude" 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">Website</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="website_url" 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">Facebook</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="facebook" 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">YouTube</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="youtube" 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">TikTok</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="tiktok" 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">Instagram</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="instagram" autocomplete="off">
                                        </div>
                                    </div>
                                    
                                </div>
							</div>
							<div class="tab-pane fade" id="pills-operation" role="tabpanel" aria-labelledby="pills-contact-tab">
								<!-- <p class="mb-0">Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu
									veniam. Eiusmod
									minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse
									irure officia elit do ipsum ullamco Lorem.consequat non.</p> -->
							</div>
							<div class="tab-pane fade" id="pills-post" role="tabpanel" aria-labelledby="pills-contact-tab">

								<meta charset="UTF-8">
                                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                <title>CKEditor Example</title>
                                <style>
                                    body {
                                        font-family: Arial, sans-serif;
                                        margin: 20px;
                                    }
                                    h1 {
                                        margin-bottom: 20px;
                                    }
                                    textarea {
                                        display: none; /* Hide the original textarea */
                                    }
                                    button {
                                        margin-top: 20px;
                                    }
                                </style>

            
                                <textarea name="editor" id="editor" rows="10" cols="80">This is a sample text. You can edit me!</textarea>

                                <button id="getContent">Get Content as JSON</button>

                                <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
                                <script>
                                    // Initialize CKEditor
                                    CKEDITOR.replace('editor', {
                                        height: 300,
                                        toolbar: [
                                            { name: 'document', items: ['Source', '-', 'Save', 'NewPage', 'Preview'] },
                                            { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'Undo', 'Redo'] },
                                            { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                                            { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike'] },
                                            { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] }
                                        ]
                                    });

                                    // Button click event to get content as JSON
                                    document.getElementById('getContent').addEventListener('click', function() {
                                        const editorContent = CKEDITOR.instances.editor.getData();
                                        const jsonResponse = JSON.stringify({ content: editorContent });
                                        console.log(jsonResponse); // Log the JSON response
                                        alert('Content as JSON:\n' + jsonResponse); // Alert the user with the JSON
                                    });
                                </script>

							</div>
							<div class="tab-pane fade" id="pills-file" role="tabpanel" aria-labelledby="pills-contact-tab">
                                <div class="row">

                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="business_logo">
                                                <label class="custom-file-label" for="business_logo">Choose Logo</label>
                                            </div>
                                            <div class="input-group-append">
                                                <span class="input-group-text">Upload</span>
                                            </div>
                                        </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="shop_cover_photo">
                                                <label class="custom-file-label" for="shop_cover_photo">Choose Cover Photo</label>
                                            </div>
                                            <div class="input-group-append">
                                                <span class="input-group-text">Upload</span>
                                            </div>
                                        </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="thumbnail">
                                                <label class="custom-file-label" for="thumbnail">Choose Thumbnail</label>
                                            </div>
                                            <div class="input-group-append">
                                                <span class="input-group-text">Upload</span>
                                            </div>
                                        </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">YouTube AD</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="youtube_ad">
                                        </div>
                                    </div>
                                    
                                    
                                    
                                    
                                </div>
                                <button class="btn  btn-primary btn-sm" id="add_store_btn">Save Store</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>
    // Function to fetch municipalities and populate the dropdown
    function loadServiceArea() {
        fetch('/get_service_area')
            .then(response => response.json())
            .then(data => {
                const select = document.getElementById('service_area');
                data.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.ID;  // Use ID as the value
                    option.textContent = item.NAME;  // Display service area name
                    select.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching service area:', error));
    }

    // Call the function when the page loads
    document.addEventListener('DOMContentLoaded', loadServiceArea);
</script>
<script>
    // Function to fetch municipalities and populate the dropdown
    function loadBusinessCategory() {
        fetch('/get_business_category')
            .then(response => response.json())
            .then(data => {
                const select = document.getElementById('business_category');
                data.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.ID;  // Use ID as the value
                    option.textContent = item.NAME;  // Display Municipality name
                    select.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching Business Category:', error));
    }

    // Call the function when the page loads
    document.addEventListener('DOMContentLoaded', loadBusinessCategory);
</script>
<script>
    // Function to fetch municipalities and populate the dropdown
    function loadShopType() {
        fetch('/get_shop_type')
            .then(response => response.json())
            .then(data => {
                const select = document.getElementById('shop_type');
                data.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.ID;  // Use ID as the value
                    option.textContent = item.NAME;  
                    select.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching Shop Type:', error));
    }

    // Call the function when the page loads
    document.addEventListener('DOMContentLoaded', loadShopType);
</script>

<script>
    // Function to fetch municipalities and populate the dropdown
    function loadMunicipalities() {
        fetch('/get_municipalities')
            .then(response => response.json())
            .then(data => {
                const select = document.getElementById('municipalityDropdown');
                data.forEach(item => {
                    const option = document.createElement('option');
                    option.value = item.ID;  // Use ID as the value
                    option.textContent = item.MUNCIPALITY;  // Display Municipality name
                    select.appendChild(option);
                });
            })
            .catch(error => console.error('Error fetching municipalities:', error));
    }

    // Call the function when the page loads
    document.addEventListener('DOMContentLoaded', loadMunicipalities);
</script>
<script>
    document.getElementById('add_store_btn').addEventListener('click', function() {
        
    
        // Create a FormData object
        const formData = new FormData();

        // Append input field values
        formData.append('shop_name', document.getElementById('shop_name').value);
        formData.append('display_name', document.getElementById('display_name').value);
        formData.append('pan_number', document.getElementById('pan_number').value);
        formData.append('owner_name', document.getElementById('owner_name').value);
        formData.append('shop_description', document.getElementById('shop_description').value);
        formData.append('contact_person_name', document.getElementById('contact_person_name').value);
        formData.append('contact_person_mobile', document.getElementById('contact_person_mobile').value);
        formData.append('contact_email', document.getElementById('contact_email').value);
        formData.append('phone_number', document.getElementById('phone_number').value);
        formData.append('mobile_number', document.getElementById('mobile_number').value);
        formData.append('whatsapp_number', document.getElementById('Whatsapp_number').value);
        formData.append('established_date', document.getElementById('established_date').value);
        formData.append('brands', document.getElementById('brands').value);
        formData.append('service_area', document.getElementById('service_area').value);
        formData.append('business_category', document.getElementById('business_category').value);
        formData.append('shop_type', document.getElementById('shop_type').value);
        formData.append('city', document.getElementById('city').value);
        formData.append('municipality', document.getElementById('municipalityDropdown').value);
        formData.append('landmark', document.getElementById('landmark').value);
        formData.append('latitude', document.getElementById('latitude').value);
        formData.append('longitude', document.getElementById('longitude').value);
        formData.append('website_url', document.getElementById('website_url').value);
        formData.append('facebook', document.getElementById('facebook').value);
        formData.append('youtube', document.getElementById('youtube').value);
        formData.append('tiktok', document.getElementById('tiktok').value);
        formData.append('instagram', document.getElementById('instagram').value);
        formData.append('youtube_ad', document.getElementById('youtube_ad').value);

        // Append files
        formData.append('business_logo', document.getElementById('business_logo').files[0]);
        formData.append('shop_cover_photo', document.getElementById('shop_cover_photo').files[0]);
        formData.append('thumbnail', document.getElementById('thumbnail').files[0]);
        

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

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


{% endblock %}