@extends('master')

@section('title','Contact')

@section('meta_description','Get in touch with us today.')


@section('content')
<div class="contact-page">
    <div class="mobile-menu-container fixed mobile transparent">
        <a href="#" class="open-mobile-menu">
            <span></span>
        </a>
    </div>

    <section class="page-header header-style-5 collapse-circles">
        <div class="title">
            <h2>Get in Touch</h2>
            <h1>Let's work together <span>to create game-changing experiences that will make your brand stand out!</span></h1>
        </div>
        <ul class="social fixed desktop">
    <li>
        <a href="https://fb.me/upbound.studio" target="_blank">
            <i class="fa fa-facebook"></i>
        </a>
    </li>
    <li>
        <a href="#" target="_blank">
            <i class="fa fa-twitter"></i>
        </a>
    </li>
    <li>
        <a href="https://www.instagram.com/upbound.studio/" target="_blank">
            <i class="fa fa-instagram"></i>
        </a>
    </li>
    <li>
        <a href="https://www.behance.net/jackwisley" target="_blank">
            <i class="fa fa-behance"></i>
        </a>
    </li>
    <li>
        <a href="https://www.youtube.com/channel/UCrww2Wj4P2QVWPEfjcFAiow" target="_blank">
            <i class="fa fa-youtube-play"></i>
        </a>
    </li>
    <li>
        <a href="https://www.linkedin.com/company/upbound-studio/" target="_blank">
            <i class="fa fa-linkedin"></i>
        </a>
    </li>
</ul>        <a href="#" class="scroll-down"></a>
    </section>

    <section class="locations scroll-to">
        <div class="container">
            <div class="details collapse">
                <div class="animation-sequence-1">
                    <h2>Our Locations</h2>
                </div>

                <ul class="animation-sequence-2">
                    @foreach($contactArr as $key => $contact)
                    <li>
                        <div>
                            <h3 class="countryClass" id="{{$loop->iteration}}"  data-country="sa">{{$contact->country}}</h3>
                        </div>
                        <div>
                            <h4><a href="tel:{{$contact->phone}}">{{$contact->country_code}} {{$contact->phone}}</a></h4>
                            <span>{{$contact->address}}</span>
                        </div>
                    </li>
                    @endforeach
                    

                </ul>

            </div>
            <div class="map collapse">
                @foreach($contactArr as $key => $contact)
              <div class="box-iframe" id="box{{$loop->iteration}}">
                 <iframe src="{{$contact->location}}" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
              </div>
                @endforeach

            
            </div>
            <a href="#" class="scroll-to-contact">Have an Idea? <span>Write to us</span><i></i></a>
        </div>
    </section>

            <section class="contact">
            <div class="animation-sequence-1">
                <h3>Lets Start</h3>
                <h2>How can we help you?</h2>
            </div>
            <form action="{{Route('message.save')}}" method="post" class="animation-sequence-2">
                @csrf
                <input type="hidden" name="validate_user" value="1" />
                <div class="full">
                    <input type="text" name="name" placeholder="Your name" />
                    <input type="email" name="email" placeholder="Email" />
                </div>
                <div class="full countries_parent_container">
                    <input type="hidden" name="code" />
