@extends('website.includes.master')

@section('title')
    ContactUs
@endsection

@section('content')

    <!-- Start Bradcaump area -->
    {{--    <div class="ht__bradcaump__area"--}}
    {{--         style="background: rgba(0, 0, 0, 0) url({{ URL::asset('website/images/bg/4.jpg') }}) no-repeat scroll center center / cover ;">--}}
    {{--        <div class="ht__bradcaump__wrap">--}}
    {{--            <div class="container">--}}
    {{--                <div class="row">--}}
    {{--                    <div class="col-xs-12">--}}
    {{--                        <div class="bradcaump__inner">--}}
    {{--                            <nav class="bradcaump-inner">--}}
    {{--                                <a class="breadcrumb-item" href="{{ route('/') }}">Home</a>--}}
    {{--                                <span class="brd-separetor"><i class="zmdi zmdi-chevron-right"></i></span>--}}
    {{--                                <span class="breadcrumb-item active">Contact Us</span>--}}
    {{--                            </nav>--}}
    {{--                        </div>--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}
    <!-- End Bradcaump area -->
    <!-- Start Contact Area -->
    <section class="htc__contact__area ptb--100 bg__white pt-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-7 col-md-6 col-sm-12 col-xs-12">
                    <div class="map-contacts--2">
                        <div class="mapouter">
                            <div class="gmap_canvas">
                                <iframe id="gmap_canvas" style="width: 100%; height: 500px;" src="https://maps.google.com/maps?q=Via%20Medaglie%20d’Oro,%2070,%20Faenza,%20Italy&amp;t=&amp;z=13&amp;ie=UTF8&amp;iwloc=&amp;output=embed"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-5 col-md-6 col-sm-12 col-xs-12">
                    <h2 class="title__line--6">CONTACT US</h2>
                    <div class="address">
                        <div class="address__icon">
                            <i class="icon-location-pin icons"></i>
                        </div>
                        <div class="address__details">
                            <h2 class="ct__title">Our Address</h2>
                            <p>{{ $system->location }}</p>
                        </div>
                    </div>
                    <div class="address">
                        <div class="address__icon">
                            <i class="icon-envelope icons"></i>
                        </div>
                        <div class="address__details">
                            <h2 class="ct__title">Email</h2>
                            <p>{{ $system->email }}</p>
                        </div>
                    </div>

                    <div class="address">
                        <div class="address__icon">
                            <i class="icon-phone icons"></i>
                        </div>
                        <div class="address__details">
                            <h2 class="ct__title">Phone Number</h2>
                            <p>{{ $system->phone }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="contact-form-wrap mt--60">
                    <div class="col-xs-12">
                        <div class="contact-title">
                            <h2 class="title__line--6">SEND A MAIL</h2>
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <form action="{{ route('save_contact_message') }}" method="post" class="MyForm">
                            @csrf
                            <div class="single-contact-form">
                                <div class="contact-box name">
                                    <input type="text" name="name" required placeholder="Your Name*">
                                    <input type="email" name="email" placeholder="Mail*" required>
                                </div>
                            </div>
                            <div class="single-contact-form">
                                <div class="contact-box subject">
                                    <input type="text" name="subject" required placeholder="Subject*">
                                </div>
                            </div>
                            <div class="single-contact-form">
                                <div class="contact-box message">
                                    <textarea name="message" required placeholder="Your Message"></textarea>
                                </div>
                            </div>
                            <div class="contact-btn">
                                <button type="submit" class="fv-btn MyHover My30Radius MyButton">Send MESSAGE</button>
                            </div>
                        </form>
                        <div class="form-output">
                            <p class="form-messege"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Contact Area -->

@endsection