@extends('layout')
@section('content')
    
    <!--Page Title-->
    <section class="page-title" style="background-image:url({{url('/')}}/assets/front/img/bg-page-title-1.jpg);">
    	<div class="auto-container">
        	<div class="inner-box">
                <h1>@include('partials.breadcrumb')</h1>
                <ul class="bread-crumb">
                	<li><a href="/">Home</a></li>
                    <li>@include('partials.breadcrumb')</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->


    <div class="jumbotronss blog-post startgoals_block startgoals_block1">
        <div class="container">
            <div class="sec-title centered">
            	<h2 class="theme_color">Start a Campaign</h2>
                <div class="clearfix">
                	<div class="desc-text">Starting your campaign is simple and streamlined. Define your project goals, craft an engaging story, and showcase your vision with images and videos. A well-structured campaign attracts supporters and builds trust, increasing the chances of meeting or exceeding your funding target. With Upcrowders, you gain access to a powerful crowdfunding network where creativity, innovation, and financial backing come together to fuel success.</div>
                </div>
            </div>
            <form id="categform" class="row mt-3">
            <div class="col-md-8 m-auto">
            <div class="row  donation-form-outer">
            <div class="col-md-4 mb-5">
<div class="form-group required text-center">
<label class="control-label" for="input-payment-country">Country</label>
<div class="selectgoal">
<select name="country_id" id="country_id" class="form-control">
<option value="0"> --- Please Select --- </option>
    <option disabled="" value="">Select your country</option>
    <option value="AU">Australia</option>
    <option value="AT">Austria</option>
    <option value="BE">Belgium</option>
    <option value="CA">Canada</option>
    <option value="DK">Denmark</option>
    <option value="FI">Finland</option>
    <option value="FR">France</option>
    <option value="DE">Germany</option>
    <option value="IE">Ireland</option>
    <option value="IT">Italy</option>
    <option value="LU">Luxembourg</option>
    <option value="NL">Netherlands</option>
    <option value="NO">Norway</option>
    <option value="PT">Portugal</option>
    <option value="ES">Spain</option>
    <option value="SE">Sweden</option>
    <option value="CH">Switzerland</option>
    <option value="GB">United Kingdom</option>
    <option value="US">United States</option>
</select>
</div>
</div>
			</div>
            <div class="col-md-4 mb-5">
				<div class="form-group required text-center">
				<label class="control-label" for="input-payment-zip">Zip</label>
				<input id="zippe" class="form-control" type="text" placeholder="Zip">
			</div>
			</div>
            <div class="col-md-4 mb-5">
<div class="form-group required text-center">
<label class="control-label" for="input-payment-country">Category</label>
<div class="selectgoal">
<select name="category_id" id="category_id" class="form-control">
    <option value="0">Select</option>
    <option value="1">Computer Games</option>
    <option value="2">Movies</option>
    <option value="3">Music</option>
    <option value="4">Hardware</option>
    <option value="5">Writing &amp; Publishing</option>
    <option value="6">Education</option>
    <option value="7">Human Rights</option>
    <option value="8">VR</option>
    <option value="9">Finance</option>
    <option value="10">Charity</option>
    <option value="11">Mobile Apps</option>
</select>
</div>
            </div>
            </div>
        </div>
            <div class="row mt-0">
		<div class="col-xl-12 col-lg-12 m-auto">
			<p>To receive the money raised during the crowdfunding campaign, please ensure that you have:</p>
			<ul class="smallstarcat">
				<li>A bank account and mailing address in the provided country.</li>
				<li>The required documents for KYC verification.</li>
				<li>A VAT ID.</li>
			</ul>
		</div>
			</div>
            <div class="row mt-5">
				<div class="col-md-4">
					<a class="theme-btn btn-style-one" id="continue" href="#">Continue</a>
				</div>
            </div>
    </div>
    </form>
    </div>
</div>


    <div class="jumbotronss blog-post startgoals_block startgoals_block2" style="display:none;">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-xl-8 col-lg-8">
                    <div class="section-title text-center mb-0">
                        <h2 class="extra-margin">Tell us a bit more about your campaign</h2>
						<p>This information helps us get to know you and your fundraising needs.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-8 col-lg-8 m-auto">
                    <div class="section-title text-left mb-3">
                        <h3 class="extra-margin">Who are you fundraising for?</h3>
                    </div>
                </div>
            </div>
            <div class="row mb-5 mt-5">
            <div class="col-md-8 m-auto">
<div class="radio">
	<label class="w-100 mb-3">
		<input type="radio" name="strtup_inp" value="bank_transfer" hidden>
		<div class="strtup_radio row">
		<div class="col-md-9">
			<h3>Yourself</h3>
			<p>Funds are delivered to your bank account for your own use</p>
		</div>
		<div class="col-md-3">
			<img width="120" src="{{url('/')}}/assets/front/img/icossart1.png">
		</div>
		</div>
	</label>
</div>
<div class="radio">
	<label class="w-100 mb-3">
		<input type="radio" name="strtup_inp" value="bank_transfer" hidden>
		<div class="strtup_radio row">
		<div class="col-md-9">
			<h3>Someone else</h3>
			<p>You’ll invite a beneficiary to receive funds or distribute them yourself</p>
		</div>
		<div class="col-md-3">
			<img width="120" src="{{url('/')}}/assets/front/img/icossart2.png">
		</div>
		</div>
	</label>
