{% 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: 2000; /* 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: 0% auto; /* 15% from the top and centered */
	  padding: 20px;
	  border: 1px solid #888;
	  width: 90%; /* 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>
     <style>
        .custom-modal {
    max-width: 90%;  /* Adjust the width as needed */
}
     </style>
     <!-- <style>
        /* Force modal to the top */
        .custom-modal-top {
            margin: 0 auto;
            position: fixed;
            top: 5%; /* Adjust as needed */
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
        }
    
        /* Ensure modal backdrop covers entire screen */
        .modal-backdrop {
            height: 100vh;
        }
   
    </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>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-11">
                <!-- Add Item Button -->
                <button type="button" class="btn btn-primary btn-sm" id="add_item">Add Item</button>

                <!-- Modal -->
                <div class="col-md-12">
                    <div id="exampleModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered custom-modal" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="exampleModalCenterTitle">Item Information</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                </div>
                                <div class="modal-body">
                                    
                                    <div class="row">
                                        <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="item_name">Item Name</label>
                                            <input type="text" class="form-control" placeholder="" id="item_name">
                                        </div>
                                        </div>
                                        <!--  col-md-6   -->
                                
                                        <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="short_name">Alias</label>
                                            <input type="text" class="form-control" placeholder="" id="short_name">
                                        </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="print_name">Print Name</label>
                                                <input type="text" class="form-control" placeholder="" id="print_name">
                                            </div>
                                            </div>
                                            <!--  col-md-6   -->
                                    
                                            <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="group_name">Group Name</label>
                                                <input type="text" class="form-control" placeholder="" id="group_name">
                                            </div>
                                            </div>
                                        <!--  col-md-6   -->
                                    </div>
                                
                                
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="main_unit">Main Unit</label>
                                                <input type="text" class="form-control" placeholder="" id="main_unit">
                                            </div>
                                        </div>
                                        <!--  col-md-6   -->
                                
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="opening_stock_qty">Opening Stock(Qty)</label>
                                                <input type="text" class="form-control" id="opening_stock_qty" placeholder="">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="opening_stock_value">Opening Stock(Value)</label>
                                                <input type="text" class="form-control" id="opening_stock_value" placeholder="">
                                            </div>
                                        </div>
                                        <!--  col-md-6   -->
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="alternate_unit">Alternate Unit</label>
                                                <input type="text" class="form-control" placeholder="" id="alternate_unit">
                                            </div>
                                        </div>
                                        <!--  col-md-6   -->
                                
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="conversion_factor">Conversion Factor</label>
                                                <input type="text" class="form-control" id="conversion_factor" placeholder="">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="conversion_type">Conversion Type</label>
                                                <input type="text" class="form-control" id="conversion_type" placeholder="">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="alternate_opening_stock_qty">Alternate Opening Stock(Qty)</label>
                                                <input type="text" class="form-control" id="alternate_opening_stock_qty" placeholder="">
                                            </div>
                                        </div>
                                        <!--  col-md-6   -->
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="sales_price_applied_on">Sales Price Applied On</label>
                                                <select class="form-control" id="sales_price_applied_on">
                                                    <option value="main_unit">Main Unit</option>
                                                    <option value="alternate_unit">Alternate Unit</option>
                                                </select>
                                            </div>
                                        </div>
                                        <!--  col-md-6   -->
                                
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="sales_price">Sales Price</label>
                                                <input type="text" class="form-control" id="sales_price" placeholder="">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="purchase_price">Purchase Price</label>
                                                <input type="text" class="form-control" id="purchase_price" placeholder="">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="mrp">M.R.P</label>
                                                <input type="text" class="form-control" id="mrp" placeholder="">
                                            </div>
                                        </div>
                                        <!--  col-md-6   -->
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="minimum_sales_price">Minimun Sales Price</label>
                                                <input type="text" class="form-control" id="minimum_sales_price" placeholder="">
                                            </div>
                                        </div>
                                        <!--  col-md-6   -->
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="sales_valuation_price">Self Valuation Price</label>
                                                <input type="text" class="form-control" id="sales_valuation_price" placeholder="">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="form-group">
                                                <label for="tax_type_select">Tax Type</label>
                                                <select class="form-control" id="tax_type_select">
                                                    <option value="tax_vat_13_percent">VAT 13%</option>
                                                    <option value="tax_exempt">Exempt</option>
                                                    <option value="tax_services">Services</option>
                                                    <option value="tax_other">Other</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
  
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn  btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="button" class="btn  btn-primary" id="item_master_create">Save changes</button>
                                </div>
                            </div>
                        </div>
                    </div>
                
                </div>

				<div class="card">
                    <div  style="height: 250px; overflow: auto;">
                        <table id="recent_voucher">
                            <thead>
                            <tr>
                                <th>SN</th>
                                <th>Doc Name</th>
                                <th>Doc Code</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>001</td>
                                    <td>001</td>
                                    <td>001</td>
                                </tr>
                                <tr>
                                    <td>001</td>
                                    <td>001</td>
                                    <td>001</td>
                                </tr>
                                <tr>
                                    <td>001</td>
                                    <td>001</td>
                                    <td>001</td>
                                </tr>
                                <tr>
                                    <td>001</td>
                                    <td>001</td>
                                    <td>001</td>
                                </tr>
                                <tr>
                                    <td>001</td>
                                    <td>001</td>
                                    <td>001</td>
                                </tr>
                            </tbody>
                            
                        </table>
                    </div>
				</div>
			</div>
            <div class="col-sm-1.5">

				<div class="card">
                    Short Cut
                    <div type="submit">Sales </div>
                    <div type="submit">Item </div>
                    <div type="submit">Customer </div>