<div class="countries-codes">
    <span class="selected toggle-codes">Please select</span>
    <ul>
        <li>
            <a href="#" data-value="+961">LB - 961</a>
        </li>
        <li>
            <a href="#" data-value="+1">US - 1</a>
        </li>
        <li>
            <a href="#" data-value="+1">CA - 1</a>
        </li>
        <li>
            <a href="#" data-value="+93">AF - 93</a>
        </li>
        <li>
            <a href="#" data-value="+355">AL - 355</a>
        </li>
        <li>
            <a href="#" data-value="+213">DZ - 213</a>
        </li>
        <li>
            <a href="#" data-value="+1">DS - 1</a>
        </li>
        <li>
            <a href="#" data-value="+376">AD - 376</a>
        </li>
        <li>
            <a href="#" data-value="+244">AO - 244</a>
        </li>
        <li>
            <a href="#" data-value="+54">AR - 54</a>
        </li>
        <li>
            <a href="#" data-value="+374">AM - 374</a>
        </li>
        <li>
            <a href="#" data-value="+61">AU - 61</a>
        </li>
        <li>
            <a href="#" data-value="+43">AT - 43</a>
        </li>
        <li>
            <a href="#" data-value="+994">AZ - 994</a>
        </li>
        <li>
            <a href="#" data-value="+1">BS - 1</a>
        </li>
        <li>
            <a href="#" data-value="+973">BH - 973</a>
        </li>
        <li>
            <a href="#" data-value="+880">BD - 880</a>
        </li>
        <li>
            <a href="#" data-value="+1">BB - 1</a>
        </li>
        <li>
            <a href="#" data-value="+375">BY - 375</a>
        </li>
        <li>
            <a href="#" data-value="+32">BE - 32</a>
        </li>
        <li>
            <a href="#" data-value="+501">BZ - 501</a>
        </li>
        <li>
            <a href="#" data-value="+229">BJ - 229</a>
        </li>
        <li>
            <a href="#" data-value="+1">BM - 1</a>
        </li>
        <li>
            <a href="#" data-value="+975">BT - 975</a>
        </li>
        <li>
            <a href="#" data-value="+591">BO - 591</a>
        </li>
        <li>
            <a href="#" data-value="+387">BA - 387</a>
        </li>
        <li>
            <a href="#" data-value="+267">BW - 267</a>
        </li>
        <li>
            <a href="#" data-value="+55">BR - 55</a>
        </li>
        <li>
            <a href="#" data-value="+673">BN - 673</a>
        </li>
        <li>
            <a href="#" data-value="+359">BG - 359</a>
        </li>
        <li>
            <a href="#" data-value="+226">BF - 226</a>
        </li>
        <li>
            <a href="#" data-value="+257">BI - 257</a>
        </li>
        <li>
            <a href="#" data-value="+855">KH - 855</a>
        </li>
        <li>
            <a href="#" data-value="+237">CM - 237</a>
        </li>
        <li>
            <a href="#" data-value="+238">CV - 238</a>
        </li>
        <li>
            <a href="#" data-value="+1">KY - 1</a>
        </li>
        <li>
            <a href="#" data-value="+236">CF - 236</a>
        </li>
        <li>
            <a href="#" data-value="+235">TD - 235</a>
        </li>
        <li>
            <a href="#" data-value="+56">CL - 56</a>
        </li>
        <li>
            <a href="#" data-value="+86">CN - 86</a>
        </li>
        <li>
            <a href="#" data-value="+57">CO - 57</a>
        </li>
        <li>
            <a href="#" data-value="+269">KM - 269</a>
        </li>
        <li>
            <a href="#" data-value="+242">CG - 242</a>
        </li>
        <li>
            <a href="#" data-value="+506">CR - 506</a>
        </li>
        <li>
            <a href="#" data-value="+385">HR - 385</a>
        </li>
        <li>
            <a href="#" data-value="+53">CU - 53</a>
        </li>
        <li>
            <a href="#" data-value="+357">CY - 357</a>
        </li>
        <li>
            <a href="#" data-value="+420">CZ - 420</a>
        </li>
        <li>
            <a href="#" data-value="+45">DK - 45</a>
        </li>
        <li>
            <a href="#" data-value="+253">DJ - 253</a>
        </li>
        <li>
            <a href="#" data-value="+1">DM - 1</a>
        </li>
        <li>
            <a href="#" data-value="+809">DO - 809</a>
        </li>
        <li>
            <a href="#" data-value="+593">EC - 593</a>
        </li>
        <li>
            <a href="#" data-value="+20">EG - 20</a>
        </li>
        <li>
            <a href="#" data-value="+503">SV - 503</a>
        </li>
        <li>
            <a href="#" data-value="+240">GQ - 240</a>
        </li>
        <li>
            <a href="#" data-value="+291">ER - 291</a>
        </li>
        <li>
            <a href="#" data-value="+372">EE - 372</a>
        </li>
        <li>
            <a href="#" data-value="+251">ET - 251</a>
        </li>
        <li>
            <a href="#" data-value="+500">FK - 500</a>
        </li>
        <li>
            <a href="#" data-value="+298">FO - 298</a>
        </li>
        <li>
            <a href="#" data-value="+679">FJ - 679</a>
        </li>
        <li>
            <a href="#" data-value="+358">FI - 358</a>
        </li>
        <li>
            <a href="#" data-value="+33">FR - 33</a>
        </li>
        <li>
            <a href="#" data-value="+594">GF - 594</a>
        </li>
        <li>
            <a href="#" data-value="+689">PF - 689</a>
        </li>
        <li>
            <a href="#" data-value="+241">GA - 241</a>
        </li>
        <li>
            <a href="#" data-value="+220">GM - 220</a>
        </li>
        <li>
            <a href="#" data-value="+995">GE - 995</a>
        </li>
        <li>
            <a href="#" data-value="+49">DE - 49</a>
        </li>
        <li>
            <a href="#" data-value="+233">GH - 233</a>
        </li>
        <li>
            <a href="#" data-value="+350">GI - 350</a>
        </li>
        <li>
            <a href="#" data-value="+30">GR - 30</a>
        </li>
        <li>
            <a href="#" data-value="+299">GL - 299</a>
        </li>
        <li>
            <a href="#" data-value="+1">GD - 1</a>
        </li>
        <li>
            <a href="#" data-value="+590">GP - 590</a>
        </li>
        <li>
            <a href="#" data-value="+1">GU - 1</a>
        </li>
        <li>
            <a href="#" data-value="+502">GT - 502</a>
        </li>
        <li>
            <a href="#" data-value="+224">GN - 224</a>
        </li>
        <li>
            <a href="#" data-value="+245">GW - 245</a>
        </li>
        <li>
            <a href="#" data-value="+592">GY - 592</a>
        </li>
        <li>
            <a href="#" data-value="+509">HT - 509</a>
        </li>
        <li>
            <a href="#" data-value="+504">HN - 504</a>
        </li>
        <li>
            <a href="#" data-value="+852">HK - 852</a>
        </li>
        <li>
            <a href="#" data-value="+36">HU - 36</a>
        </li>
        <li>
            <a href="#" data-value="+354">IS - 354</a>
        </li>
        <li>
            <a href="#" data-value="+91">IN - 91</a>
        </li>
        <li>
            <a href="#" data-value="+62">ID - 62</a>
        </li>
        <li>
            <a href="#" data-value="+98">IR - 98</a>
        </li>
        <li>
            <a href="#" data-value="+964">IQ - 964</a>
        </li>
        <li>
            <a href="#" data-value="+353">IE - 353</a>
        </li>
        <li>
            <a href="#" data-value="+48">PL - 48</a>
        </li>
        <li>
            <a href="#" data-value="+39">IT - 39</a>
        </li>
        <li>
            <a href="#" data-value="+225">CI - 225</a>
        </li>
        <li>
            <a href="#" data-value="+1">JM - 1</a>
        </li>
        <li>
            <a href="#" data-value="+81">JP - 81</a>
        </li>
        <li>
            <a href="#" data-value="+962">JO - 962</a>
        </li>
        <li>
            <a href="#" data-value="+7">KZ - 7</a>
        </li>
        <li>
            <a href="#" data-value="+254">KE - 254</a>
        </li>
        <li>
            <a href="#" data-value="+850">KP - 850</a>
        </li>
        <li>
            <a href="#" data-value="+82">KR - 82</a>
        </li>
        <li>
            <a href="#" data-value="+965">KW - 965</a>
        </li>
        <li>
            <a href="#" data-value="+996">KG - 996</a>
        </li>
        <li>
            <a href="#" data-value="+371">LV - 371</a>
        </li>
        <li>
            <a href="#" data-value="+266">LS - 266</a>
        </li>
        <li>
            <a href="#" data-value="+231">LR - 231</a>
        </li>
        <li>
            <a href="#" data-value="+218">LY - 218</a>
        </li>
        <li>
            <a href="#" data-value="+423">LI - 423</a>
        </li>
        <li>
            <a href="#" data-value="+370">LT - 370</a>
        </li>
        <li>
            <a href="#" data-value="+352">LU - 352</a>
        </li>
        <li>
            <a href="#" data-value="+853">MO - 853</a>
        </li>
        <li>
            <a href="#" data-value="+389">MK - 389</a>
        </li>
        <li>
            <a href="#" data-value="+261">MG - 261</a>
        </li>
        <li>
            <a href="#" data-value="+265">MW - 265</a>
        </li>
        <li>
            <a href="#" data-value="+60">MY - 60</a>
        </li>
        <li>
            <a href="#" data-value="+960">MV - 960</a>
        </li>
        <li>
            <a href="#" data-value="+223">ML - 223</a>
        </li>
        <li>
            <a href="#" data-value="+356">MT - 356</a>
        </li>
        <li>
            <a href="#" data-value="+692">MH - 692</a>
        </li>
        <li>
            <a href="#" data-value="+596">MQ - 596</a>
        </li>
        <li>
            <a href="#" data-value="+222">MR - 222</a>
        </li>
        <li>
            <a href="#" data-value="+230">MU - 230</a>
        </li>
        <li>
            <a href="#" data-value="+52">MX - 52</a>
        </li>
        <li>
            <a href="#" data-value="+691">FM - 691</a>
        </li>
        <li>
            <a href="#" data-value="+373">MD - 373</a>
        </li>
        <li>
            <a href="#" data-value="+377">MC - 377</a>
        </li>
        <li>
            <a href="#" data-value="+976">MN - 976</a>
        </li>
        <li>
            <a href="#" data-value="+212">MA - 212</a>
        </li>
        <li>
            <a href="#" data-value="+258">MZ - 258</a>
        </li>
        <li>
            <a href="#" data-value="+95">MM - 95</a>
        </li>
        <li>
            <a href="#" data-value="+264">NA - 264</a>
        </li>
        <li>
            <a href="#" data-value="+977">NP - 977</a>
        </li>
        <li>
            <a href="#" data-value="+31">NL - 31</a>
        </li>
        <li>
            <a href="#" data-value="+687">NC - 687</a>
        </li>
        <li>
            <a href="#" data-value="+64">NZ - 64</a>
        </li>
        <li>
            <a href="#" data-value="+505">NI - 505</a>
        </li>
        <li>
            <a href="#" data-value="+227">NE - 227</a>
        </li>
        <li>
            <a href="#" data-value="+234">NG - 234</a>
        </li>
        <li>
            <a href="#" data-value="+47">NO - 47</a>
        </li>
        <li>
            <a href="#" data-value="+968">OM - 968</a>
        </li>
        <li>
            <a href="#" data-value="+92">PK - 92</a>
        </li>
        <li>
            <a href="#" data-value="+507">PA - 507</a>
        </li>
        <li>
            <a href="#" data-value="+595">PY - 595</a>
        </li>
        <li>
            <a href="#" data-value="+51">PE - 51</a>
        </li>
        <li>
            <a href="#" data-value="+63">PH - 63</a>
        </li>
        <li>
            <a href="#" data-value="+48">PL - 48</a>
        </li>
        <li>
            <a href="#" data-value="+351">PT - 351</a>
        </li>
        <li>
            <a href="#" data-value="+1">PR - 1</a>
        </li>
        <li>
            <a href="#" data-value="+974">QA - 974</a>
        </li>
        <li>
            <a href="#" data-value="+40">RO - 40</a>
        </li>
        <li>
            <a href="#" data-value="+7">RU - 7</a>
        </li>
        <li>
            <a href="#" data-value="+250">RW - 250</a>
        </li>
        <li>
            <a href="#" data-value="+684">WS - 684</a>
        </li>
        <li>
            <a href="#" data-value="+378">SM - 378</a>
        </li>
        <li>
            <a href="#" data-value="+966">SA - 966</a>
        </li>
        <li>
            <a href="#" data-value="+221">SN - 221</a>
        </li>
        <li>
            <a href="#" data-value="+248">SC - 248</a>
        </li>
        <li>
            <a href="#" data-value="+232">SL - 232</a>
        </li>
        <li>
            <a href="#" data-value="+65">SG - 65</a>
        </li>
        <li>
            <a href="#" data-value="+421">SK - 421</a>
        </li>
        <li>
            <a href="#" data-value="+386">SI - 386</a>
        </li>
        <li>
            <a href="#" data-value="+252">SO - 252</a>
        </li>
        <li>
            <a href="#" data-value="+27">ZA - 27</a>
        </li>
        <li>
            <a href="#" data-value="+34">ES - 34</a>
        </li>
        <li>
            <a href="#" data-value="+94">LK - 94</a>
        </li>
        <li>
            <a href="#" data-value="+249">SD - 249</a>
        </li>
        <li>
            <a href="#" data-value="+597">SR - 597</a>
        </li>
        <li>
            <a href="#" data-value="+268">SZ - 268</a>
        </li>
        <li>
            <a href="#" data-value="+46">SE - 46</a>
        </li>
        <li>
            <a href="#" data-value="+41">CH - 41</a>
        </li>
        <li>
            <a href="#" data-value="+963">SY - 963</a>
        </li>
        <li>
            <a href="#" data-value="+886">TW - 886</a>
        </li>
        <li>
            <a href="#" data-value="+992">TJ - 992</a>
        </li>
        <li>
            <a href="#" data-value="+255">TZ - 255</a>
        </li>
        <li>
            <a href="#" data-value="+66">TH - 66</a>
        </li>
        <li>
            <a href="#" data-value="+228">TG - 228</a>
        </li>
        <li>
            <a href="#" data-value="+1">TT - 1</a>
        </li>
        <li>
            <a href="#" data-value="+216">TN - 216</a>
        </li>
        <li>
            <a href="#" data-value="+90">TR - 90</a>
        </li>
        <li>
            <a href="#" data-value="+993">TM - 993</a>
        </li>
        <li>
            <a href="#" data-value="+256">UG - 256</a>
        </li>
        <li>
            <a href="#" data-value="+380">UA - 380</a>
        </li>
        <li>
            <a href="#" data-value="+971">AE - 971</a>
        </li>
        <li>
            <a href="#" data-value="+44">GB - 44</a>
        </li>
        <li>
            <a href="#" data-value="+598">UY - 598</a>
        </li>
        <li>
            <a href="#" data-value="+998">UZ - 998</a>
        </li>
        <li>
            <a href="#" data-value="+39">VA - 39</a>
        </li>
        <li>
            <a href="#" data-value="+58">VE - 58</a>
        </li>
        <li>
            <a href="#" data-value="+84">VN - 84</a>
        </li>
        <li>
            <a href="#" data-value="+967">YE - 967</a>
        </li>
        <li>
            <a href="#" data-value="+260">ZM - 260</a>
        </li>
        <li>
            <a href="#" data-value="+263">ZW - 263</a>
        </li>
    </ul>
