@extends('layouts.tokkio-master')
@section('content')
<!--Breadcrumb-->
<section id="breadcrumb">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 col-sm-6">
                <div class="breadcrumb-list">
                    <ul>
                        <li><a href="{!! route('tokkio.index') !!}">{!! __('tokkio.home') !!}</a></li>
                        <li><span>{!! __('tokkio.contact_us') !!}</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>


<!--Inner Page Section-->
<section id="inner-page">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="page-section">
                    <h3>{!! __('tokkio.contact_us') !!}</h3>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-sm-6">
                <div class="contact-detail-list">
                    <div class="contact-list">
                        <i class="fas fa-phone-square-alt"></i>
                        <div class="phn-details">
                            <p>+123-456-4567-7890</p>
                            <p>+123-456-4567-7890</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="contact-detail-list">
                    <div class="contact-list">
                        <i class="fas fa-envelope"></i>
                        <div class="phn-details">
                            <p>info@tokkio.com</p>
                            <p>support@tokkio.com</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="contact-detail-list">
                    <div class="contact-list">
                        <i class="fas fa-map-marker-alt"></i>
                        <div class="phn-details">
                            <p>128, Fake Street, Block-88, NY-12345, New York, USA</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-sm-6">
                <div class="contact-detail-list">
                    <div class="contact-list">
                        <h4>Follow Us On:</h4>
                        <div class="phn-details">
                            <ul>
                                <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="#"><i class="fab fa-instagram"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-6">
                <div class="map-form">
                    <h3>{!! __('tokkio.get_in_touch') !!}</h3>
                    <div class="form-contact-inner">
                        <div class="row mb-3">
                            <div class="col">
                                <label for="formGroupExampleInput" class="form-label">{!! __('tokkio.first_name') !!}</label>
                                <input type="text" class="form-control" placeholder="Eg.John" aria-label="{!! __('tokkio.first_name') !!}">
                            </div>
                            <div class="col">
                                <label for="formGroupExampleInput" class="form-label">{!! __('tokkio.last_name') !!}</label>
                                <input type="text" class="form-control" placeholder="Eg.Doe" aria-label="{!! __('tokkio.last_name') !!}">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col">
                                <label for="formGroupExampleInput" class="form-label">{!! __('tokkio.email') !!}</label>
                                <input type="text" class="form-control" placeholder="Eg.johndoe@gmail.com" aria-label="Email Address">
                            </div>
                            <div class="col">
                                <label for="formGroupExampleInput" class="form-label">{!! __('tokkio.phone') !!}</label>
                                <input type="text" class="form-control" placeholder="Eg.+123-456-7890" aria-label="Phone Number">
                            </div>
                        </div>
                        <div class="row mb-4">
                            <div class="col-lg-12">
                                <label for="formGroupExampleInput" class="form-label">{!! __('tokkio.message') !!}</label>
                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="4" placeholder="Type Here...."></textarea>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12">
                                <button class="btn btn-success btn-snd">{!! __('tokkio.send_message') !!}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-sm-6">
                <div class="map-location">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7762525.308082571!2d6.880140909944296!3d61.64090980069548!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x465cb2396d35f0f1%3A0x22b8eba28dad6f62!2sSweden!5e0!3m2!1sen!2sin!4v1694172898788!5m2!1sen!2sin" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection