@section('meta_title')
    @lang('languages.contact_us')
@endsection

@section('meta_desc')
    {{ 'About Yara Net Internet Service Provider in Afghanistan' }}
@endsection

@extends('Frontend.master_page')

@section('title')
    <h2>@lang('languages.contact_us')</h2>
@endsection

@section('page_path')
    <ul class="breadcrumb">
        <li class="breadcrumb-item">
            <a href="/">@lang('languages.home')</a>
        </li>
        <li class="breadcrumb-item active">
            @lang('languages.contact_us')
        </li>
    </ul>
@endsection


@section('content')
    <section class="s-pt-60 s-pt-md-80 s-pt-xl-150 s-pb-60 s-pb-md-100">
        <div class="container">

            <div class="row justify-content-center text-center">
                <div class="col-sm-12 col-md-4 animate animated pullDown" data-animation="pullDown">
                    <div class="icon-box text-center">
                        <div class="icon-styled color-main">
                            <i class="fa fa-mobile fs-40" aria-hidden="true"></i>
                        </div>
                        <h6>Phone</h6>
                        <p>
                            {{ company()->phone }}<br>
                            {{ company()->phone_1 }}
                        </p>
                    </div>
                </div>
                <div class="divider-30  d-block d-md-none"></div>
                <div class="col-sm-12 col-md-4 animate animated pullDown" data-animation="pullDown">
                    <div class="icon-box text-center">
                        <div class="icon-styled color-main">
                            <i class="fa fa-map-marker fs-40" aria-hidden="true"></i>
                        </div>
                        <h6>Location</h6>
                        <p>
                            {{ company()->address }}
                        </p>
                    </div>
                </div>
                <div class="divider-30 d-block d-md-none"></div>
                <div class="col-sm-12 col-md-4 animate animated pullDown" data-animation="pullDown">
                    <div class="icon-box text-center">
                        <div class="icon-styled color-main">
                            <i class="fa fa-envelope fs-40" aria-hidden="true"></i>
                        </div>
                        <h6>Email</h6>
                        <p>
                            <a href="mailto:{{ company()->email }}">{{ company()->email }}</a><br>
                            <a href="mailto:{{ company()->email_1 }}">{{ company()->email_1 }}</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="s-pb-60 s-pb-md-80 s-pb-xl-150">
        <div class="container">
            <div class="row">
                <div class="col-lg-5">
                    <div class="divider-0 divider-lg-50"></div>
                    <form class=" c-mb-10 c-gutter-10" method="post"
                        action="{{ route('sendContact.mail', app()->getLocale()) }}">
                        @csrf
                        @if (session()->has('success_mail'))
                            <p class="text-success" style="text-align: center">
                                Thanks For Contacting with Us.
                                <br>
                                Message Sent!
                            </p>
                        @endif
                        <div class="row">


                            <div class="col-sm-12">
                                <h5 class="title_block color-main">Contact Form</h5>
                                <div class="divider-10 divider-md-20 divider-xl-30"></div>
                                <div class="form-group has-placeholder">
                                    <input type="text" size="30" value="{{ old('name') }}" name="name"
                                        id="name" class="form-control" placeholder="Full Name">
                                    @error('name')
                                        <p class="text-danger" style="font-size: 14px">{{ $message }}</p>
                                    @enderror
                                </div>
                                <div class="form-group has-placeholder">
                                    <input type="email" size="30" value="{{ old('email') }}" name="email"
                                        id="email" class="form-control" placeholder="Email">
                                    @error('email')
                                        <p class="text-danger" style="font-size: 14px">{{ $message }}</p>
                                    @enderror
                                </div>

                                <div class="form-group has-placeholder">
                                    <label for="message">Message</label>
                                    <textarea rows="6" cols="45" name="message" id="message" class="form-control" placeholder="Message">{{ old('message') }}</textarea>
                                    @error('message')
                                        <p class="text-danger" style="font-size: 14px">{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="form-group">
                                    <button type="submit" class="btn btn-maincolor">Send</button>
                                </div>
                            </div>

                        </div>
                    </form>
                    <div class="divider-60 divider-lg-0"></div>
                </div>
                <!--.col-* -->
                <div class="col-lg-7">
                    <div class="ls ms page_map" data-draggable="true" data-scrollwheel="true">


                        {{-- <div class="marker">
                            <div class="marker-address">sydney, australia, Liverpool street, 66</div>
                            <div class="marker-title">First Marker</div>
                            <div class="marker-description">

                                <ul class="list-unstyled">
                                    <li>
                                        <span class="icon-inline">
                                            <span class="icon-styled color-main">
                                                <i class="fa fa-map-marker"></i>
                                            </span>

                                            <span>
                                                Sydney, Australia, Liverpool street, 66
                                            </span>
                                        </span>
                                    </li>

                                    <li>
                                        <span class="icon-inline">
                                            <span class="icon-styled color-main">
                                                <i class="fa fa-phone"></i>
                                            </span>

                                            <span>
                                                1 (800) 123-45-67
                                            </span>
                                        </span>
                                    </li>
                                    <li>
                                        <span class="icon-inline">
                                            <span class="icon-styled color-main">
                                                <i class="fa fa-envelope"></i>
                                            </span>

                                            <span>
                                                mail@example.com
                                            </span>
                                        </span>
                                    </li>
                                </ul>
                            </div>

                            <img class="marker-icon" src="images/map_marker_icon.png" alt="">
                        </div> --}}
                        <!-- .marker -->


                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection