@extends('client.jupiter.partials.layout')
@section('header')
<title>Contact - {{env("APP_NAME")}}</title>
@endsection

@section('content')


<section class="banner-background d-flex align-items-center text-center">
    <div class="container position-relative" uk-scrollspy="cls: uk-animation-slide-top-medium; repeat: true">
        <div class="square" style="left:0%; z-index:0; "></div>
        <p class="text-light">Home / Contact</p>
        <p class="medium-text text-light">Contact Us</p>
    </div>
</section>

<section class="section-padding ">
    <div class="container">
        <div class="row g-5 d-flex align-items-center">

            <div class="col-md-6 contact-details">
                <p>

                    Find us in these locations and contact us directly for any additional queries.
                </p>
                <div class="vstack gap-4 get-in-touch">
                    <div class="row g-3 d-flex align-items-center">
                        <div class="col-2">
                            <i class="fa-solid fa-location-arrow"></i>
                        </div>
                        <div class="col-10">
                            <p class="m-0">Location</p>
                            <p class="m-0 mt-2 fw-bold">{{$contact->address}}</p>
                        </div>
                    </div>
                    <div class="row g-3 d-flex align-items-center">
                        <div class="col-2">
                            <i class="fa-solid fa-envelope"></i>
                        </div>
                        <div class="col-10">
                            <p class="m-0">Mail</p>
                            <p class="m-0 mt-2 fw-bold"><a class="text-dark" href="mailto:{{$contact->email1}}">{{$contact->email1}}</a> </p>
                        </div>
                    </div>
                    <div class="row g-3 d-flex align-items-center">
                        <div class="col-2">
                            <i class="fa-solid fa-phone"></i>
                        </div>
                        <div class="col-10">
                            <p class="m-0">Phone</p>
                            <p class="m-0 mt-2 fw-bold"><a class="text-dark" href="tel:{{$contact->tel}}">{{$contact->tel}}</a> </p>
                        </div>
                    </div>
                    <div class="row g-3 d-flex align-items-center">
                        <div class="col-2">
                            <i class="fa-solid fa-phone"></i>
                        </div>
                        <div class="col-10">
                            <p class="m-0">Secondary Phone</p>
                            <p class="m-0 mt-2 fw-bold"><a class="text-dark" href="tel:{{$contact->fax}}">{{$contact->fax}}</a> </p>
                        </div>
                    </div>
                    <div class="row g-3 d-flex align-items-center">
                        <div class="col-2">
                            <i class="fa-solid fa-phone"></i>
                        </div>
                        <div class="col-10">
                            <p class="m-0">Hand Phone (HP)</p>
                            <p class="m-0 mt-2 fw-bold"><a class="text-dark" href="tel:{{$contact->hp1}}">{{$contact->hp2}}</a> </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <p class="custom-text fs-5 text-uppercase">Contact Form</p>
                {{MPCMS::showForm($contact->forms_id)}}
           

                
            </div>

        </div>

    </div>
</section>  {!!$contact->google_map!!}


@endsection