@extends('client.layout.master')
@section('content')
    <style>
        .fly-in-text {
            list-style: none;
            position: absolute;
            color: white;
            left: 25%;
            top: 50%;
            /* transform: translateX(-50%) translateY(-50%); */
        }

        .fly-in-text li {
            display: inline-block;
            /* margin-right: 50px; */
            font-family: Open Sans, Arial;
            font-weight: 300;
            font-size: 3em;
            opacity: 1;
            transition: all 2.5s ease;
        }

        .fly-in-text li:last-child {
            margin-right: 0;
        }

        .fly-in-text.hidden li {
            opacity: 0;
        }

        .fly-in-text.hidden li:nth-child(1) {
            transform: translateX(-200px) translateY(-200px);
        }

        .fly-in-text.hidden li:nth-child(2) {
            transform: translateX(20px) translateY(100px);
        }

        .fly-in-text.hidden li:nth-child(3) {
            transform: translateX(-150px) translateY(-80px);
        }

        .fly-in-text.hidden li:nth-child(4) {
            transform: translateX(10px) translateY(-200px);
        }

        .fly-in-text.hidden li:nth-child(5) {
            transform: translateX(-300px) translateY(200px);
        }

        .fly-in-text.hidden li:nth-child(6) {
            transform: translateX(20px) translateY(-20px);
        }

        .fly-in-text.hidden li:nth-child(7) {
            transform: translateX(30px) translateY(200px);
        }

        .fly-in-text.hidden li:nth-child(7) {
            transform: translateX(40px) translateY(100px);
        }

        .fly-in-text.hidden li:nth-child(8) {
            transform: translateX(50px) translateY(-60px);
        }

        .fly-in-text.hidden li:nth-child(9) {
            transform: translateX(60px) translateY(20px);
        }

        .fly-in-text.hidden li:nth-child(10) {
            transform: translateX(70px) translateY(-100px);
        }

        .fly-in-text.hidden li:nth-child(11) {
            transform: translateX(80px) translateY(100px);
        }

        .fly-in-text.hidden li:nth-child(12) {
            transform: translateX(90px) translateY(-10px);
        }

        .fly-in-text.hidden li:nth-child(13) {
            transform: translateX(100px) translateY(10px);
        }

    </style>
    <section id="subheader" class="text-light writbg">
        <div class="center-y relative text-center">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">

                        {{-- <p>Sign Up</p> --}}
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
    </section>
    <form action="{{ route('send.request.writer') }}" method="post">
        @csrf
        <section>
            <div class="container">
                <div class="row align-items-center text-center">
                    <div class="col-md-12">
                        <h2>Request a Complimentary Consultation</h2>
                        <h5>Complete this form to get a Complimentary Consultation.</h5>
                        {{-- <p>There is a $50 fee to find your organization a contract for-hire grant writer.
                            The completed form will be forwarded to all our grant writers.

                            Do not include the name of your organization or any identifying information
                            (we do not want you to be inundated with emails from unqualified individuals.)</p> --}}
                    </div>
                </div>
            </div>
            <div class="container shadow rounded text-white bk-color">
                <div class="row align-items-center">
                    <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Do you have a grant application(s) in hand that you want to apply
                                for?</strong>
                        </span>
                        <span class="alert  alert-error pull-right" style="display:none;" id="need_researcher_error">
                            <i class="icon-hand-left"></i> Please correct
                        </span>
                        <br>
                        <label class="radio inline">
                            <input type="radio" class="need_researcher" name="Radio1" value="Yes" required> Yes
                        </label>
                        <br>
                        <label class="radio inline">
                            <input type="radio" class="need_researcher" name="Radio1" value="No" required> No
                        </label>
                    </div>
                    <div class="col-md-12 form-group">
                        <h6 for="">What is your primary purpose in seeking a grant consultation?</h6>
                        <div class="field-set">
                            <textarea name="message1" id="message" class="form-control" placeholder="Your Message"
                                required></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 form-group">
                        <h6 for="">Please describe your programming and/or dollar needs.</h6>
                        <div class="field-set">
                            <textarea name="message2" id="message" class="form-control" placeholder="Your Message"
                                required></textarea>
                        </div>
                    </div>

                    <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Are you in need of a grant consultation to research and locate
                                grants?</strong>
                        </span>
                        <span class="alert  alert-error pull-right" style="display:none;" id="need_researcher_error">
                            <i class="icon-hand-left"></i> Please correct
                        </span>
                        <br>
                        <label class="radio inline">
                            <input type="radio" class="need_researcher" name="Radio2" value="Yes" required> Yes
                        </label>
                        <br>
                        <label class="radio inline">
                            <input type="radio" class="need_researcher" name="Radio2" value="No" required> No
                        </label>
                    </div>
                    <div class="col-md-12 form-group">
                        <p>Additional Details </p>
                        <textarea name="message3" class="form-control" required></textarea>
                    </div>
                    {{-- <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Are you in need of a grant writer to write a curriculum?</strong>
                        </span>
                        <br>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio3" value="Yes" required> Yes
                        </label>
                        <br>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio3" value="No" required> No
                        </label>
                    </div> --}}
                    {{-- <div class="col-md-12 form-group">
                        <p>Additonal detail</p>
                        <textarea class="form-control" name="message4" required></textarea>
                    </div> --}}
                    {{-- <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Are you in need of a grant consulation to create and promote your
                                YouHelp.com fundraising page?</strong>
                        </span>
                        <br>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio4" value="Yes" required> Yes
                        </label>
                        <br>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio4" value="No" required> No
                        </label>
                    </div> --}}
                    {{-- <div class="col-md-12 form-group">
                        <p>Additonal detail</p>
                        <textarea class="form-control" name="message5" required></textarea>
                    </div> --}}
                    <div class="col-md-12 form-group">
                        <h6 for="">When would you like the grant Consultation to begin work?</h6>
                        <div class="field-set d-flex align-items-center">
                            <input name="checkbox1" type="checkbox" value="Immediately" /> <span>immediately or choose
                                date</span><span class="col-md-6">
                                <input name="checkbox1" type="date" class="form-control"></span>
                        </div>
                    </div>
                    <div class="col-md-12 form-group">
                        <h6 for="">Type of Organization (Check all that are applicable)</h6>
                        <div class="d-flex align-items-center">
                            <label class="checkbox mr-3">
                                <input name="checkbox2" type="checkbox" name="checkbox2" class="org_type"> For Profit
                            </label>

                            <label class="checkbox mr-3">
                                <input type="checkbox" name="Checkbox3" name="checkbox3" class="org_type"> For
                                NonProfit
                            </label>
                            <label class="checkbox mr-3">
                                <input type="checkbox" id="Checkbox4" name="checkbox4" class="org_type"> For Small
                                Business
                            </label>
                            <label class="checkbox col-md-4 d-flex align-items-center">
                                Others:<input type="text" class="form-control" name="text1">
                            </label>
                        </div>

                    </div>

                    <div class="col-md-12 form-group">
                        <h6 for="">Please describe the type of services or programs you presently provide (Leave blank if
                            none)
                        </h6>
                        <div class="field-set">
                            <textarea name="message6" class="form-control" placeholder="Your Message" required></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 form-group">
                        <h6 for="">How do you presently generate revenue to provide your services (Leave blank if not
                            applicable)?</h6>
                        <div class="field-set">
                            <textarea name="message7" class="form-control" placeholder="Your Message" required></textarea>
                        </div>
                    </div>
                    <div class="col-md-12 form-group">
                        <h6 for="">How long has your company been in existence?</h6>
                        <div class="field-set">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="text-white">Year</label>
                                    <input type="text" name="text2" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="text-white">Month</label>

                                    <input type="text" name="text3" class="form-control" required>
                                </div>
                            </div>


                        </div>
                    </div>
                    <div class="col-md-12 form-group">
                        <h6 for="">In what geographic areas do you or will you be providing services?</h6>
                        <div class="field-set">
                            <input type="text" name="text4" class="form-control" required />
                        </div>
                    </div>
                    <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white"> Will this be your first time applying for grant funds?</strong>
                        </span>

                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio5" value="Yes" required> Yes
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio5" value="No" required> No
                        </label>
                    </div>
                    <div class="col-md-12 form-group">
                        <p>Additonal detail</p>
                        <textarea name="message8" class="form-control" required></textarea>
                    </div>
                    <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Will this be your first time applying for grant funds?</strong>
                        </span>

                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio6" value="Yes" required> Yes
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio6" value="No" required> No
                        </label>
                    </div>
                    <div class="col-md-12 form-group">
                        <p>Additonal detail</p>
                        <textarea name="message9" class="form-control" required></textarea>
                    </div>
                    <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Have you previously received grant funds?</strong>
                        </span>

                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio7" value="Yes" required> Yes
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio7" value="No" required> No
                        </label>
                    </div>
                    <div class="col-md-12 form-group">
                        <p>Please describe your grant history. (Leave blank if none)</p>
                        <textarea name="message10" class="form-control" required></textarea>
                    </div>

                    <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Do you have a copy of your previously written grant
                                application(s)?</strong>
                        </span>

                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio8" value="Yes" required> Yes
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio8" value="No" required> No
                        </label>
                    </div>
                    <div class="col-md-12 form-group">
                        <p>Additional details</p>
                        <textarea name="message11" class="form-control" required></textarea>
                    </div>
                    <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Do you have a fundraising packet?</strong>
                        </span>

                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio9" value="Yes" required> Yes
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio9" value="No" required> No
                        </label>
                    </div>
                    <div class="col-md-12 form-group">
                        <p>Additional details</p>
                        <textarea name="message12" class="form-control" required></textarea>
                    </div>
                    <div class="col-md-12 form-group">
                        <span class="help-inline" style="padding: 7px 10px 0px 0px;">
                            <strong class="text-white">Do you have an agency mission statement?</strong>
                        </span>

                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio10" value="Yes" required> Yes
                        </label>
                        <label class="radio inline">
                            <input type="radio" class="need_curriculum" name="Radio10" value="No" required> No
                        </label>
                    </div>
                    <div class="col-md-12 form-group">
                        <p>Additional details</p>
                        <textarea name="message13" class="form-control" required></textarea>
                    </div>


                </div>
            </div>


            <div class="row align-items-center text-center mt-3">

                <div class="col-md-12 ">
                    <h2>Contact Information</h2>
                    <h5>Your contact info is secure.</h5>
                </div>
            </div>
            <div class="container shadow p-3 mb-5  rounded text-white bk-color">
                <div class="row">
                    <div class="col-md-6 mt-3">
                        <p>Job Title</p>
                        <input type="text" name="text5" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Country</p>
                        <select name="select1" class="form-control" required>
                            <option value="us">United States</option>
                            <option value="af">Afghanistan</option>
                            <option value="al">Albania</option>
                            <option value="dz">Algeria</option>
                            <option value="as">American Samoa</option>
                            <option value="ad">Andorra</option>
                            <option value="ai">Anguilla</option>
                            <option value="aq">Antarctica</option>
                            <option value="ag">Antigua and Barbuda</option>
                            <option value="ar">Argentina</option>
                            <option value="am">Armenia</option>
                            <option value="aw">Aruba</option>
                            <option value="au">Australia</option>
                            <option value="at">Austria</option>
                            <option value="az">Azerbaidjan</option>
                            <option value="bs">Bahamas</option>
                            <option value="bh">Bahrain</option>
                            <option value="bd">Bangladesh</option>
                            <option value="bb">Barbados</option>
                            <option value="be">Belgium</option>
                            <option value="bz">Belize</option>
                            <option value="bj">Benin</option>
                            <option value="bm">Bermuda</option>
                            <option value="bt">Bhutan</option>
                            <option value="bo">Bolivia</option>
                            <option value="ba">Bosnia-Herzegovina</option>
                            <option value="bw">Botswana</option>
                            <option value="bv">Bouvet Island</option>
                            <option value="br">Brazil</option>
                            <option value="bn">Brunei Darussalam</option>
                            <option value="bg">Bulgaria</option>
                            <option value="bf">Burkina Faso</option>
                            <option value="bi">Burundi</option>
                            <option value="kh">Cambodia</option>
                            <option value="cm">Cameroon</option>
                            <option selected value="ca">Canada</option>
                            <option value="cv">Cape Verde</option>
                            <option value="ky">Cayman Islands</option>
                            <option value="cf">Central African Republic</option>
                            <option value="td">Chad</option>
                            <option value="cl">Chile</option>
                            <option value="cn">China</option>
                            <option value="cx">Christmas Island</option>
                            <option value="cc">Cocos (Keeling) Islands</option>
                            <option value="co">Colombia</option>
                            <option value="km">Comoros</option>
                            <option value="cg">Congo</option>
                            <option value="ck">Cook Islands</option>
                            <option value="cr">Costa Rica</option>
                            <option value="hr">Croatia</option>
                            <option value="cy">Cyprus</option>
                            <option value="cz">Czech Republic</option>
                            <option value="dk">Denmark</option>
                            <option value="dj">Djibouti</option>
                            <option value="dm">Dominica</option>
                            <option value="do">Dominican Republic</option>
                            <option value="tl">East Timor</option>
                            <option value="ec">Ecuador</option>
                            <option value="eg">Egypt</option>
                            <option value="sv">El Salvador</option>
                            <option value="gq">Equatorial Guinea</option>
                            <option value="er">Eritrea</option>
                            <option value="ee">Estonia</option>
                            <option value="et">Ethiopia</option>
                            <option value="fo">Faroe Islands</option>
                            <option value="fj">Fiji</option>
                            <option value="fi">Finland</option>
                            <option value="fr">France</option>
                            <option value="gf">French Guiana</option>
                            <option value="ga">Gabon</option>
                            <option value="gm">Gambia</option>
                            <option value="ge">GeorgiaEurasia</option>
                            <option value="de">Germany</option>
                            <option value="gh">Ghana</option>
                            <option value="gi">Gibraltar</option>
                            <option value="gr">Greece</option>
                            <option value="gl">Greenland</option>
                            <option value="gd">Grenada</option>
                            <option value="gp">Guadeloupe (French)</option>
                            <option value="gu">Guam (USA)</option>
                            <option value="gt">Guatemala</option>
                            <option value="gn">Guinea</option>
                            <option value="gw">Guinea Bissau</option>
                            <option value="gy">Guyana</option>
                            <option value="ht">Haiti</option>
                            <option value="hn">Honduras</option>
                            <option value="hk">Hong Kong</option>
                            <option value="hu">Hungary</option>
                            <option value="is">Iceland</option>
                            <option value="in">India</option>
                            <option value="id">Indonesia</option>
                            <option value="ie">Ireland</option>
                            <option value="il">Israel</option>
                            <option value="it">Italy</option>
                            <option value="jm">Jamaica</option>
                            <option value="jp">Japan</option>
                            <option value="jo">Jordan</option>
                            <option value="kz">Kazakhstan</option>
                            <option value="ke">Kenya</option>
                            <option value="ki">Kiribati</option>
                            <option value="kw">Kuwait</option>
                            <option value="kg">Kyrgyzstan</option>
                            <option value="la">Laos</option>
                            <option value="lv">Latvia</option>
                            <option value="ls">Lesotho</option>
                            <option value="lr">Liberia</option>
                            <option value="li">Liechtenstein</option>
                            <option value="lt">Lithuania</option>
                            <option value="lu">Luxembourg</option>
                            <option value="mo">Macau</option>
                            <option value="mk">Macedonia</option>
                            <option value="mg">Madagascar</option>
                            <option value="mw">Malawi</option>
                            <option value="my">Malaysia</option>
                            <option value="mv">Maldives</option>
                            <option value="ml">Mali</option>
                            <option value="mt">Malta</option>
                            <option value="mh">Marshall Islands</option>
                            <option value="mq">Martinique</option>
                            <option value="mr">Mauritania</option>
                            <option value="mu">Mauritius</option>
                            <option value="yt">Mayotte</option>
                            <option value="mx">Mexico</option>
                            <option value="fm">Micronesia, Federated States of</option>
                            <option value="md">Moldavia, Republic of</option>
                            <option value="mc">Monaco</option>
                            <option value="mn">Mongolia</option>
                            <option value="ms">Montserrat</option>
                            <option value="ma">Morocco</option>
                            <option value="mz">Mozambique</option>
                            <option value="mm">Myanmar</option>
                            <option value="na">Namibia</option>
                            <option value="nr">Nauru</option>
                            <option value="np">Nepal</option>
                            <option value="nl">Netherlands</option>
                            <option value="an">Netherlands Antilles</option>
                            <option value="nc">New Caledonia (French)</option>
                            <option value="nz">New Zealand</option>
                            <option value="ni">Nicaragua</option>
                            <option value="ne">Niger</option>
                            <option value="ng">Nigeria</option>
                            <option value="nu">Niue</option>
                            <option value="no">Norway</option>
                            <option value="om">Oman</option>
                            <option value="pk">Pakistan</option>
                            <option value="pw">Palau</option>
                            <option value="pa">Panama</option>
                            <option value="pg">Papua New Guinea</option>
                            <option value="py">Paraguay</option>
                            <option value="pe">Peru</option>
                            <option value="ph">Philippines</option>
                            <option value="pl">Poland</option>
                            <option value="pf">Polynesia (French)</option>
                            <option value="pt">Portugal</option>
                            <option value="pr">Puerto Rico</option>
                            <option value="qa">Qatar</option>
                            <option value="re">Reunion (French)</option>
                            <option value="ro">Romania</option>
                            <option value="ru">Russian Federation</option>
                            <option value="gs">S. Georgia and S. Sandwich Isls.</option>
                            <option value="sh">Saint Helena</option>
                            <option value="kn">Saint Kitts and Nevis Anguilla</option>
                            <option value="lc">Saint Lucia</option>
                            <option value="pm">Saint Pierre and Miquelon</option>
                            <option value="st">Saint Tome and Principe</option>
                            <option value="vc">Saint Vincent and Grenadines</option>
                            <option value="ws">Samoa</option>
                            <option value="sm">San Marino</option>
                            <option value="sa">Saudi Arabia</option>
                            <option value="sn">Senegal</option>
                            <option value="sc">Seychelles</option>
                            <option value="sl">Sierra Leone</option>
                            <option value="sg">Singapore</option>
                            <option value="sk">Slovak Republic</option>
                            <option value="si">Slovenia</option>
                            <option value="sb">Solomon Islands</option>
                            <option value="za">South Africa</option>
                            <option value="kr">South Korea</option>
                            <option value="es">Spain</option>
                            <option value="lk">Sri Lanka</option>
                            <option value="sr">Suriname</option>
                            <option value="sj">Svalbard and Jan Mayen Islands</option>
                            <option value="sz">Swaziland</option>
                            <option value="se">Sweden</option>
                            <option value="ch">Switzerland</option>
                            <option value="tw">Taiwan, Province of China</option>
                            <option value="tj">Tajikistan</option>
                            <option value="tz">Tanzania</option>
                            <option value="th">Thailand</option>
                            <option value="tg">Togo</option>
                            <option value="tk">Tokelau</option>
                            <option value="to">Tonga</option>
                            <option value="tt">Trinidad and Tobago</option>
                            <option value="tn">Tunisia</option>
                            <option value="tr">Turkey</option>
                            <option value="tm">Turkmenistan</option>
                            <option value="tc">Turks and Caicos Islands</option>
                            <option value="tv">Tuvalu</option>
                            <option value="ug">Uganda</option>
                            <option value="ua">Ukraine</option>
                            <option value="ae">United Arab Emirates</option>
                            <option value="gb">United Kingdom</option>
                            <option value="us">United States</option>
                            <option value="uy">Uruguay</option>
                            <option value="uz">Uzbekistan</option>
                            <option value="vu">Vanuatu</option>
                            <option value="va">Vatican City State</option>
                            <option value="ve">Venezuela</option>
                            <option value="vg">Virgin Islands (British)</option>
                            <option value="vi">Virgin Islands (USA)</option>
                            <option value="wf">Wallis and Futuna Islands</option>
                            <option value="eh">Western Sahara</option>
                            <option value="zm">Zambia</option>
                        </select>
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>First Name</p>
                        <input type="text" name="text6" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Last Name</p>
                        <input type="text" name="text7" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Company/Organiztion</p>
                        <input type="text" name="text8" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Business Phone Number</p>
                        <input type="text" name="text9" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Alt Phone Number</p>
                        <input type="text" name="text10" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Address Line 1</p>
                        <input type="text" name="text11" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Address line 2 (Optional)</p>
                        <input type="text" name="text12" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>City</p>
                        <input type="text" name="text13" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Zip/PostalCode</p>
                        <input type="text" name="text14" class="form-control" required />
                    </div>
                    <div class="col-md-6 mt-3">
                        <p>Website (Optional)</p>
                        <input type="text" name="text15" class="form-control" required />
                    </div>

                    <div class="col-md-6 form-group mt-5">
                        <button type="submit" class="btn btn-default text-dark" style="background: white">Request Free Consultation</button>
                    </div>
                </div>
            </div>
        </section>
    </form>

@endsection
@push('script')
    <script>
        $(function() {
            setTimeout(function() {
                $('.fly-in-text').removeClass('hidden');
            }, 500);
        })();
    </script>

@endpush