@extends('frontend.layouts.app')

@section('title')

@endsection

@section('seo')
<title>Contact Us | JRS</title>
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Contact Us | JRS" />
<meta property="og:description" content="Discover the power of smart investments with JRS Holdings Inc. We specialize in managing a diverse portfolio for long-term success." />
<meta property="og:site_name" content="Contact Us | JRS" />
<meta property="og:image" content="{{ asset('images/thumbnail.png') }}" />
<meta property="og:thumbnail" content="{{ asset('images/thumbnail.png') }}" />
<meta property="og:keywords" content="JRS Holdings Inc., Holding Company, Investment Portfolio, Diversified Holdings, Business Investments, Strategic Holdings, Corporate Investments, Investment Management, Asset Portfolio, Growth Investments, Financial Holdings, Holding Group, Investment Holdings, Investment Strategies, Portfolio Management, Capital Investments, Business Expansion, Equity Holdings, Investment Opportunities, Investment Diversification, Investment Company, Holding Group, Strategic Investments, Diverse Portfolio, Financial Holdings, Investment Management, Corporate Holdings, Investment Strategies, Asset Diversification, Growth Opportunities, Business Expansion, Investment Portfolio, Equity Holdings, Capital Management, Investment Diversity, Investment Growth, Portfolio Diversification, Profitable Investments, Investment Ventures">
@endsection

@section('content')

@if(session('success'))
<div class="position-relative d-flex justify-content-end" data-aos="fade-left" data-aos-duration="500">
    <div class="alert alert-success alert-dismissible fade show position-absolute m-3" role="alert">
        <h4>{{ session('success') }}</h4>
        <button type="button" class="btn-close my-auto" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

@if(session('error'))
<div class="position-relative d-flex justify-content-end" data-aos="fade-left">
    <div class="alert alert-warning alert-dismissible fade show position-absolute" role="alert">
        <h5><i class="icon fas fa-times-circle"></i> An error has occured</h5>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
</div>
@endif

<div class="banner mb-5">
    <div class="container">

        <div class="col-3 text-end d-md-block d-none">
            <h1 class="banner-title fw-bold text-white fs-1">CONTACT US</h1>
            <span class="text-white">JRS HOLDINGS INC</span>
        </div>

        <div class="text-center d-sm-block d-md-none">
            <h1 class="banner-title fw-bold text-white fs-1">CONTACT US</h1>
            <span class="text-white">JRS HOLDINGS INC</span>
        </div>

    </div>
</div>

