Current File : /home/itiffy/public_html/resources/views/frontend/dedicated-hire.blade.php
@extends('frontend.layouts.master')
@section('content') 
<!-- BREADCRUMB SECTION -->
<div class="breadcrumb-box">
  <ol class="breadcrumb container">
    <li class="breadcrumb-item"><a href="{{ route('home') }}"><i class="fa fa-home" aria-hidden="true"></i></a></li>
    <li class="breadcrumb-item active">Dedicated Hire</li>
  </ol>
</div>
<!-- /BREADCRUMB SECTION --> 
<!-- CONTENT SECTION -->
<div class="content-section"> 
  <!-- Section01 -->
  <div class="dedicated-hire-section-01">
    <h2>DEDICATED HIRE</h2>
    <h4>TEAM WORK MAKES DREAM WORK!</h4>
    <p>Your dream team doesn't have to be your in-house team. We work long hour so you dont have to.</p>
  </div>
  <!-- /Section01 --> 
  <!-- Section02 -->
  <div class="dedicated-hire-section-02" id="parentHorizontalTab">
    <ul class="resp-tabs-list hire-tab">
      <li class="web-designer-bg">Designer</li>
      <li class="web-developer-bg">Web Developer</li>
      <li class="apps-developer-bg">Apps Developer</li>
      <li class="inbound-agent-bg">Inbound Agent</li>
      <li class="backoffice-assistant-bg">Backoffice Assistant</li>
      <li class="content-writer-bg">Full Stack Developer</li>
    </ul>
    <div class="resp-tabs-container hire-tab">
      <div class="web-designer-bg">
        <div class="container">
          <div class="row">
            <div class="col-sm-5"><img src="{{ url('public/images') }}/dedicated-hire-img-01.png" alt=""></div>
            <div class="col-sm-7">
              <h3>Designer</h3>
              <h6>specialized, dedicated and trained resources</h6>
              <div class="content">
                <div class="row grid-divider">
                  <div class="col-sm-7">
                    <div class="col-padding">
                      <p>Who does your Art Work?<br>
                        We boast of a team of some of the best designers in town."<br>
                        We can design anything, and fast too.</p>
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <div class="col-padding text-center">
                      <div class="price-txt">$15/<span>Hour</span><small>Rates are  in USD</small></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btn-hire-now"><a href="javascript:void(0)" id="designer" price="15">Hire Now</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="web-developer-bg">
        <div class="container">
          <div class="row">
            <div class="col-sm-5"><img src="{{ url('public/images') }}/dedicated-hire-img-02.png" alt=""></div>
            <div class="col-sm-7">
              <h3>Web Developer</h3>
              <h6>specialized, dedicated and trained resources</h6>
              <div class="content">
                <div class="row grid-divider">
                  <div class="col-sm-7">
                    <div class="col-padding">
                      <p>Our experienced programmers can develop any idea into reality and make it stand out from the crowd. We speak the language PHP, ASP.net, HTML, Ruby on Rails, JavaScript, CSS, Perl, Python, J-Query, Flash, custom API integration, etc</p>
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <div class="col-padding text-center">
                      <div class="price-txt">$15/<span>Hour</span><small>Rates are  in USD</small></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btn-hire-now"><a href="javascript:void(0)" id="developer" price="15">Hire Now</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="apps-developer-bg">
        <div class="container">
          <div class="row">
            <div class="col-sm-5"><img src="{{ url('public/images') }}/dedicated-hire-img-03.png" alt=""></div>
            <div class="col-sm-7">
              <h3>Mobile App Developer</h3>
              <h6>specialized, dedicated and trained resources</h6>
              <div class="content">
                <div class="row grid-divider">
                  <div class="col-sm-7">
                    <div class="col-padding">
                      <p>Mobile app is the way to go. Hire a Dedicated App developer. Perfect if you want to develop an application at your pace or would like a dedicated resource to work on your existing project or add additional features on a project you/we are working on.</p>
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <div class="col-padding text-center">
                      <div class="price-txt">$30/<span>Hour</span><small>Rates are  in USD</small></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btn-hire-now"><a href="javascript:void(0)" id="mobile_app_developer" price="30">Hire Now</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="inbound-agent-bg">
        <div class="container">
          <div class="row">
            <div class="col-sm-5"><img src="{{ url('public/images') }}/dedicated-hire-img-04.png" alt=""></div>
            <div class="col-sm-7">
              <h3>Inbound Agent</h3>
              <h6>specialized, dedicated and trained resources</h6>
              <div class="content">
                <div class="row grid-divider">
                  <div class="col-sm-7">
                    <div class="col-padding">
                      <p>Provide front-line telephone, e-mail, live chat, or social media, ensuring quick and optimal outcomes. Our employees are trained to understand the importance of good customer service.</p>
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <div class="col-padding text-center">
                      <div class="price-txt">$10/<span>Hour</span><small>Rates are  in USD</small></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btn-hire-now"><a href="javascript:void(0)" id="inbound_agent" price="10">Hire Now</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="backoffice-assistant-bg">
        <div class="container">
          <div class="row">
            <div class="col-sm-5"><img src="{{ url('public/images') }}/dedicated-hire-img-05.png" alt=""></div>
            <div class="col-sm-7">
              <h3>Back Office Assistant</h3>
              <h6>specialized, dedicated and trained resources</h6>
              <div class="content">
                <div class="row grid-divider">
                  <div class="col-sm-7">
                    <div class="col-padding">
                      <p>Hire an Offline operator capable of data entry, data conversion, data processing, data analytic, data mining, data capturing with proficiency in MS Word, Excel, Access, PDFs & websites CMS like WordPress, Prestashop, Magento, Drupal, Joomla, Big Commerce and admin related work.</p>
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <div class="col-padding text-center">
                      <div class="price-txt">$10/<span>Hour</span><small>Rates are  in USD</small></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="btn-hire-now"><a href="javascript:void(0)" id="back_office_assistant" price="10">Hire Now</a></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-writer-bg">
        <div class="container">
          <div class="row">
            <div class="col-sm-5"><img src="{{ url('public/images') }}/dedicated-hire-img-06.png" alt=""></div>
            <div class="col-sm-7">
              <h3>Full Stack Developer</h3>
              <h6>specialized, dedicated and trained resources</h6>
              <div class="content">
                <div class="row grid-divider">
                  <div class="col-sm-7">
                    <div class="col-padding">
                      <p>Hence a full stack developer can develop strategies for every part of the web development process. He develops this deep knowledge of the systems through years of experience in working in this field.</p>
                    </div>
                  </div>
                  <div class="col-sm-5">
                    <div class="col-padding text-center"> <div class="price-txt">$30/<span>Hour</span><small>Rates are  in USD</small></div> </div>
                  </div>
                </div>
              </div>
              <div class="btn-hire-now"><a href="javascript:void(0)" id="full_stack_developer" price="30">Hire Now</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- /Section02 --> 
  <!-- Section03 -->
  <div id="step2" class="dedicated-hire-section-03" style="display:none;">
    <div class="container">
      <div class="row">
        <div class="col-sm-6">You are looking for a <span id="designation">designer</span></div>
        <div class="col-sm-2">
          <input type="radio" value="1" id="test1" name="radio-group" checked>
          <label for="test1">Hourly</label>
        </div>
        <div class="col-sm-2">
          <input type="radio" value="2" id="test2" name="radio-group">
          <label for="test2">Monthly</label>
        </div>
        <div class="col-sm-2">
          <div class="btn btn-next"><a href="javascript:void(0)">Next</a></div>
        </div>
      </div>
    </div>
  </div>
  <!-- /Section03 --> 
  <!-- Section04 -->
  <div id="step3" class="dedicated-hire-section-04" style="display:none;">
    <form action="#" method="post" id="proceed_form" name="proceed_form" onsubmit="return false">
      <div class="container">
        <div class="row">
          <div class="col-sm-3">
            <select name="hires_for" id="hires_for">
              <option value="designer">Designer</option>
              <option value="developer">Web Developer</option>
              <option value="mobile_app_developer">Apps Developer</option>
              <option value="inbound_agent">Inbound Agent</option>
              <option value="back_office_assistant">Backoffice Assistant</option>
              <option value="full_stack_developer">Full Stack Developer</option>
            </select>
          </div>
          <div class="col-sm-4">
            <input name="how_many_hour_or_month" id="how_many_hour_or_month" type="text" placeholder="Enter hours here">
          </div>
          <div class="col-sm-3">
            <select name="currency_code" id="currency_code" class="form-control">
              <!-- <option value="">Select Currency</option> -->
              <option value="AUD">Australian Dollar</option>
              <option value="BRL">Brazilian Real </option>
              <option value="CAD">Canadian Dollar</option>
              <option value="CZK">Czech Koruna</option>
              <option value="DKK">Danish Krone</option>
              <option value="EUR">Euro</option>
              <option value="HKD">Hong Kong Dollar</option>
              <option value="HUF">Hungarian Forint </option>
              <option value="ILS">Israeli New Sheqel</option>
              <option value="JPY">Japanese Yen</option>
              <option value="MYR">Malaysian Ringgit</option>
              <option value="MXN">Mexican Peso</option>
              <option value="NOK">Norwegian Krone</option>
              <option value="NZD">New Zealand Dollar</option>
              <option value="PHP">Philippine Peso</option>
              <option value="PLN">Polish Zloty</option>
              <option value="GBP">Pound Sterling</option>
              <option value="SGD">Singapore Dollar</option>
              <option value="SEK">Swedish Krona</option>
              <option value="CHF">Swiss Franc</option>
              <option value="TWD">Taiwan New Dollar</option>
              <option value="THB">Thai Baht</option>
              <option value="TRY">Turkish Lira</option>
              <option value="USD" SELECTED="YES">U.S. Dollar</option>
            </select>
          </div>
          <div class="col-sm-2">
            <input name="" type="submit" class="btn btn-pay" value="Proceed">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12 text-right" id="show_price">Total Cost : <strong>USD 0</strong></div>
        </div>
      </div>
    </form>
  </div>
  <!-- /Section04 --> 
  <!-- Section05-->
  <div id="step4" class="dedicated-hire-section-05" style="display:none;">
    <form action="{{ route('payment-create') }}" method="post" id="pay_now_form" name="pay_now_form" onsubmit="return false">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
      <input name="token" id="token" type="hidden" value="" />
      <input name="price" id="price" type="hidden">
      <input name="hires_hour_or_month" id="hires_hour_or_month" type="hidden">
      <input name="how_many_hour_or_month" id="how_many_hour_or_month" type="hidden">
      <input name="hires_for" id="hires_for" type="hidden">
      <input name="currency_code" id="currency_code" type="hidden">
      <div class="container">
        <div class="row">
          <div class="col-sm-3">
            <input name="ccNo" id="ccNo" type="text" placeholder="Enter card number" autocomplete="off">
          </div>
          <div class="col-sm-3">
            <select id="expMonth" name="expMonth">
              <option value="">Select Month</option>
              <option value="01">01</option>
              <option value="02">02</option>
              <option value="03">03</option>
              <option value="04">04</option>
              <option value="05">05</option>
              <option value="06">06</option>
              <option value="07">07</option>
              <option value="08">08</option>
              <option value="09">09</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
          </div>
          <div class="col-sm-3">
            <select id="expYear" name="expYear">
              <option value="">Select Year</option>
              
                    @for($i=0;$i<21;$i++)
                    
              <option value="{{ date('Y')+$i }}">{{ date('Y')+$i }}</option>
              
                    @endfor
                  
            </select>
          </div>
          <div class="col-sm-3">
            <input name="cvv" id="cvv" type="text" placeholder="Enter cvv" autocomplete="off">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <input name="name" id="name" type="text" placeholder="Enter name"  autocomplete="off">
          </div>
          <div class="col-sm-3">
            <input name="address" id="address" type="text" placeholder="Enter Address" autocomplete="off">
          </div>
          <div class="col-sm-3">
            <input name="city" id="city" type="text" placeholder="Enter City"  autocomplete="off">
          </div>
          <div class="col-sm-3">
            <input name="state" id="state" type="text" placeholder="Enter state"  autocomplete="off">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-3">
            <select id="country" name="country" autocomplete="on">
              <option value="">Choose Country</option>
              <option value="IND">India</option>
              <option value="USA">United States</option>
              <option value="GBR">United Kingdom</option>
              <option value="CAN">Canada</option>
              <option value="AUS">Australia</option>
              <option disabled="">—</option>
              <option value="ALA">Åland Islands</option>
              <option value="AFG">Afghanistan</option>
              <option value="ALB">Albania</option>
              <option value="DZA">Algeria</option>
              <option value="ASM">American Samoa</option>
              <option value="AND">Andorra</option>
              <option value="AGO">Angola</option>
              <option value="AIA">Anguilla</option>
              <option value="ATA">Antarctica</option>
              <option value="ATG">Antigua and Barbuda</option>
              <option value="ARG">Argentina</option>
              <option value="ARM">Armenia</option>
              <option value="ABW">Aruba</option>
              <option value="AUS">Australia</option>
              <option value="AUT">Austria</option>
              <option value="AZE">Azerbaijan</option>
              <option value="BHS">Bahamas</option>
              <option value="BHR">Bahrain</option>
              <option value="BGD">Bangladesh</option>
              <option value="BRB">Barbados</option>
              <option value="BLR">Belarus</option>
              <option value="BEL">Belgium</option>
              <option value="BLZ">Belize</option>
              <option value="BEN">Benin</option>
              <option value="BMU">Bermuda</option>
              <option value="BTN">Bhutan</option>
              <option value="BOL">Bolivia</option>
              <option value="BES">Bonaire, Sint Eustatius and Saba</option>
              <option value="BIH">Bosnia and Herzegovina</option>
              <option value="BWA">Botswana</option>
              <option value="BVT">Bouvet Island</option>
              <option value="BRA">Brazil</option>
              <option value="IOT">British Indian Ocean Territory</option>
              <option value="BRN">Brunei Darussalam</option>
              <option value="BGR">Bulgaria</option>
              <option value="BFA">Burkina Faso</option>
              <option value="BDI">Burundi</option>
              <option value="KHM">Cambodia</option>
              <option value="CMR">Cameroon</option>
              <option value="CAN">Canada</option>
              <option value="CPV">Cape Verde</option>
              <option value="CYM">Cayman Islands</option>
              <option value="CAF">Central African Republic</option>
              <option value="TCD">Chad</option>
              <option value="CHL">Chile</option>
              <option value="CHN">China</option>
              <option value="CXR">Christmas Island</option>
              <option value="CCK">Cocos (Keeling) Islands</option>
              <option value="COL">Colombia</option>
              <option value="COM">Comoros</option>
              <option value="COG">Congo</option>
              <option value="COD">Congo, the Democratic Republic of the</option>
              <option value="COK">Cook Islands</option>
              <option value="CRI">Costa Rica</option>
              <option value="CIV">Cote D'ivoire</option>
              <option value="HRV">Croatia (Hrvatska)</option>
              <option value="CYP">Cyprus</option>
              <option value="CZE">Czech Republic</option>
              <option value="DNK">Denmark</option>
              <option value="DJI">Djibouti</option>
              <option value="DMA">Dominica</option>
              <option value="DOM">Dominican Republic</option>
              <option value="ECU">Ecuador</option>
              <option value="EGY">Egypt</option>
              <option value="SLV">El Salvador</option>
              <option value="GNQ">Equatorial Guinea</option>
              <option value="ERI">Eritrea</option>
              <option value="EST">Estonia</option>
              <option value="ETH">Ethiopia</option>
              <option value="FLK">Falkland Islands (Malvinas)</option>
              <option value="FRO">Faroe Islands</option>
              <option value="FJI">Fiji</option>
              <option value="FIN">Finland</option>
              <option value="FRA">France</option>
              <option value="FXX">France, Metropolitan</option>
              <option value="GUF">French Guiana</option>
              <option value="PYF">French Polynesia</option>
              <option value="ATF">French Southern Territories</option>
              <option value="GAB">Gabon</option>
              <option value="GMB">Gambia</option>
              <option value="GEO">Georgia</option>
              <option value="DEU">Germany</option>
              <option value="GHA">Ghana</option>
              <option value="GIB">Gibraltar</option>
              <option value="GRC">Greece</option>
              <option value="GRL">Greenland</option>
              <option value="GRD">Grenada</option>
              <option value="GLP">Guadeloupe</option>
              <option value="GUM">Guam</option>
              <option value="GTM">Guatemala</option>
              <option value="GGY">Guernsey</option>
              <option value="GIN">Guinea</option>
              <option value="GNB">Guinea-Bissau</option>
              <option value="GUY">Guyana</option>
              <option value="HTI">Haiti</option>
              <option value="HMD">Heard Island and Mcdonald Islands</option>
              <option value="HND">Honduras</option>
              <option value="HKG">Hong Kong</option>
              <option value="HUN">Hungary</option>
              <option value="ISL">Iceland</option>
              <option value="IND">India</option>
              <option value="IDN">Indonesia</option>
              <option value="IRQ">Iraq</option>
              <option value="IRL">Ireland</option>
              <option value="IMN">Isle of Man</option>
              <option value="ISR">Israel</option>
              <option value="ITA">Italy</option>
              <option value="JAM">Jamaica</option>
              <option value="JPN">Japan</option>
              <option value="JEY">Jersey</option>
              <option value="JOR">Jordan</option>
              <option value="KAZ">Kazakhstan</option>
              <option value="KEN">Kenya</option>
              <option value="KIR">Kiribati</option>
              <option value="KOR">Korea, Republic of</option>
              <option value="KWT">Kuwait</option>
              <option value="KGZ">Kyrgyzstan</option>
              <option value="LAO">Lao People's Democratic Republic</option>
              <option value="LVA">Latvia</option>
              <option value="LBN">Lebanon</option>
              <option value="LSO">Lesotho</option>
              <option value="LBR">Liberia</option>
              <option value="LBY">Libyan Arab Jamahiriya</option>
              <option value="LIE">Liechtenstein</option>
              <option value="LTU">Lithuania</option>
              <option value="LUX">Luxembourg</option>
              <option value="MAC">Macao</option>
              <option value="MKD">Macedonia</option>
              <option value="MDG">Madagascar</option>
              <option value="MWI">Malawi</option>
              <option value="MYS">Malaysia</option>
              <option value="MDV">Maldives</option>
              <option value="MLI">Mali</option>
              <option value="MLT">Malta</option>
              <option value="MHL">Marshall Islands</option>
              <option value="MTQ">Martinique</option>
              <option value="MRT">Mauritania</option>
              <option value="MUS">Mauritius</option>
              <option value="MYT">Mayotte</option>
              <option value="MEX">Mexico</option>
              <option value="FSM">Micronesia, Federated States of</option>
              <option value="MDA">Moldova, Republic of</option>
              <option value="MCO">Monaco</option>
              <option value="MNG">Mongolia</option>
              <option value="MNE">Montenegro</option>
              <option value="MSR">Montserrat</option>
              <option value="MAR">Morocco</option>
              <option value="MOZ">Mozambique</option>
              <option value="MMR">Myanmar</option>
              <option value="NAM">Namibia</option>
              <option value="NRU">Nauru</option>
              <option value="NPL">Nepal</option>
              <option value="NLD">Netherlands</option>
              <option value="ANT">Netherlands Antilles</option>
              <option value="NCL">New Caledonia</option>
              <option value="NZL">New Zealand</option>
              <option value="NIC">Nicaragua</option>
              <option value="NER">Niger</option>
              <option value="NGA">Nigeria</option>
              <option value="NIU">Niue</option>
              <option value="NFK">Norfolk Island</option>
              <option value="MNP">Northern Mariana Islands</option>
              <option value="NOR">Norway</option>
              <option value="OMN">Oman</option>
              <option value="PAK">Pakistan</option>
              <option value="PLW">Palau</option>
              <option value="PSE">Palestinian Territory, Occupied</option>
              <option value="PAN">Panama</option>
              <option value="PNG">Papua New Guinea</option>
              <option value="PRY">Paraguay</option>
              <option value="PER">Peru</option>
              <option value="PHL">Philippines</option>
              <option value="PCN">Pitcairn</option>
              <option value="POL">Poland</option>
              <option value="PRT">Portugal</option>
              <option value="PRI">Puerto Rico</option>
              <option value="QAT">Qatar</option>
              <option value="REU">Reunion</option>
              <option value="ROU">Romania</option>
              <option value="RUS">Russian Federation</option>
              <option value="RWA">Rwanda</option>
              <option value="SHN">Saint Helena</option>
              <option value="KNA">Saint Kitts and Nevis</option>
              <option value="LCA">Saint Lucia</option>
              <option value="SPM">Saint Pierre and Miquelon</option>
              <option value="VCT">Saint Vincent and the Grenadines</option>
              <option value="WSM">Samoa</option>
              <option value="SMR">San Marino</option>
              <option value="STP">Sao Tome and Principe</option>
              <option value="SAU">Saudi Arabia</option>
              <option value="SEN">Senegal</option>
              <option value="SRB">Serbia</option>
              <option value="SCG">Serbia and Montenegro</option>
              <option value="SYC">Seychelles</option>
              <option value="SLE">Sierra Leone</option>
              <option value="SGP">Singapore</option>
              <option value="SVK">Slovakia</option>
              <option value="SVN">Slovenia</option>
              <option value="SLB">Solomon Islands</option>
              <option value="SOM">Somalia</option>
              <option value="ZAF">South Africa</option>
              <option value="SGS">South Georgia and the South Sandwich Islands</option>
              <option value="ESP">Spain</option>
              <option value="LKA">Sri Lanka</option>
              <option value="SUR">Suriname</option>
              <option value="SJM">Svalbard and Jan Mayen Islands</option>
              <option value="SWZ">Swaziland</option>
              <option value="SWE">Sweden</option>
              <option value="CHE">Switzerland</option>
              <option value="TWN">Taiwan</option>
              <option value="TJK">Tajikistan</option>
              <option value="TZA">Tanzania, United Republic of</option>
              <option value="THA">Thailand</option>
              <option value="TLS">Timor-Leste</option>
              <option value="TGO">Togo</option>
              <option value="TKL">Tokelau</option>
              <option value="TON">Tonga</option>
              <option value="TTO">Trinidad and Tobago</option>
              <option value="TUN">Tunisia</option>
              <option value="TUR">Turkey</option>
              <option value="TKM">Turkmenistan</option>
              <option value="TCA">Turks and Caicos Islands</option>
              <option value="TUV">Tuvalu</option>
              <option value="UGA">Uganda</option>
              <option value="UKR">Ukraine</option>
              <option value="ARE">United Arab Emirates</option>
              <option value="GBR">United Kingdom</option>
              <option value="USA">United States</option>
              <option value="UMI">United States Minor Outlying Islands</option>
              <option value="URY">Uruguay</option>
              <option value="UZB">Uzbekistan</option>
              <option value="VUT">Vanuatu</option>
              <option value="VAT">Vatican City State (Holy See)</option>
              <option value="VEN">Venezuela</option>
              <option value="VNM">Viet Nam</option>
              <option value="VGB">Virgin Islands, British</option>
              <option value="VIR">Virgin Islands, U.S.</option>
              <option value="WLF">Wallis and Futuna Islands</option>
              <option value="ESH">Western Sahara</option>
              <option value="YEM">Yemen</option>
              <option value="YUG">Yugoslavia</option>
              <option value="ZAR">Zaire</option>
              <option value="ZMB">Zambia</option>
              <option value="ZWE">Zimbabwe</option>
            </select>
          </div>
          <div class="col-sm-3">
            <input name="zip_code" id="zip_code" type="text" placeholder="Enter Zipcode"  autocomplete="off">
          </div>
          <div class="col-sm-3">
            <input name="phone_number" id="phone_number" type="text" placeholder="Enter Phone Number"  autocomplete="off">
          </div>
          <div class="col-sm-3">
            <input name="email" id="email" type="text" placeholder="Enter Email"  autocomplete="off">
          </div>
        </div>
        <div class="row">
          <div class="col-sm-4"></div>
          <div class="col-sm-4">
            <div class="loader"><img src="{{ url('public/images/') }}/loader2.png"></div>
            <input name="" type="submit" class="btn btn-pay" value="Pay Now">
          </div>
          <div class="col-sm-4"></div>
        </div>
        <span id="msg"></span> </div>
    </form>
  </div>
  <!--/Section5--> 
</div>
<!-- /CONTENT SECTION --> 
@endsection
@section('javascript') 
<script type="text/javascript" src="https://www.2checkout.com/checkout/api/2co.min.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
  //Horizontal Tab
  $('#parentHorizontalTab').easyResponsiveTabs({
    type: 'default', //Types: default, vertical, accordion
    width: 'auto', //auto or any width like 600px
    fit: true, // 100% fit in a container
    tabidentify: 'hire-tab', // The tab groups identifier
    activate: function(event) { // Callback function if tab is switched
      $('.dedicated-hire-section-03').hide();
      $('.dedicated-hire-section-04').hide();
      var $tab = $(this);
      var $info = $('#nested-tabInfo');
      var $name = $('span', $info);
      $name.text($tab.text());
      $info.show();
    }
  });
  $(".btn-hire-now").click(function(){
    var degination_array= {designer:"designer", developer:"web developer", mobile_app_developer:"mobile app developer",inbound_agent:"inbound agent",
    back_office_assistant:"back office assistant",full_stack_developer:"full stack developer"};
    var designation=$(this).find('a').prop('id');
    $("#designation").html(degination_array[designation]);
    $("#pay_now_form #hires_for").val(toUpper(degination_array[designation]));
    $("#hires_for option[value='"+designation +"']").prop('selected', true);
    $('#step2').fadeIn(500);
    $('#step3').hide();
    $('#step4').hide();
    $("html, body").animate({ scrollTop: 800 }, 1000);
  });
  $(".btn-next").on('click',function(){
    $("#hires_hour_or_month").val($('input[name=radio-group]:checked').val());
    if($("#hires_hour_or_month").val()==1){
      $("#how_many_hour_or_month").attr('placeholder','Enter hour(s) here');
    }else{
      $("#how_many_hour_or_month").attr('placeholder','Enter month(s) here');
    }
    $("#how_many_hour_or_month").val('');
    $("#show_price").html("Total Cost : <strong>"+$('#currency_code').val()+" 0</strong>");
    $('#step2').hide();
    $('#step3').fadeIn(500);
    $('#step4').hide();
  });

  $("#proceed_form").validate({
      onkeyup: function(element) { $(element).valid(); },
      onfocusout: function(element) { $(element).valid(); },
       rules: {
                how_many_hour_or_month: {
                  required:true,
                  digits:true
                }
            },
        submitHandler: function(form) {
          //$("#pay_now_form #hires_for").val($("#proceed_form #hires_for").val());
          $("#pay_now_form #currency_code").val($("#proceed_form #currency_code").val());
          $("#pay_now_form #how_many_hour_or_month").val($("#proceed_form #how_many_hour_or_month").val());
          $('#step2').hide();
          $('#step3').hide();
          $('#step4').fadeIn(500);
        }                   
       
    });

  $("#step3").on('change keyup','#hires_for,#how_many_hour_or_month,#currency_code',function(){
    var price_array_hour= {designer:"15", developer:"15", mobile_app_developer:"30",inbound_agent:"10",back_office_assistant:"10",full_stack_developer:"30"};
    var price_array_month= {designer:"2000", developer:"2000", mobile_app_developer:"4000",inbound_agent:"1200",back_office_assistant:"1200",full_stack_developer:"4000"};
    var how_many_hour_or_month=$("#how_many_hour_or_month").val();
    var price=0;
    if($('#hires_hour_or_month').val()==1){
      var price=price_array_hour[$("#hires_for").val()];
    }else{
      var price=price_array_month[$("#hires_for").val()];
    }  
    var total_usd_price=price*how_many_hour_or_month;
    var currency_code=$('#currency_code').val();
    var currency_input = total_usd_price;
    var currency_from = "USD"; // currency codes : http://en.wikipedia.org/wiki/ISO_4217
    var currency_to = currency_code;
    var new_price=CurrencyConvetor(currency_input,currency_from,currency_to);
    if($(this).attr('id')=='currency_code'){
      if(new_price==''){
        alert("Currently currency change is not avaiable.");
        $(this).val("USD");
      }else{
      var price_by_currency=parseFloat(new_price).toFixed(2);
      $("#price").val(price_by_currency);

      $("#show_price").html("Total Cost : <strong>"+currency_code+" "+ price_by_currency+"</strong>");
      }
      
    }else{
      if(new_price==''){
        $("#price").val(total_usd_price);
        $("#show_price").html("Total Cost : <strong>"+currency_code+" "+ total_usd_price+"</strong>");
      }else{
      var price_by_currency=parseFloat(new_price).toFixed(2);
      $("#price").val(price_by_currency);

      $("#show_price").html("Total Cost : <strong>"+currency_code+" "+ price_by_currency+"</strong>");
      }
    }
      
    });

    //TCO.loadPubKey('production');
    TCO.loadPubKey('{{ $gateway_credentials['mode'] }}');

    $("#pay_now_form").validate({
      onkeyup: function(element) { $(element).valid(); },
      onfocusout: function(element) { $(element).valid(); },
       rules: {
                how_many_hour_or_month: "required",
                ccNo:"required",
                expMonth:"required",
                expYear:"required",
                cvv:"required",
                name:"required",
                address:"required",
                city:"required",
                state:"required",
                country:"required",
                zip_code:{
                            required: true,
                            number:true
                        },
                email: {
                            required: true,
                            email:true
                        },
                phone_number:{
                            required: true,
                            number:true
                        }      
            },
        submitHandler: function(form) {
          $(".loader").show();
          $("#msg").html('');
            tokenRequest();
        }                   
       
    });

    // Called when token created successfully.
  var successCallback = function(data) {
    var myForm = document.getElementById('pay_now_form');

    // Set the token as the value for the token input
    myForm.token.value = data.response.token.token;

    // IMPORTANT: Here we call `submit()` on the form element directly instead of using jQuery to prevent and infinite token request loop.
    myForm.submit();
  };

  // Called when token creation fails.
  var errorCallback = function(data) {
    if (data.errorCode === 200) {

    } else {
      $("#msg").html('<div class="alert alert-danger" role="alert"><a href="#" class="close" data-dismiss="alert">&times;</a>Error <i class="glyphicon glyphicon-thumbs-up"></i>'+data.errorMsg+'</div>');
      $(".loader").hide();
    }
  };

  var tokenRequest = function() {
    // Setup token request arguments
    var args = {
      sellerId: "{{ $gateway_credentials['sellerId'] }}",
      publishableKey: "{{ $gateway_credentials['publishableKey'] }}",
      ccNo: $("#ccNo").val(),
      cvv: $("#cvv").val(),
      expMonth: $("#expMonth").val(),
      expYear: $("#expYear").val()
    };

    // Make the token request
    TCO.requestToken(successCallback, errorCallback, args);
  };


  });
</script> 
<script>
function CurrencyConvetor(amount, from, to) {

    var price = '';
    convert_from_to=from+"_"+to;
    var url = "https://free.currencyconverterapi.com/api/v3/convert?q="+convert_from_to;
    $.ajaxSetup({async: false});
    $.get(url,
        function (data) {
            if(data.results){
               price=amount*data.results[convert_from_to]['val'];
            }else{
              alert("error in convert price");
            }
    });
    return price;
    
}
function toUpper(str) {
return str
    .toLowerCase()
    .split(' ')
    .map(function(word) {
        return word[0].toUpperCase() + word.substr(1);
    })
    .join(' ');
 }
</script> 
@stop