@extends('sellers.layout.mainlayout')
@section('content')

@php
use Carbon\Carbon;
@endphp
	
	<div class="main-wrapper innerpagebg">
	
		<!-- Header -->
		@include('sellers.layout.top_header')
		<!-- /Header -->
		
		<!-- Breadscrumb Section -->
		<div class="breadcrumb-bar"></div>
		<!-- /Breadscrumb Section -->
		
		<!-- Profile Content -->
        <div class="dashboard-content offset-transform-top listing-section">		
			<div class="container">
				<div class="row">
					<div class="col-md-4">
						@include('sellers.layout.profile')
					</div>		
					<div class="col-md-8">
						@include('sellers.layout.header')

						<form role="form" method="POST" action="{{ route('seller.post.save') }}" class="require-validation"
						      data-cc-on-file="false" 
						      data-stripe-publishable-key="{{ $setting->stripe_key }}"
						      id="add_post"
						      enctype="multipart/form-data">
						    <input type="hidden" name="check_feature" id="check_feature" value="0">
						    @csrf
						    <div class="profile-content">
						        <div class="">
						            <div class="card">
						                <div class="card-header">
						                    <h4>Ad information</h4>							
						                </div>
						                <div class="card-body">
						                    <div class="row">
												<div class="col-lg-6 col-md-6">
													<div class="form-set">
														<label class="col-form-label">Ad Title <span class="starcolor">*</span></label>
														<input class="form-control pass-input" id="title" name="title" type="text" value="{{ old('title') }}" placeholder="Title"
															maxlength="250">
															<!-- <span class="error-message" id="category-error"></span>	 -->
													</div>
												</div>
												<div class="col-lg-6 col-md-6">
													<div class="form-set">
														<label class="col-form-label">Price <span class="starcolor">*</span></label>
														<input class="form-control pass-input" id="price" name="price" type="text" value="{{ old('price') }}" placeholder="0.00">
													</div>
												</div>
											</div>
											<div class="row">
							                    <div class="form-set">
							                        <label class="col-form-label">Ad Description (Includes bold, Italic) <span class="starcolor">*</span></label>
							                        <textarea name="description" id="description" class="rte-zone" rows="6">{{ old('description') }}</textarea>
							                        <span class="error-message" id="description-error"></span>
							                    </div>
								            </div>
						                    <div class="row">
												<div class="col-lg-6 col-md-6">
								                    <div class="form-set">
								                        <label class="col-form-label">Category <span class="starcolor">*</span></label>
								                        <select class="form-control select" id="category" name="category">
								                            <option value="">Select</option>
								                            @foreach($categories as $category)		
								                            <option value="{{ $category->id }}" @if(old('category') == $category->id) selected @endif>{{ $category->category }}</option>										   		
								                            @endforeach
								                        </select>
								                        <span class="error-message" id="category-error"></span>		
								                    </div>
								                </div>
								                <div class="col-lg-6 col-md-6">
								                    <div class="form-set">
								                        <label class="col-form-label">Sub Category <span class="starcolor">*</span></label>
								                        <select class="form-control select" id="sub_category" name="sub_category">
								                            <!-- <option value="">Select</option> -->
								                            @if(old('sub_category'))
								                            @foreach($subcategories as $subcategory)	
									                            @if(old('sub_category') == $subcategory->id)	
									                            	<option value="{{ $subcategory->id }}" selected>{{ $subcategory->subcategory }}</option>										   		
									                            @endif
								                            @endforeach
                                                            @else
                                                                <option value="">Select</option>
                                                            @endif
								                        </select>
								                        <span class="error-message" id="sub_category-error"></span>
								                    </div>
								                </div>
								            </div>

											<div class="row">
												<div class="col-lg-6 col-md-6">
								                    <div class="form-set">
								                        <label class="col-form-label">Caliber </label>
                                                        <select class="form-control select" id="subsub_category" name="subsub_category">
                                                            @if(old('subsub_category'))
                                                                @foreach($subsubcategories as $subsubcategory)	
										                            @if(old('subsub_category') == $subsubcategory->id)	
										                            	<option value="{{ $subsubcategory->id }}" selected>{{ $subsubcategory->subsubcategory }}</option>										   		
										                            @endif
									                            @endforeach
                                                            @else
                                                                <option value="">Select</option>
                                                            @endif
                                                        </select>
								                    </div>
								                </div>
								                <div class="col-lg-6 col-md-6">
								                    <div class="form-set">
								                        <label class="col-form-label">Shipping </label>
														<select class="form-control select" id="shipping" name="shipping[]" multiple>                                                                    
															<!--<option value="">Choose Shipping</option>-->
															@foreach ($shippings as $shipping)
																<option value="{{ $shipping->id }}" @if(in_array($shipping->id, old('shipping', []))) selected @endif>{{ $shipping->shipping_name }}</option>
															@endforeach                                                                    
                                                        </select>

								                        <!--<select class="form-control select" id="shipping" name="shipping">                                                                    
                                                            <option value="">Choose Shipping</option>
                                                            @foreach ($shippings as $shipping)
                                                                <option value="{{ $shipping->id }}" @if(old('shipping') == $shipping->id) selected @endif>{{ $shipping->shipping_name }}</option>
                                                            @endforeach                                                                    
                                                        </select>-->
								                    </div>
								                </div>
											</div>
											<div class="row">
												<div class="col-lg-6 col-md-6">
								                    <div class="form-set">
													<label class="col-form-label">Additional Information</label>
													<textarea class="form-control" maxlength="250" name="additional_information" rows="3">{{old('additional_information')}}</textarea>
								                        <span class="error-message" id="category-error"></span>		
								                    </div>
								                </div>
								                <div class="col-lg-6 col-md-6">
								                    <div class="form-set">
													<label class="col-form-label">Is Featured? <span class="starcolor">*</span></label>		
													<ul class="custom-radiosbtn">
														@if(settings()->feature_ads_status == '1')
														<li>
															<label class="radiossets">
																Yes
																<input type="radio" checked="checked" class="is_featured" name="is_featured" value="Yes">
																<span class="checkmark-radio"></span>
															</label>
														</li>
														@endif
														<li>
															<label class="radiossets">
																No
																<input type="radio" checked="checked" class="is_featured" name="is_featured" value="No">
																<span class="checkmark-radio"></span>
															</label>
														</li>
													</ul>
								                        <span class="error-message" id="sub_category-error"></span>
								                    </div>
								                </div>
											</div>
											
								            @if($user->subscription->id>1)
						                    <div class="form-set">
						                        <label class="col-form-label">Home URL</label>								    
						                        <input type="text" class="form-control pass-input" placeholder="https://www.example.com" id="home_url" name="home_url" value="{{ old('home_url') }}">									   
						                    </div>
						                    @endif
						                    
						                    <div class="stripe-payment-blk d-none" id="stripe_form">
						                        <h4>Stripe Payment 
						                        	<span style="float: right;"> Price : $ {{ $featured_ads_price }}.00</span></h4>
						                        <div class="stripe-img-blk">
						                            <p>Card</p>
						                            <img src="{{ asset('sellers/assets/img/payment-method.png') }}" class="ms-auto" alt="">
						                        </div>		
						                        <div class="form-set">
						                            <label class="col-form-label">Card number <span class="starcolor">*</span></label>								    
						                            <input autocomplete='off' class='form-control card-number input-form' size='16' type='text' value="" id="card_number" name="card_number" 
						                                   pattern="[0-9 ]{20}" inputmode="numeric" placeholder="Enter card number" maxlength="16">
						                        </div>
						                        <div class="row">
						                            <div class="col-lg-4 col-md-4">
						                                <div class="form-set">
						                                    <label class="col-form-label">Expiration month <span class="starcolor">*</span></label>
						                                    <input class='form-control card-expiry-month input-form' placeholder='MM' size='2' type='text' value="" id="card_expiry_month" name="card_expiry_month" maxlength="2" pattern="\d{1,2}" placeholder="Enter month ex:09">
						                                    <span class="error-message" id="card-expiry-month-error"></span>
						                                </div>
						                            </div>											
						                            <div class="col-lg-4 col-md-4">
						                                <div class="form-set">
						                                    <label class="col-form-label">Expiration Year <span class="starcolor">*</span></label>
						                                    <input class='form-control card-expiry-year input-form' placeholder='YYYY' size='4' type='text' value="" id="card_expiry_year" name="card_expiry_year" maxlength="4" pattern="\d{4}" placeholder="Enter year ex:2025">
						                                    <span class="error-message" id="card-expiry-year-error"></span>
						                                </div>
						                            </div>											
						                            <div class="col-lg-4 col-md-4">
						                                <div class="form-set">
						                                    <label class="col-form-label">CVC/CVV <span class="starcolor">*</span></label>
						                                    <input autocomplete='off' class='form-control card-cvc input-form' placeholder='ex. 311' size='4' type='text' value="" id="card_cvc" name="card_cvc" maxlength="4" pattern="\d{4}" placeholder="EX:005">
						                                    <span class="error-message" id="card-cvc-error"></span>
						                                </div>
						                            </div>											
						                        </div>
						                        <span class="error-message" id="card-number-error"></span>
						                    </div>
						                </div>   							
						            </div>	
						            <div class="card">
						                <div class="card-header">
						                    <h4>Location information</h4>							
						                </div>
						                <!-- <div class="card-body">
						                	<div class="form-set">
											    <label class="col-form-label">Location Address</label>								    
											    <input type="text" class="form-control" id="location_address1" value="">									   
											</div> 
											<button id="search-btn" class="btn btn-primary">Search</button>

											
											<input type="hidden" id="latitude1" name="latitude1">
											<input type="hidden" id="longitude1" name="longitude1">

						                </div> -->


						                <div class="card-body">
										    <div class="form-set">
										        <label class="col-form-label">Location Address <span class="starcolor">*</span></label>								    
										        <input type="text" class="form-control" id="location_address" name="location_address" value="{{ old('location_address') }}" placeholder="Queens, New York NY">		
												<input type="hidden" name="ad_city" id="ad_city" value="{{ old('ad_city') }}">
												<input type="hidden" name="ad_state" id="ad_state" value="{{ old('ad_state') }}">
												<input type="hidden" name="ad_state_code" id="ad_state_code" value="{{ old('ad_state_code') }}">
												<input type="text" style="width:0px;border:none" name="ad_lat" id="ad_lat" value="{{ old('ad_lat') }}">
												<input type="text" style="width:0px;border:none" name="ad_lng" id="ad_lng" value="{{ old('ad_lng') }}">							   
										    </div> 

										    <!-- <input type="text" id="postcode" class="form-control postal_code" name="postal_code"  placeholder="Enter Postal code" value="" required> -->
										    <!-- <div class="listing-map">
										        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3584.6461688381!2d-80.26548188573862!3d26.045130803169!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88d9a862f9831459%3A0xafcb9384c02e8b75!2s8697%20Stirling%20Rd%2C%20Cooper%20City%2C%20FL%2033328%2C%20USA!5e0!3m2!1sen!2sin!4v1671519522101!5m2!1sen!2sin" width="100" height="430" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>								
										    </div> -->	
										   <!-- <div class="row">
										        <div class="col-lg-6 col-md-6">									     
										            <div class="form-set formlast-input lat-input">
										                <input type="hidden" class="form-control" id="latitude" name="latitude" value="26.045197767574102">									   
										            </div>
										        </div>
										        <div class="col-lg-6 col-md-6">									     
										            <div class="form-set formlast-input">
										                <input type="hidden" class="form-control" id="longitude" name="longitude" value="-80.26095677163161">									   
										            </div>
										        </div>
										    </div>	-->							
										</div>

						                <!-- <div class="card-body">
						                    <div class="form-set">
						                        <label class="col-form-label">Location Address</label>								    
						                        <input type="text" class="form-control" value="8697-8747 Stirling Rd, Florida">									   
						                    </div> 
						                    <div class="listing-map">
						                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3584.6461688381!2d-80.26548188573862!3d26.045130803169!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88d9a862f9831459%3A0xafcb9384c02e8b75!2s8697%20Stirling%20Rd%2C%20Cooper%20City%2C%20FL%2033328%2C%20USA!5e0!3m2!1sen!2sin!4v1671519522101!5m2!1sen!2sin" width="100" height="430" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>								
						                    </div>	
						                    <div class="row">
						                        <div class="col-lg-6 col-md-6">									     
						                            <div class="form-set formlast-input lat-input">
						                                <input type="text" class="form-control" value="26.045197767574102">									   
						                            </div>
						                        </div>
						                        <div class="col-lg-6 col-md-6">									     
						                              <div class="form-set formlast-input">
						                                <input type="text" class="form-control" value="-80.26095677163161">									   
						                            </div>
						                        </div>
						                    </div>								
						                </div> -->
						            </div>				
						            <div class="card media-section">
						                <div class="card-header">
						                    <h4>Media Information </h4>							
						                </div>
						                

						                <div class="form-set p-3">
										    <label>Upload Image/Video <span class="starcolor">*</span></label>
										    <div class="form-uploads mb-4">
										        <div class="form-uploads-path">
													<div class="row">
														<div class="col-md-12">
														<div id="preview-area" class="text-center mt-3">
															<img src="{{ asset('sellers/assets/img/icons/upload.svg') }}" alt="img">
														</div>
														<div class="preview"></div>
														<div class="file-browse">
															<h6>Click to replace or Drag and Drop</h6>
															<div class="file-browse-path">
																<input type="file" id="upload_media_file" name="upload_media_file[]" multiple>
																<a href="javascript:void(0);"> Browse</a>
															</div>
														</div>
														<p id="uploaded-photo" class="text-center"></p>
														<h5>Supported formats: JPEG, PNG, JPG, MP4 </h5>

														<h5>Max size: 2MB</h5>
														<h5>Image Dimensions: Min 1400px X 500px</h5>
															</div>
														</div>

													</div>										     <span class="error-message" id="upload_media_file-error"></span>   
										    </div>
										</div>
										
						            </div>	
						            <button class="btn btn-primary my-3" type="submit">Submit</button>						
						        </div>			
						    </div>
						</form>
					
					</div>			
				</div>
			</div>		
		</div>		
		<!-- /Profile Content -->
				
	</div>

    <!-- scrollToTop start -->
	<div class="progress-wrap active-progress">
		<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
		<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919px, 307.919px; stroke-dashoffset: 228.265px;"></path>
		</svg>
	</div>
	<!-- scrollToTop end -->
	<style type="text/css">
    .error {
        color: red;
        font-size: 12px;
    }

    .error-text {
        color: red;
    }

    * {
        margin: 0;
        padding: 0;
    }
    .frameBody {
        font-family: sans-serif;
        font-size: 12px;
        width: 100%;
        height: 100%;
    }
    .rte-zone {
        width: 100%;
        height: 175px;
        border: 1px #e3e3e3 solid;
        clear: both;
    }
    .rte-toolbar a.active {
        background-color: #d3d3d3;
    }
	.starcolor {
    	color: red;
	}
</style>
@endsection

@section('customScript')
	
<!-- Replace "YOUR_API_KEY" with your actual Google Maps API key -->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> -->

@endsection