<?php if ( ! defined( 'ABSPATH' ) ) {
exit;} ?>
	 

		<div class="bg-dark bg-opacity-25 elex-multi-vendor-for-woocommerce-popup row justify-content-end w-100 mt-4"
			id="elex-multi-vendor-for-woocommerce-add-vendor">
			<div class="toast p-2 position-fixed top-1 start-50 translate-middle-x bg-white" id="elex_add_vendor_admin_toast" style="z-index:999999" >
			<div class="toast-header border-0 ">
				<strong class="flex-fill text-center">
					<svg xmlns="http://www.w3.org/2000/svg" width="22.415" height="22.026" viewBox="0 0 22.415 22.026" class="me-2 elex-toast-icon-success">
						<g id="Icon_feather-check-circle" data-name="Icon feather-check-circle" transform="translate(-1.998 -1.979)">
							<path id="Path_646" data-name="Path 646" d="M23,12.076V13a10,10,0,1,1-5.93-9.139" fill="none" stroke="#28a745" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
							<path id="Path_647" data-name="Path 647" d="M26.5,6l-10,10.009-3-3" transform="translate(-3.5 -1.003)" fill="none" stroke="#28a745" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
						</g>
					</svg>
					<svg xmlns="http://www.w3.org/2000/svg" width="22.415" height="22.026" viewBox="0 0 22.415 22.026" class="me-2 elex-toast-icon-error d-none">
						<g id="Icon_feather-x-circle" data-name="Icon feather-x-circle" transform="translate(-1.998 -1.979)">
							<circle cx="13" cy="13" r="10" fill="none" stroke="#dc3545" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
							<line x1="10" y1="10" x2="16" y2="16" stroke="#dc3545" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
							<line x1="16" y1="10" x2="10" y2="16" stroke="#dc3545" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
						</g>
					</svg>
					<span class="elex_add_vendor_admin_toast_msg_text" > Updated Successfully </span></strong>
				<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
			</div>
			</div>
			<div class="col-lg-8 col-md-9 bg-white h-100 ms-auto overflow-auto">
				<div class="px-4">
					<div class="py-2 pb-5 px-5 text-center position-relative mt-4">
					<button class="elex-multi-vendor-for-woocommerce-add-product-form-prev-btn ms-2 mt-6 btn btn-sm rounded-pill btn-outline-primary position-absolute top-0 start-0"><i class="fa-solid fa-chevron-left me-1"></i> back</button>

						<div class="fs-5 my-1">Add New Vendor</div>
						<button class="btn rounded-circle position-absolute top-0 end-0 elex-multi-vendor-for-woocommerce-close-vendor-btn" type="button">
						<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 384 512"><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>
					</button>
					</div>
					<div class=" bg-opacity-10 px-md-5 px-2 pb-5 py-1">

						<div class="position-relative ">
							<div class="progress progress-vendor" style="height: 3px;">
								<div class="progress-bar bg-primary progress-bar-active" role="progressbar"
									aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
								<div class="progress-bar bg-secondary progress-bar-inactive" role="progressbar"
									aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
							</div>

							<ul class="nav nav-tabs border-0 justify-content-between elex-multi-vendor-for-woocommerce-add-vendor-tabs" role="tablist">
								<li class="nav-item active" id="elex-multi-vendor-for-woocommerce-add-vendor-1">
									<button type="button" id="elex-multi-vendor-for-woocommerce-add-vendor-store-details-tab" data-bs-toggle="tab"
										data-bs-target="#elex-multi-vendor-for-woocommerce-add-vendor-store-details" type="button" role="tab"
										aria-controls="elex-multi-vendor-for-woocommerce-add-vendor-store-details" aria-selected="true"
										data-step="0"
										class="position-absolute top-0 start-0 translate-middle btn btn-sm   rounded-circle p-1">
										<div class=" p-3 rounded-circle"></div>
									</button>
									<div class="fs-6 position-absolute top-100 start-0 translate-middle-x mt-4 fw-bold">
										Store Details</div>
								</li>

								<li class="nav-item" id="elex-multi-vendor-for-woocommerce-add-vendor-2">
									<button type="button" id="elex-multi-vendor-for-woocommerce-add-vendor-store-address-tab" data-bs-toggle="tab"
										data-bs-target="#elex-multi-vendor-for-woocommerce-add-vendor-store-address" type="button" role="tab"
										aria-controls="elex-multi-vendor-for-woocommerce-add-vendor-store-address" aria-selected="false"
										data-step="1"
										class="position-absolute top-0 start-50 translate-middle btn btn-sm bg-white rounded-circle p-1">
										<div class=" p-3 rounded-circle"></div>
									</button>
									<div class="fs-6  position-absolute top-100 start-50 translate-middle-x mt-4  fw-bold">
										Store Address</div>
								</li>


								<li class="nav-item" id="elex-multi-vendor-for-woocommerce-add-vendor-3">
									<button type="button" id="elex-multi-vendor-for-woocommerce-add-ac-ship-tab" data-bs-toggle="tab"
										data-bs-target="#elex-multi-vendor-for-woocommerce-add-ac-ship" type="button" role="tab" data-step="2"
										aria-controls="elex-multi-vendor-for-woocommerce-add-ac-ship" aria-selected="false"
										class="position-absolute top-0 start-100 translate-middle btn btn-sm bg-white rounded-circle p-1">
										<div class=" p-3 rounded-circle"></div>
									</button>
									<div class="fs-6 position-absolute top-100 start-100 translate-middle-x mt-4  fw-bold text-nowrap">
										Payment & Commission</div>
								</li>


							</ul>

						</div>

					</div>

					<?php $site_settings = get_option( 'elex_mv_admin_installation_params', false ); ?>
					<form action="" id="vendor-add-details-form">
					<div class="tab-content">
						<!-- store details -->

						<div class="tab-pane fade show active" id="elex-multi-vendor-for-woocommerce-add-vendor-store-details" role="tabpanel"
							aria-labelledby="elex-multi-vendor-for-woocommerce-add-vendor-store-details-tab">
							<div class="px-md-5 px-2 py-5">
								
								<div class=" form-group mb-3">
								<div class="fs-6 mb-1 fw-semi-bold">Vendor Image</div>
								<div class="d-flex align-items-center gap-4">
								<div class="shadow-sm rounded-3 overflow-hidden">
									<img id="elexPreviewImageVendorUpload" src="<?php echo esc_url( ELEX_MULTI_VENDOR_MAIN_URL_PATH . 'assets/images/default-store-icon.svg' ); ?>" alt="" width="100px">
								</div>
									<div class="position-relative">
										<button class="btn fw-bold text-info" id="elex-multi-vendor-for-woocommerce-upload-image-vendor-btn">Upload</button>
										<input type="file" id="elex-multi-vendor-for-woocommerce-vendor-filetag" name="elex-multi-vendor-for-woocommerce-vendor-filetag" class="opacity-0 position-absolute w-100 h-100 top-0 start-0">
									</div>

								</div>
								<div  class="elex-multi-vendor-for-woocommerce-prod-img-name-div-ven d-none" >
									<div class = "d-flex gap-2 align-items-center" >
										<div class="elex-multi-vendor-for-woocommerce-prod-img-name-ven"></div>
										<button type="button" class=" btn btn-sm rounded-circle p-1 elex-multi-vendor-for-woocommerce-product-form-remove-image-ven" ><svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/></svg>
										</button>
									</div>
								
								</div>

								</div>
								<?php wp_nonce_field( 'elex_mv_manage_vendors_nonce', 'nonce' ); ?>
								<input type="text" hidden name="add_vendor_page" value="true" >

								<div class="form-group mb-3">
									<div class="fs-6 mb-1 fw-semi-bold">Vendor Name <span class="text-danger">*</span></div>
									<input type="text" placeholder="Enter Your User Name" class="form-control border-2 border-secondary" name="user_name" id="elex_multivendor_vendor_user_name" >
									<div id="elex_multivendor_vendor_user_name_error"></div>
								</div>

								<div class="form-group mb-3">
									<div class="fs-6 mb-1 fw-semi-bold">Store Name <span class="text-danger">*</span></div>
									<input type="text" placeholder="Enter Your Unique Store Name" class="form-control border-2 border-secondary"  name="store_name" id="elex_multivendor_vendor_store_name">
									<div id="elex_multivendor_vendor_store_name_error"></div>

								</div>
								<div class="form-group mb-3">
									<div class="fs-6 mb-1 fw-semi-bold">Email Id <span class="text-danger">*</span></div>
									<input type="text" placeholder="Enter Your User Email Id" class="form-control border-2 border-secondary" name="email_id" type="email" id="elex_multivendor_vendor_email">
									<div id="elex_multivendor_vendor_email_error"></div>

								</div>
								<div class="form-group mb-3">
									<div class="fs-6 mb-1 fw-semi-bold">Phone Number <small class="text-secondary fw-normal"></small></div>
									<input type="hidden" class="form-control border-2 border-secondary" name="dail_code" id="elex_multivendor_vendor_dial_code">
									<input type="hidden" class="form-control border-2 border-secondary" name="country_iso" id="elex_multivendor_vendor_country_iso">
									<input type="text" placeholder="Enter Your User Phone Number" class="form-control border-2 border-secondary" name="phone_number" id="elex_multivendor_vendor_phone_number">
									<div id="elex_multivendor_vendor_phone_number_error"></div>

								</div>
								<div class="d-flex gap-2">
									<button
										class="btn btn-outline-secondary w-100 elex-multi-vendor-for-woocommerce-close-vendor-btn" type="button">Cancel</button>
									<button
										class="btn btn-primary w-100 elex-multi-vendor-for-woocommerce-add-vendor-form-next-btn" type="button" data-button-id="1">Next</button>
								</div>

							</div>
						</div>

						<!-- store address -->
						<div class="tab-pane fade" id="elex-multi-vendor-for-woocommerce-add-vendor-store-address" role="tabpanel"
							aria-labelledby="elex-multi-vendor-for-woocommerce-add-vendor-store-address-tab">
							<div class="px-md-5 px-2 py-3">
								<div class=" mb-3">
								<div class="fs-6 mb-1 fw-semi-bold">Store Address 1</div>
									<input type="text" placeholder="Enter Store Address" class="form-control border-2 border-secondary" name="store_full_addr1" id="elex_multivendor_vendor_store_full_addr1">
									<div id="elex_multivendor_vendor_store_full_addr1_error"></div>

									<div class="fs-6 mb-1 fw-semi-bold">Store Address 2</div>
									<input type="text" placeholder="Enter Store Address" class="form-control border-2 border-secondary" name="store_full_addr2" id="elex_multivendor_vendor_store_full_addr2">
									<div id="elex_multivendor_vendor_store_full_addr2_error"></div>
								</div>
								<div class="form-group mb-3">
								
								<div class="form-group mb-3">
									<div class="fs-6 mb-1 fw-semi-bold">Country</div>
										<select autocomplete="false" name="country" class="form-control border-2 border-secondary mw-100" id="elex_multivendor_vendor_country" >
										<option value="">--Select Store Country-- </option>

										<?php 
											$wc_countries = new \WC_Countries();
											$countries    = $wc_countries->get_countries();
										foreach ( $countries  as $country_code => $country_name ) :
											?>
										<option value="<?php echo esc_html( $country_code, 'elex-multi-vendor-for-woocommerce' ); ?>"><?php echo esc_html( $country_name, 'elex-multi-vendor-for-woocommerce' ); ?></option>
										<?php endforeach ; ?>
										</select>
									<div id="elex_multivendor_vendor_country_error"></div>

								</div>
								<div class="form-group mb-3 elex_multivendor_vendor_state_class">
									<div class="fs-6 mb-1 fw-semi-bold">State / County</div>
									<select type="text" placeholder="Enter Store State" class="form-control border-2 border-secondary" name="state" id="elex_multivendor_vendor_state"></select>
									<div id="elex_multivendor_vendor_state_error"></div>

								</div>

								<div class="fs-6 mb-1 fw-semi-bold">City</div>
									<input type="text" placeholder="Enter Store City" class="form-control border-2 border-secondary" name="city" id="elex_multivendor_vendor_city">
									<div id="elex_multivendor_vendor_city_error"></div>

								</div>
								<div class="form-group mb-3">
									<div class="fs-6 mb-1 fw-semi-bold">Postcode / Zip</div>
									<input type="text" placeholder="Enter Store Postal Code" class="form-control border-2 border-secondary" name="postal_code" id="elex_multivendor_vendor_postal_code">
									<div id="elex_multivendor_vendor_postal_code_error"></div>

								</div>
							

								<div class="d-flex gap-2">
									<button
										class="btn btn-outline-secondary w-100 elex-multi-vendor-for-woocommerce-close-vendor-btn" type="button">Cancel</button>
									<button
										class="btn btn-primary w-100 elex-multi-vendor-for-woocommerce-add-vendor-form-next-btn" type="button" data-button-id="2">Next</button>
								</div>
							</div>
						</div>

						<!-- payment settlement -->
						<div class="tab-pane fade" id="elex-multi-vendor-for-woocommerce-add-ac-ship" role="tabpanel"
							aria-labelledby="elex-multi-vendor-for-woocommerce-add-ac-ship-tab">
							<div class="px-md-5 px-2 py-3">
								<div class="row justify-content-center">
									<div class="col-lg-10">
										<!-- paypal -->
										<div class="mb-3">
											<!-- please add your paypal account to preform transiction -->
											<div class="mb-3">
												<div class="fs-6 mb-1 fw-semi-bold">Please add your paypal account to perform transiction</div>
												<img src="<?php echo esc_url( ELEX_MULTI_VENDOR_MAIN_URL_PATH . 'assets/icons/paypal-card.png' ); ?>" alt="" class="w-100">
											</div>

											<!-- paypal email id -->
											<div class="mb-3">
												<div class="fs-6 mb-1 fw-semi-bold">PayPal Email Id (Optional)</div>
												<input type="text" class="form-control"
													placeholder="Enter Your PayPal Email Id(Optional)" name="paypal_email" id="elex_multivendor_paypal_email">
												<div id="elex_multivendor_paypal_email_error"></div>
												<br>
												<div class="fs-6 mb-1 fw-semi-bold">Vendor Commission</div>
												<input type="text" placeholder="Enter Commission Amount" class="form-control border-2 border-secondary" name="commission_amount" id="elex_multivendor_vendor_store_commission" value="">
												<div id="elex_multivendor_vendor_store_commission_error"></div>	

											</div>
											<input type="text" hidden class="form-control border-2 border-secondary" name="bypass_validation" value="true" >
											<input type="text" hidden class="form-control border-2 border-secondary" name="add_vendor" value="" >

											<button class="btn btn-primary w-100 elex-multi-vendor-for-woocommerce-add-vendor-form-next-btn" type="button" data-button-id="3">Submit</button>
										</div>



										<!-- your paypal account -->
										<div class="d-none">
											<div class="fs-6 mb-1 fw-semi-bold">your paypal account</div>
											<div class="border border-primary rounded-3 mb-3 p-2">
												<div class="border-0 border-bottom ">
													<div class="d-flex gap-1 align-items-center mb-3">
														<div class="text-secondary">
															username:
														</div>
														<div class="fs-6 fw-semi-bold mb-0">jose gilbert</div>
													</div>
													<div class="d-flex gap-1 align-items-center mb-3">
														<div class="text-secondary">
															email id:
														</div>
														<div class="fs-6 fw-semi-bold mb-0">mathew.foster@gmail.com</div>
													</div>
												</div>

												<button class="btn btn-sm px-4 btn-primary mt-2">disconnect</button>
											</div>
											<button class="btn w-100 px-4 btn-primary mt-2">save changes</button>
										</div>
									</div>
								</div>



							</div>
						</div>


					</div>

					</form>
				   
				</div>


			</div>
		</div>

	
