<?php

include('nav.php');
include('response.php');

?>

<div style=""   class="hp-main-layout-content">
                <div class="row mb-32 gy-32">
                <div class="col-12">
                    
					
                </div>

				
            <div class="col-lg-12">

			<div style="padding-left:10px" class="page-header-modern">
            <h2 class="header-modern">Customer List</h2>

    <div class="user-dropdown dropdown">
        <button class="btn btn-user" type="button" data-toggle="dropdown">
            <i class=""></i>
             <img src="images/icon/invoice360-user.png" height=30px; width=30px;>
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu user-menu" aria-labelledby="userDropdown">
            <li>
                <a class="dropdown-item" href="">
                    <i class="fa fa-user me-2"></i> <?php echo strtok($_SESSION['user_name'], ' ');?> (<?php echo $_SESSION['role']; ?>)
                </a>
            </li>

            <li>
                <a class="dropdown-item" href="Admin/payment-details.php">
                    <i class="fa fa-credit-card"></i> Billing history
                </a>
            </li>

            <li>
                <a class="dropdown-item" href="Admin/company-profile.php">
                    <i class="fa fa-cog me-2"></i> Settings
                </a>
            </li>

            <li><hr class="dropdown-divider"></li>

            <li>
                <a class="dropdown-item text-danger" href="logout.php">
                    <i class="fa fa-sign-out me-2"></i> Sign Out
                </a>
            </li>
        </ul>
        </div>
    </div>
    </div>

     <div class="content-body">
        <div class="container-fluid">
                <div class="card">
                    
                            
                        <div class="card-body">
		<!-- <hr> -->

		<div id="response" class="alert alert-success" style="display:none;">
			<a href="#" class="close" data-dismiss="alert">&times;</a>
			<div class="message"></div>
		</div>
                        <form method="post" id="create_customer">
	<input type="hidden" name="action" value="create_customer">
			
			
			<div class="row">

    <!-- LEFT: CUSTOMER INFORMATION -->
    <div style="margin-top: 25px;" class="col-xl-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <h4>
                    <i class="fa fa-user text-primary"></i> 
                    Customer Information

               
                </h4>

				
                
				
            </div>

            <div class="panel-body form-group">
                <div class="row">

                    <div class="col-xs-6">
                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom copy-input required" name="customer_name" id="customer_name" placeholder="Customer Name" tabindex="1">
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom copy-input required" name="customer_address_1" id="customer_address_1" placeholder="Address Line 1" tabindex="3">
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom copy-input required" name="customer_town" id="customer_town" placeholder="Town / City" tabindex="5">
                        </div>

                        <div class="form-group no-margin-bottom">
                            <input type="text" class="form-control copy-input" name="customer_postcode" id="customer_postcode" placeholder="Postcode" tabindex="7">
                        </div>
                    </div>

                    <div class="col-xs-6">

                        <div class="form-group">
                            <div class="input-group margin-bottom">
                                <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                                <input type="email" class="form-control copy-input" name="customer_email" id="customer_email" placeholder="Email Address" tabindex="2">
                            </div>
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom copy-input" name="customer_address_2" id="customer_address_2" placeholder="Address Line 2" tabindex="4">
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom copy-input" name="customer_county" id="customer_county" placeholder="Country" tabindex="6">
                        </div>

                        <div class="form-group no-margin-bottom">
                            <input type="text" class="form-control" name="customer_phone" id="customer_phone" placeholder="Phone Number" tabindex="8">
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- RIGHT: SHIPPING INFORMATION -->
    <div style="margin-top: 25px;"  class="col-xl-6">
        <div class="panel panel-default">
            <div class="panel-body">
                <h4>
                    <i class="fa fa-truck text-primary"></i> 
                    Shipping Information
                </h4>
            </div>

            <div class="panel-body form-group">
                <div class="row">

                    <div class="col-xs-6">

                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom required" name="customer_name_ship" id="customer_name_ship" placeholder="Recipient Name" tabindex="9">
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom" name="customer_address_2_ship" id="customer_address_2_ship" placeholder="Address Line 2" tabindex="11">
                        </div>

                        <div class="form-group no-margin-bottom">
                            <input type="text" class="form-control" name="customer_county_ship" id="customer_county_ship" placeholder="Country" tabindex="13">
                        </div>

                    </div>

                    <div class="col-xs-6">

                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom required" name="customer_address_1_ship" id="customer_address_1_ship" placeholder="Address Line 1" tabindex="10">
                        </div>

                        <div class="form-group">
                            <input type="text" class="form-control margin-bottom" name="customer_town_ship" id="customer_town_ship" placeholder="Town / City" tabindex="12">
                        </div>

                        <div class="form-group no-margin-bottom">
                            <input type="text" class="form-control" name="customer_postcode_ship" id="customer_postcode_ship" placeholder="Postcode" tabindex="14">
                        </div>

                    </div>

                </div>
            </div>

        </div>
    </div>