</div>                    <input type="text" name="phone" placeholder="Phone" />
                    <input type="text" name="company" placeholder="Company" />
                </div>
                <div class="full">
                    <textarea name="message" placeholder="How can we help you ?"></textarea>
                </div>
                <div class="contact-services">
    <h4>What is the service you are looking for?</h4>
    <ul>
        @foreach($serviceArr as $service)
        <li>
            <input type="checkbox" name="services[]" value="{{$service->service_name}}" />
            <span></span>
            <label>{{$service->service_name}}</label>
        </li>
        @endforeach
    </ul>
</div>               
 <button class="btn yellow submit_form g-recaptcha" type="submit">Send Message</button>
<!--                <a href="#" class="btn yellow g-recaptcha submit_form" data-sitekey="6Lcmq-MZAAAAAMrINzpdLslbnFA07EmeDwEC8sx-">Send Message</a>-->
                <p>By submitting you are agreeing to our <a href="privacy-policy">Privacy Policy</a></p>
            </form>
        </section>
    
</div>


<script>
    $(document).ready(function(){
        $(".box-iframe").hide();
        $("#box1").show();
        $(document).on("click",".countryClass",function(){
            var id=$(this).attr("id");
            $(".box-iframe").hide();
             $("#box"+id).show();
        });
    });
    </script>
@endsection