{% 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">Dealer 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">Dealer Name</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="dealer_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">Address</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="address" 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-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text" id="inputGroup-sizing-sm">Alloted Address</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Alloted Address" id="alloted_address" 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" id="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">Contact 1</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" placeholder="Contact 1" id="contact1" 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">Contact 2</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="contact2" 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">Remarks</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="remarks" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-sm mb-3">
                                            <select id="id_type" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
                                                <option selected disabled>Select ID Type</option>
                                                <option value="citizenship">Citizenship</option>
                                                <option value="driving_license">Driving License </option>
                                                <option value="national_id_card">National ID Card</option>
                                                <option value="pan_card">PAN Card</option>
                                                <option value="voter_card">Voter Card</option>
                                                <option value="adhar_card">Adhar Card</option>
                                                <option value="other">Other</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">ID No.</span>
                                            </div>
                                            <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm" id="id_number" autocomplete="off">
                                        </div>
                                    </div>
                                    
                                   
                                    
                                </div>
                                <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="id_image1">
                                                <label class="custom-file-label" for="id_image1">Choose ID Image 1</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="id_image2">
                                                <label class="custom-file-label" for="id_image2">Choose ID Image 2</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="profile_image">
                                                <label class="custom-file-label" for="profile_image">Choose Profile Image</label>
                                            </div>
                                            <div class="input-group-append">
                                                <span class="input-group-text">Upload</span>
                                            </div>
                                        </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>
                                
							</div>
						</div>
                        <button class="btn  btn-primary btn-sm" id="add_dealer_btn">Submit</button>
					</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 loadMunicipalities() {
        fetch('http://127.0.0.1:5000/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_dealer_btn').addEventListener('click', function() {
        
    
        // Create a FormData object
        const formData = new FormData();

         // Append text input fields to the FormData object
        formData.append('dealer_name', document.getElementById('dealer_name').value);
        formData.append('display_name', document.getElementById('display_name').value);
        formData.append('address', document.getElementById('address').value);
        formData.append('owner_name', document.getElementById('owner_name').value);
        formData.append('alloted_address', document.getElementById('alloted_address').value);
        formData.append('email', document.getElementById('email').value);
        formData.append('contact1', document.getElementById('contact1').value);
        formData.append('contact2', document.getElementById('contact2').value);
        formData.append('remarks', document.getElementById('remarks').value);
        formData.append('id_type', document.getElementById('id_type').value);
        formData.append('id_number', document.getElementById('id_number').value);

        // Append file input fields to the FormData object
        formData.append('id_image1', document.getElementById('id_image1').files[0]);
        formData.append('id_image2', document.getElementById('id_image2').files[0]);
        formData.append('profile_image', document.getElementById('profile_image').files[0]);
    
        

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

        // Send data using Axios
        axios.post('/dealer_data_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 %}