</div>
			
	




                          
							<div class="col-xs-12 margin-top btn-group">
			<input type="submit" id="action_create_customer" class="btn btn-primary float-right" value="Create Customer" data-loading-text="Creating...">
		</div>  
							
						</div>




                                    
                                   
                                </div>



								<div>
				

			</div>		

</div>
</div>
</div>
</div>
</div>
</div>

</div>


                
							
					

					

			
		</form>
		<div style="height: 1000px"></div>

		<div id="insert" class="modal fade">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">Select Product</h4>
		      </div>
		      <div class="modal-body">
				<?php popProductsList(); ?>
		      </div>
		      <div class="modal-footer">
		        <button type="button" data-dismiss="modal" class="btn btn-primary" id="selected">Add</button>
				<button type="button" data-dismiss="modal" class="btn">Cancel</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->

		<div id="insert_customer" class="modal fade">
		  <div class="modal-dialog">
		    <div class="modal-content">
		      <div class="modal-header">
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		        <h4 class="modal-title">Select An Existing Customer</h4>
		      </div>
		      <div class="modal-body">
				<?php popCustomersList(); ?>
		      </div>
		      <div class="modal-footer">
				<button type="button" data-dismiss="modal" class="btn">Cancel</button>
		      </div>
		    </div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</div><!-- /.modal -->






             

 <!-- Plugin -->
 
    
    <script src="app-assets/js/plugin/swiper-bundle.min.js"></script>
    <script src="app-assets/js/plugin/jquery.mask.min.js"></script>
    <script src="app-assets/js/plugin/autocomplete.min.js"></script>
    <script src="app-assets/js/plugin/moment.min.js"></script>

    <!-- Layouts -->
    <script src="app-assets/js/layouts/header-search.js"></script>
    <script src="app-assets/js/layouts/sider.js"></script>
    <script src="app-assets/js/components/input-number.js"></script>

    <!-- Base -->
    <script src="app-assets/js/base/index.js"></script>
    <!-- Customizer -->
    <script src="app-assets/js/customizer.js"></script>

    <!-- Charts -->
    <script src="app-assets/js/plugin/apexcharts.min.js"></script>
    <script src="app-assets/js/charts/apex-chart.js"></script>

    <!-- Cards -->
    <script src="app-assets/js/cards/card-advance.js"></script>
    <script src="app-assets/js/cards/card-analytic.js"></script>
    <script src="app-assets/js/cards/card-statistic.js"></script>

    <!-- Pages -->
    <script src="app-assets/js/pages/dashboard-ecommerce.js"></script>

    <!-- Custom -->
    <script src="assets/js/main.js"></script>  
	
	
	<script> 
	const textarea = document.getElementById('auto-resize-textarea');

textarea.addEventListener('input', () => {
  textarea.style.height = 'auto'; // Reset height to recalculate
  textarea.style.height = textarea.scrollHeight + 'px'; // Set height based on scrollHeight
});

// Optional: Initial resize if content is pre-filled
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
</script> 
</body>


</html>