sd  
				</div>
			</div>
			<script>
				document.getElementById('infoForm').addEventListener('submit', async function (event) {
    event.preventDefault();

    const parkingId = document.getElementById('parking_id').value;
    const token = localStorage.getItem('token'); // Replace with your method to get JWT

    try {
        const response = await axios.post('/parking_info', { parking_id: parkingId }, {
            headers: {
                'Authorization': Bearer ${token}
            }
        });

        // Display parking information
        const infoDisplay = document.getElementById('infoDisplay');
        infoDisplay.innerHTML = `
            ID: ${response.data.Park_Info.id}<br>
            Type: ${response.data.Park_Info.type}<br>
            Motorist: ${response.data.Park_Info.motorist}<br>
            Vehicle Plate No: ${response.data.Park_Info.Vehicle_plate_no}<br>
            Park In Time: ${response.data.Park_Info.park_in_time}
        `;
        document.getElementById('parkingInfo').style.display = 'block';

        // Set up Park Out button
        document.getElementById('parkOutBtn').onclick = async function () {
            await parkOut(parkingId);
        };
    } catch (error) {
        if (error.response) {
            document.getElementById('message').innerText = error.response.data.msg;
        } else {
            document.getElementById('message').innerText = "Network error";
        }
    }
});

async function parkOut(parkingId) {
    const token = localStorage.getItem('token'); // Replace with your method to get JWT

    try {
        const response = await axios.post('/park_out', { parking_id: parkingId }, {
            headers: {
                'Authorization': Bearer ${token}
            }
        });
        document.getElementById('message').innerText = response.data.msg;
    } catch (error) {
        if (error.response) {
            document.getElementById('message').innerText = error.response.data.msg;
        } else {
            document.getElementById('message').innerText = "Network error";
        }
    }
}

			</script>
			<!-- [ 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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function(){
        $("#add_item").click(function(){
            $("#exampleModalCenter").modal("show");
        });
    });
</script>
<script>
    document.getElementById('item_master_create').addEventListener('click', function() {
        
    
        // Create a FormData object
        const formData = new FormData();

        // Append input field values
        formData.append('item_name', document.getElementById('item_name').value);
        formData.append('short_name', document.getElementById('short_name').value);
        formData.append('print_name', document.getElementById('print_name').value);
        formData.append('group_name', document.getElementById('group_name').value);

        formData.append('main_unit', document.getElementById('main_unit').value);
        formData.append('opening_stock_qty', document.getElementById('opening_stock_qty').value);
        formData.append('opening_stock_value', document.getElementById('opening_stock_value').value);

        formData.append('alternate_unit', document.getElementById('alternate_unit').value);
        formData.append('conversion_factor', document.getElementById('conversion_factor').value);
        formData.append('conversion_type', document.getElementById('conversion_type').value);
        formData.append('alternate_opening_stock_qty', document.getElementById('alternate_opening_stock_qty').value);
        formData.append('sales_price_applied_on', document.getElementById('sales_price_applied_on').value);
        formData.append('sales_price', document.getElementById('sales_price').value);
        formData.append('purchase_price', document.getElementById('purchase_price').value);
        formData.append('mrp', document.getElementById('mrp').value);

        formData.append('minimum_sales_price', document.getElementById('minimum_sales_price').value);
        formData.append('sales_valuation_price', document.getElementById('sales_valuation_price').value);
        formData.append('tax_type_select', document.getElementById('tax_type_select').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('/item_master_data_insertion', formData, {
            headers: {
                'Authorization': `Bearer ${token}`,
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(response => {
            alert('Item Master Data submitted successfully');
            console.log(response.data);
        })
        .catch(error => {
            alert('Error submitting store data');
            console.error(error);
        });
    });
</script>

{% endblock %}