<div class="container">
    <div class="my-5 text-center">
        <h1 class="fw-bold">LEAVE US A MESSAGE</h1>
    </div>

    <div class="row justify-content-center mb-5">
        <div class="col-md-6">
            <div class="row justify-content-center">
                <div class="col-md-1 text-center d-flex align-items-center rounded-circle shadow">
                    <div class="col-12"><i class="fa-solid fa-phone color-red fs-4"></i></div>
                </div>
                <div class="col-md-10"><span class="fs-4">INFO@FDI.COM</span><br><span class="fs-4">(02) 951-1515 / (02) 951-6637</span></div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="row justify-content-center">
                <div class="col-md-1 text-center d-flex align-items-center rounded-circle shadow">
                    <div class="col-12"><i class="fa-solid fa-location-dot color-red fs-4"></i></div>
                </div>
                <div class="col-md-10"><span class="fs-4">CMI BLDG, 315 COMMONWEALTH</span><br><span class="fs-4">AVE DILIMAN, QUEZON CITY, 1128 METRO</span></div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="row justify-content-center">
                <div class="col-md-1 text-center d-flex align-items-center rounded-circle shadow">
                    <div class="col-12"><i class="fa-solid fa-clock color-red fs-4"></i></div>
                </div>
                <div class="col-md-10"><span class="fs-4">MON - SAT: 8:00AM - 5:00PM</span><br><span class="fs-4">SUNDAY: CLOSED</span></div>
            </div>
        </div>
    </div>

    <!-- <div class="text-center mb-5 d-flex flex-column align-items-center col-12">

        <input type="text" class="form-control mb-3" id="subject" name="subject" placeholder="Subject">

        <input type="text" class="form-control mb-3" id="name" name="name" placeholder="Your Name">

        <div class="row">
            <div class="col-12 col-md-6 col-xl-6 form-group">
                <input type="number" class="form-control mb-3" id="phone" name="phone" placeholder="Phone No.">
            </div>
            <div class="col-12 col-md-6 col-xl-6 form-group">
                <input type="email" class="form-control mb-3" id="email" name="email" placeholder="Email">
            </div>
        </div>

        <textarea class="form-control mb-3" name="message" id="message" cols="30" rows="10" placeholder="Message"></textarea>
    </div> -->

    <div class="col-12 col-md-12 col-xl-12">

        <form action="{{ url('/submit-message') }}" id="myForm" method="POST">@csrf
            <div class="mb-3">
                <input type="text" name="subject" class="form-control rounded-0" id="subject" placeholder="Subject">

            </div>
            <div class="mb-3">
                <input type="text" name="name" class="form-control rounded-0" id="name" placeholder="Your Name">

            </div>
            <div class="mb-3">
                <div class="row gy-3">
                    <div class="col-12 col-md-6 col-xl-6">
                        <input type="number" name="phone" class="form-control rounded-0" id="phone" placeholder="Phone No.">

                    </div>
                    <div class="col-12 col-md-6 col-xl-6">
                        <input type="email" name="email" class="form-control rounded-0" id="email" placeholder="Email Address">

                    </div>
                </div>
            </div>
            <div class="mb-3">
                <textarea type="text" name="message" class="form-control rounded-0" id="message" rows="3" placeholder="Your Message"></textarea>

            </div>
            <div class="text-center">
                <button type="submit" class="button-send"></button>
            </div>
        </form>
    </div>


    <div class="row my-5">
        <div class="col-lg-6 col-md-12">
            <iframe src="https://embed.waze.com/iframe?zoom=16&lat=14.664616&lon=121.068564&ct=livemap" height="500" allowfullscreen style="width: 100%;"></iframe>
        </div>
        <div class="col-lg-6 col-md-12">
            <iframe style="width: 100%" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&amp;height=450&amp;hl=en&amp;q=CMI%20Bldg,%20315%20Commonwealth%20Ave,%20Diliman,%20Quezon%20City+(My%20Business%20Name)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"><a href="https://www.maps.ie/population/">Population mapping</a></iframe>
        </div>
    </div>

</div>

<style>
    .banner {
        background-image: url("{{ asset('images/banner-faqs.jpg') }}");
        background-position: center;
        background-size: cover;
        align-items: center;
        display: flex;
        height: 45vh;
        width: 100%;
    }

    /* BUTTON SEND */
    .button-send {
        padding: 10px 20px;
        font-size: 1.1rem;
        background-color: transparent;
        border-color: #008740;
        /* Border color for the green button */
        color: white;
        position: relative;
        width: 200px;
        height: 50px;
        transition: background-color 0.2s ease-in, all 0.15s ease-in;
        font-family: 'Poppins', sans-serif;
    }

    /* Customize the ::after pseudo-element for the green button */
    .button-send::after {
        display: flex;
        align-items: center;
        justify-content: center;
        content: "Send";
        /* Text for the green button */
        width: 200px;
        height: 50px;
        position: absolute;
        top: 0;
        left: 0;
        transform: translate(5px, 5px);
        background-color: #008740;
        /* Background color for the green button */
        transition: all 0.15s ease-in;
    }

    /* Hover effect for the green button */
    .button-send:hover::after {
        transform: translate(-7px, -7px);
    }

    .button-send:hover {
        transform: translate(5px, 5px);
    }

    /* Active state for the green button */
    .button-send:active::after {
        background-color: #008740;
        /* Background color for the green button in the active state */
    }
</style>
@endsection