@extends('layouts.frontend.app')
@section('style')
    <style>
        .card-contact-page {
            border: none;
            box-shadow: 0px 1px 6px rgb(208, 208, 208);
        }

        .btn-send {
            width: 100%;
            height: 45px;
            background-color: rgba(255, 0, 0, 0.67);
            color: white;
        }

        .btn-send:hover {
            width: 100%;
            height: 45px;
            background-color: rgba(201, 0, 0, 0.67);
            color: white;
        }
    </style>
@endsection
@section('content')
    <div class="text-center position-relative mb-5">
        <img src="{{ url('/files/contact-us/') . '/' . $contact->header_image ?? ''}}" alt="Banner Image" class="img-fluid">
        <div class="container">
            <h1 class="jumbotron-title-text text-center text-white roboto">Contact Us</h1>
            <!-- <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p> -->
        </div>
    </div>

    <!-- contact -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-12">
                        <iframe src="{{ @$contact->embed_map }}" width="1110" height="450" style="border:0;"
                            allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
                        </iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row mb-5">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-4 mt-5">
                        <div class="card card-contact-page">
                            <div class="card-body">
                                <div class="col-md-12">
                                    <h4 style="font-size: 20px; color: #ff5454;">Contact us</h4>
                                    <div class="row mt-3">
                                        <div class="col-md-3">
                                            <img src="{{ asset('assets/frontend/img/img-icon/icon-home.svg') }}"
                                                class="img-fluid" alt="">
                                        </div>
                                        <div class="col-md-9 mt-2">
                                            <h5 style="font-size: 16px; color: #303030;">Address</h5>
                                            <div style="font-size: 12px;  color: #7A7A7A;">
                                                {!! @$contact->address !!}</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <img src="{{ asset('assets/frontend/img/img-icon/icon-email.svg') }}"
                                                class="img-fluid" alt="">
                                        </div>
                                        <div class="col-md-9 mt-2">
                                            <h5 style="font-size: 16px; color: #303030;">Email</h5>
                                            <p style="font-size: 12px; color: #7A7A7A;">
                                                {{ @$contact->email }}</p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <img src="{{ asset('assets/frontend/img/img-icon/icon-phone.svg') }}"
                                                class="img-fluid" alt="">
                                        </div>
                                        <div class="col-md-9 mt-2">
                                            <h5 style="font-size: 16px; color: #303030;">Customer Service</h5>
                                            <p style="font-size: 12px; color: #7A7A7A;">
                                                {{ @$contact->phone }} </p>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <img src="{{ asset('assets/frontend/img/img-icon/icon-phone.svg') }}"
                                                class="img-fluid" alt="">
                                        </div>
                                        <div class="col-md-9 mt-2">
                                            <h5 style="font-size: 16px; color: #303030">Layanan Bebas Biaya</h5>
                                            <a href="https://call1.freecall.my.id/" target="_blank"
                                              ><button type="button" class="btn btn-send">Klik Di Sini</button></a
                                            >
                                            <h5
                                              style="
                                                font-size: 16px;
                                                color: #303030;
                                                margin-top: 15px;
                                                margin-bottom: 15px;
                                                text-align: center;
                                              "
                                            >
                                              Atau
                                            </h5>
                                            <a href="https://call2.freecall.my.id/" target="_blank"
                                              ><button type="button" class="btn btn-send">Klik Di Sini</button></a
                                            >
                                          </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-8 mt-5">
                        <div class="card card-contact-page">
                            <div class="card-body">
                                <h4 style="font-size: 20px; color: #ff5454;">Send us a Message</h4>
                                <div class="row">
                                    <form action="{{ route('store-email') }}" method="POST">
                                        @method('POST')
                                        @csrf
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="exampleFormControlSelect1"
                                                            style="font-size: 16px; font-weight: 500;">Subject</label>
                                                        <select class="form-control" name="subject"
                                                            id="exampleFormControlSelect1">
                                                            <option value="Want to know More about the details">Want to know
                                                                More about the details</option>
                                                            <option value="Interested in Partnership">Interested in
                                                                Partnership</option>
                                                            <option value="Bugs">Bugs</option>
                                                            <option value="Any issue">Any issue</option>
                                                            <option value="Other">Other</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="name"
                                                            style="font-size: 16px; font-weight: 500; color: #303030">Your
                                                            Name</label>
                                                        <input type="text" name="name" class="form-control"
                                                            id="name" aria-describedby="emailHelp"
                                                            placeholder="Your name">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="phone"
                                                            style="font-size: 16px; font-weight: 500; color: #303030">
                                                            Phone Number</label>
                                                        <input type="number" name="phone" class="form-control"
                                                            id="phone" aria-describedby="emailHelp"
                                                            placeholder="081234567890">
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <div class="form-group">
                                                        <label for="email"
                                                            style="font-size: 16px; font-weight: 500; color: #303030">
                                                            Email</label>
                                                        <input type="email" name="email" class="form-control"
                                                            id="email" aria-describedby="emailHelp"
                                                            placeholder="example@mail.com">
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="form-group">
                                                        <label for="message"
                                                            style="font-size: 16px; font-weight: 500; color: #303030">
                                                            Message</label>
                                                        <textarea class="form-control" name="message" id="message" rows="3"></textarea>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <button class="btn btn-send" type="submit">Send Message</button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection