@extends('frontend.layouts.app')

@section('title')
    Contact Us | Philippine Green Building Initiative (PGBI)
@endsection

@section('seo')
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Contact Us | Philippine Green Building Initiative (PGBI)" />
    <meta property="og:url" content="{{ url('contact-us') }}" />
    <meta property="og:site_name" content="Contact Us | Philippine Green Building Initiative (PGBI)" />
    <meta property="og:image" content="{{ asset('images/meta-thumbnail.jpg') }}" />
    <meta property="og:thumbnail" content="{{ asset('images/meta-thumbnail.jpg') }}" />
@endsection

@section('content')
    {{-- BANNER --}}
    <div class="container-fluid px-0 mb-5 text-center">
        <img src="{{ asset('images/banner-contact.jpg') }}" class="img-fluid" alt="">
    </div>

    <div class="container overflow-hidden mb-5">
        <div class="row">
            <div class="col-12 col-md" data-aos="flip-left" data-aos-duration="2000">
                <h2 class="fw-bold mb-4">Get in Touch With Us</h2>

                <h4 class="fw-bold mb-4">PHILIPPINE GREEN BUILDING INTIATIVE</h4>

                <div class="row mb-4">
                    <div class="col-12 col-md-6">
                        <p>
                            <i class="fa-solid fa-location-dot color-light-green"></i> &emsp; Architectural Center Club
                            (ACCI)
                            6082, R. Palma St., Rockwell, Makati, Metro Manila, Philippines
                        </p>
                        <p>
                            <i class="fa-solid fa-mobile-screen-button color-light-green"></i> &emsp; +632 87285895 / +63
                            9190028159
                        </p>
                        <p>
                            <i class="fa-solid fa-envelope color-light-green"></i> &emsp; pgbi.secretariat@gmail.com
                        </p>
                    </div>
                </div>

                <div class="d-flex gap-4 ps-5">
                    <a href="https://www.facebook.com/" class="text-decoration-none">
                        <div class="border-circle-icon d-flex justify-content-center align-items-center text-white">
                            <i class="fa-brands fa-facebook-f fs-5"></i>
                        </div>
                    </a>

                    <a href="https://www.linkedin.com/login" class="text-decoration-none">
                        <div class="border-circle-icon d-flex justify-content-center align-items-center text-white">
                            <i class="fa-brands fa-linkedin-in fs-5"></i>
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-12 col-md" data-aos="flip-right" data-aos-duration="2000">
                <h2 class="fw-bold mb-2">Feel Free To Contact Us</h2>

                <form action="{{ url('contact') }}" class="form-contact" method="POST">
    @csrf
    <div class="row gy-3">
        <div class="col-12 col-md-6">
            <input type="text" class="form-control form-blank" name="name" value="{{ old('name') }}" placeholder="Your Name" required>
        </div>
        <div class="col-12 col-md-6">
            <input type="email" class="form-control form-blank" name="email" value="{{ old('email') }}" placeholder="Email Address" required>
        </div>
        <div class="col-12 col-md-6">
            <input type="text" class="form-control form-blank" name="phone" value="{{ old('phone') }}" placeholder="Phone Number" required>
        </div>
        <div class="col-12 col-md-6">
            <input type="text" class="form-control form-blank" name="subject" value="{{ old('subject') }}" placeholder="Subject" required>
        </div>
        <div class="col-12">
            <textarea rows="3" class="form-control form-blank" name="message" placeholder="Message" required>{{ old('message') }}</textarea>
        </div>
        <div class="col-12 col-md-4">
            <button type="submit" class="btn py-3 rounded-3">Send Now</button>
        </div>
    </div>
</form>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
    $(document).ready(function () {
    $('.form-contact').submit(function (e) {
        e.preventDefault();

        let form = $(this);
        let formData = form.serialize();

        $.ajax({
            method: "POST",
            url: "{{ url('contact') }}",
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function (response) {
                showSuccessAlert(response.message);
                form.trigger("reset");
            },
            error: function (jqXHR) {
                if (jqXHR.responseJSON && jqXHR.responseJSON.errors) {
                    showFieldErrors(jqXHR.responseJSON.errors);
                } else {
                    showErrorAlert(jqXHR.responseJSON.message || 'Failed to submit.');
                }
            }
        });

        function showSuccessAlert(message) {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                text: message,
                showConfirmButton: false,
                timer: 1500,
                timerProgressBar: true,
            }).then(() => {
                location.reload();
            });
        }

        function showErrorAlert(message) {
            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'error',
                text: message,
                timer: 1500,
                showConfirmButton: false,
                timerProgressBar: true,
            });
        }

        function showFieldErrors(errors) {
            for (let key in errors) {
                if (errors.hasOwnProperty(key)) {
                    showErrorAlert(errors[key][0]);
                }
            }
        }
    });
});

    </script>
@endsection