</div>
<div class="radio">
	<label class="w-100">
		<input type="radio" name="strtup_inp" value="bank_transfer" hidden>
		<div class="strtup_radio row">
		<div class="col-md-9">
			<h3>Charity</h3>
			<p>Funds are delivered to your chosen nonprofit for you</p>
		</div>
		<div class="col-md-3">
			<img width="120" src="{{url('/')}}/assets/front/img/icossart3.png">
		</div>
		</div>
	</label>
</div>
            </div>
            </div>
            <div class="row">
				<div class="col-md-8 m-auto">
					<a class="theme-btn btn-style-one" id="continue2" href="#">Continue</a>
				</div>
            </div>
    </div>
</div>

    <div class="jumbotronss blog-post startgoals_block startgoals_block3" style="display:none;">
        <div class="container">
            <div class="row justify-content-center mb-5">
                <div class="col-xl-8 col-lg-8">
                    <div class="section-title text-center">
                        <h2 class="extra-margin">How much would you like to raise?</h2>
						<p>It's completely expected to need funds beyond your starting goal. You can always change your goal as you go.</p>
                    </div>
                </div>
            </div>
            <div class="row mb-5">
            <div class="col-md-8 m-auto">
            <div class="row">
            <div class="col-md-5">
				<div class="goalinputs form-group required d-flex align-items-center">
					<span class="goalinputs_left">$</span>
					<input id="input_payment_goal" class="form-control" type="text" placeholder="Your starting goal"  oninput="this.value = this.value.replace(/[^0-9\.]/g, '').split(/\./).slice(0, 2).join('.')" type="number" step="any" min="0" name="wpneo_donate_amount_field" value=""
                                    data-min-price="10" data-max-price="500">
					<span class="goalinputs_right">USD</span>
				</div>
				<p class="mt-3">Keep in mind that transaction fees, including credit and debit charges, are deducted from each donation.</p>
				<div class="inrogoal mt-5">
					<p>To receive money raised, please make sure the person withdrawing has:</p>
					<ul>
						<li>A US social security number</li>
						<li>A bank account and mailing address in one of the 50 states</li>
					</ul>
			</div>
			</div>
			</div>
			</div>
			</div>
            <div class="row">
				<div class="col-md-8 m-auto">
					<a class="theme-btn btn-style-one" id="continue3" href="#">Continue</a>
				</div>
            </div>
    </div>
</div>

@stop
@section('script')
<script type="text/javascript">


		function iscountryid(countryid) {
  			if (countryid != 0) {
				return true;
			}
		}
		function iszippe(zippe) {
  			if (zippe.length > 4) {
				return true;
			}
		}
		function iscategoryid(categoryid) {
  			if (categoryid != 0) {
				return true;
			}
		}
			
		
		
		
		$(document).ready(function(){
			$("#continue").on("click", function(e){
				// После нажатия на кнопку отменяем стандартное поведение браузера
				// и создаем переменную
				e.preventDefault();
				var countryid = $("#country_id").val();	
				var zippe = $("#zippe").val();
				var categoryid = $("#category_id").val();		
				
				
				if(!iscountryid(countryid)) {					
					$('#country_id').css('border', '1px solid #ff0000');
				} else {
					$('#country_id').css('border', 'none');
				}
				if(!iszippe(zippe)) {				
					$('#zippe').css('border', '1px solid #ff0000');
				} else {
					$('#zippe').css('border', 'none');
				}
				if(!iscategoryid(categoryid)) {				
					$('#category_id').css('border', '1px solid #ff0000');
				} else {
					$('#category_id').css('border', 'none');
				}
				
				if(iscountryid(countryid) && iszippe(zippe) && iscategoryid(categoryid)) {
					$('body').css('opacity','0.3');
					$('#categform')[0].reset();
					setTimeout(function(){
					$('body').css('opacity','1');
					$('.startgoals_block1').hide();
					$('.startgoals_block2').show();
					$('.startgoals_block3').hide();
					  $('html, body').animate({
					      scrollTop: 200
					    }, 500);
					}, 1000);
				}
			});
		});
	</script>
	
<script type="text/javascript">
		$(document).ready(function(){
			$("#continue2").on("click", function(e){
				e.preventDefault();
    var selected = 0;
    var radios = document.getElementsByName('strtup_inp');
    for (var radio of radios)
    {
        if (radio.type === 'radio' && radio.checked)
        {
			selected = 1;
		}

    }
if (selected == 1) {
            $('body').css('opacity','0.3');
					$('.startgoals_block1').hide();
					$('.startgoals_block2').hide();
					setTimeout(function(){
					$('body').css('opacity','1');
					window.location.replace('/registration');
					}, 1000);
} else {
			swal("Error!", "Choose one of the options!", "error");
}
			});
		});
	</script>
	
	
<script type="text/javascript">
		
		
		

    // Donate Field Add Max & Min Amount
    $('input[name="wpneo_donate_amount_field"]').on('blur change paste', function () {
        var input_price = $(this).val();
        var min_price = $(this).data('min-price');
        var max_price = $(this).data('max-price');
        if (input_price < min_price) {
            if (min_price) {
                $(this).val(min_price);
                $('.wpneo-tooltip-min').css({ 'visibility': 'visible' });
            }
        } else if (max_price < input_price) {
            if (max_price) {
                $(this).val(max_price);
                $('.wpneo-tooltip-max').css({ 'visibility': 'visible' });
            }
        } else {
            $('.wpneo-tooltip-min,.wpneo-tooltip-max').css({ 'visibility': 'hidden' });
        }
    });
	</script>
@stop