@extends('frontend.layouts.master')
@section('content')

<section class="contact-section">
    <div class="contact-container">
        <!-- Title with Icon -->
        <div class="contact-title d-flex align-items-center justify-content-center">

            <h1 class="contact-heading"> <i class="fa fa-envelope me-2 icon-color" aria-hidden="true"></i>Contact Us</h1>

        </div>

        <!-- Row for Card -->
        <div class="row contact-row">
            <div class="col-12">
                <div class="contact-card">
                    <div class="contact-card-body">
                        <div class="row contact-info-row">
                            <div class="col-12 col-md-6 contact-info pr-lg-5">
                                <h2 class="contact-info-heading">Connect with <a
                                        href="https://www.exchangebuz.com/">ExchangeBuz.com</a></h2>
                                <p class="h3 mt-4 mt-lg-5"><strong>Headquarter</strong></p>
                                <p>448 10th Ave, New York, NY 10001, United States.</p>
                                <p class="h3 mt-4 mt-lg-5"><strong>International Help-Desk</strong></p>
                                @php
                                    $settings = \App\Models\SettingsModel::first(); 
                                    $supportEmail = $settings->support_email ?? 'support@exchangebuz.com';
                                    $workTimeStart = $settings->work_time_start ?? '10 AM';
                                    $workTimeEnd = $settings->work_time_end ?? '10 PM'; 
                                    $workTimeZone = $settings->work_time_gmt_zone ?? 'UTC +3';
                                    $infoEmail = $settings->info_email ?? 'info@exchangebuz.com'; 
                                @endphp
                                <p class="mb-4"> <a href="mailto:support@exchangebuz.com">{{ $supportEmail }}</a></p>
                                </p>
                                <p class="text-large mb-4">Support, Sales, and Management Teams are currently available
                                    in English.</p>
                                <p class="mb-4">Our technical support is available by phone or email from {{ $workTimeStart}} - {{ $workTimeEnd }},
                                    {{ $workTimeZone }}, Monday through Friday.</p>
                                <p class="h3 mt-4 mt-lg-5"><strong>General inquiries</strong></p>
                                <p> <a href="mailto:contact@exchangebuz.com">{{ $infoEmail }}</a></p>
                                <p class="h3 mt-4 mt-lg-5"><strong>Support</strong></p>
                                <p>If you don't get an answer immediately, We might just be travelling through the
                                    middle of now-here. Till then you can search for your answer here: <a
                                        href="https://www.support.exchangebuz.com">Knowledge Base.</a></p>
                            </div>
                            <div class="col-12 col-md-6 contact-form-col">
                                <form id="contact-form" class="contact-form pt-3">
                                    @csrf 
                                    <div class="form-group col-lg-12">
                                        <input type="text" id="name" name="fullname" placeholder="Your Full Name"
                                            autocomplete="off" class="float-input mb-2" required>
                                        <label for="name" class="float-label">Your Full Name</label>
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <input type="email" id="email" name="email" placeholder="Your email address"
                                            autocomplete="off" class="float-input mb-2" required>
                                        <label for="email" class="float-label">Your email address</label>
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <input type="text" id="subject" name="subject" placeholder="Subject"
                                            autocomplete="off" class="float-input mb-2" required>
                                        <label for="subject" class="float-label">Subject</label>
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <input type="number" id="phone" name="phone" placeholder="Phone Number"
                                            autocomplete="off" class="float-input mb-2" required>
                                        <label for="number" class="float-label">Phone Number</label>
                                    </div>
                                    <div class="form-group col-lg-12">
                                        <textarea class="float-input" id="textarea" name="textarea"
                                            placeholder="Your Message"></textarea>
                                        <label for="textarea" class="float-label">Your Message</label>
                                    </div>
                                    <div class="form-group ml-3 mb-4">
                                        <div class="g-recaptcha"
                                            data-sitekey="6Lel4Z4UAAAAAOa8LO1Q9mqKRUiMYl_00o5mXJrR"></div>
                                    </div>


                                    <button type="submit" id="submit-button" class="btn submit-button ml-3" name="bit_send"><i
                                            class="fa fa-paper-plane" aria-hidden="true"></i> Send message</button>
                                </form>

                                

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


        </div>

                                <script>
                                    $(document).ready(function() {
                                        console.log("hello hello");
                                        
                                        $('#contact-form').on('submit', function(e) {
                                            e.preventDefault();

                                            $('#message').remove();

                                            var formData = $(this).serialize();

                                            $('#submit-button').prop('disabled', true).text('Sending...');

                                            $.ajax({
                                                url: '{{ route("contact.handleForm") }}',  
                                                method: 'POST',
                                                data: formData,
                                                headers: {
                                                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                                }, 
                                                success: function(response) {
                                                    toastr.success(response.message);
                                                    $('form').prepend('<div id="message" class="alert alert-success">' + response.message + '</div>');
                                                    $('#contact-form')[0].reset();
                                                    $('#submit-button').prop('disabled', false).text('Send message');
                                                },
                                                error: function(xhr, status, error) {
                                                    // Handle errors
                                                    var errorMessage = xhr.responseJSON ? xhr.responseJSON.message : 'Something went wrong';
                                                    toastr.success(errorMessage);
                                                    $('form').prepend('<div id="message" class="alert alert-danger">' + errorMessage + '</div>');
                                                    $('#submit-button').prop('disabled', false).text('Send message');
                                                }
                                            });
                                        });
                                    });
                                </script>
</section>

<section  class="container-fluid p-0">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.3085948386793!2d-74.00124272507175!3d40.755236934969275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259b30a7272b1%3A0x23e6d73beb44533f!2s448%2010th%20Ave%2C%20New%20York%2C%20NY%2010001%2C%20USA!5e0!3m2!1sen!2sin!4v1716819883430!5m2!1sen!2sin" width="100%" height="250" frameborder="1" style="border:0" allowfullscreen=""></iframe>
    
    </section>


@endsection