@extends('frontend.slices.main')
@section('content')
<style>
    .map {
        max-width: 100%;
        height: 600px;
    }

    .box-title {
        font-size: 16px;
        font-weight: bold;
    }

    .box-icon-4 {
        padding: 10px 10px 10px 10px;
        height: 160px !important;
    }
</style>
<div class="section banner-page about">
    <div class="container">
        <div class="row">
            <div class="col-sm-4">
                <div class="title-page" style="background-color: #083472; padding: 5px 5px 5px 5px; border-radius: 5px;">Contact</div>
            </div>
        </div>
    </div>
</div>
<div class="section contact overlap">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 col-md-4 col-md-push-8">
                <div class="widget contact-info-sidebar">
                    <div class="widget-title">
                        Contact Info
                    </div>
                    <ul class="list-info">
                        <li>
                            <div class="info-icon">
                                <span class="fa fa-map-marker"></span>
                            </div>
                            <div class="info-text">{!! $info->address ??''!!}</div>
                        </li>
                        <li>
                            <div class="info-icon">
                                <span class="fa fa-phone"></span>
                            </div>
                            <div class="info-text">{{ $info->phone ?? '' }}</div>
                        </li>
                        <li>
                            <div class="info-icon">
                                <span class="fa fa-envelope"></span>
                            </div>
                            <div class="info-text">{{ $info->email ?? '' }}</div>
                        </li>
                        <li>
                            
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-sm-8 col-md-8 col-md-pull-4">
                <div class="content">
                    <p class="section-heading-3">Should you have any queries please contact us. Fill in the form below.</p>
                    <div class="margin-bottom-30"></div>
                    <h3 class="section-heading-2">
                        Contact Details
                    </h3>
                    <form action="{{ route('sent_mail') }}" class="form-contact" method="POST">
                        @csrf
                        <div class="form-group">
                            <input type="text" class="form-control" id="p_name" name="name" placeholder="Full Name..." required="">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" id="p_email" name="email" placeholder="Enter Address..." required>
                        </div>
                        <div class="form-group">
                            <input type="text" class="form-control" id="p_subject" name="subject" placeholder="Subject..." required>
                        </div>
                        <div class="form-group">
                            <textarea id="p_message" class="form-control" rows="6" name="message" placeholder="Write message" required></textarea>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-secondary" style="pointer-events: all; cursor: pointer;">SUBMIT MESSAGE</button>
                        </div>
                    </form>
                </div>
                @if(session('success'))
                <div class="alert alert-success alert-dismissible" role="alert">
                    {{ session('success') }}
                </div>
                @endif
            </div>
            <div class="container">
                <h3>Holding Map</h3>
                <div class="maps-wraper">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3964.9280364122!2d106.952948975677!3d-6.403273193587381!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69959e94d6cf8d%3A0x78c6e5720ea49a05!2sPT.%20KONISHI%20LEMINDO%20INDONESIA!5e0!3m2!1sen!2sid!4v1707905607628!5m2!1sen!2sid" class="maps" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
            </div>
            <!-- CABANG KAMI -->
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <h2 class="section-heading">
                            Head Office & Cabang Kami
                        </h2>
                    </div>
                </div>
                <div class="row">
                    @foreach ($services as $service )
                    <div class="col-md-4">
                        <div class="box-icon-4">
                            <div class="body-content">
                                <div class="box-title">{{ $service->name ?? '' }}</div> <br>
                                <div class="">{{ $service->icon ?? '' }}</div>
                                <div class="">{{ $service->description ?? '' }}</div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

            
        </div>
    </div>
</div>

@endsection