@extends('inculdes.main')
@section('content')

<div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
    <div class="container py-5">
        <div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
            <h5 class="fw-bold text-primary text-uppercase">Contact Us</h5>
            <h1 class="mb-0">If You Have Any Query, Feel Free To Contact Us</h1>
        </div>

        <!-- Contact Info -->
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4 mb-5">
            <div class="col">
                <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.1s">
                    <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
                        <i class="fa fa-phone-alt text-white"></i>
                    </div>
                    <div class="ps-4">
                        <h5 class="mb-2">Call us for Appointment</h5>
                        <h4 class="text-primary mb-0">
                            <a href="tel:{{ site_settings()->phone }}">813-322-3936</a>
                        </h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.4s">
                    <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
                        <i class="fa fa-envelope-open text-white"></i>
                    </div>
                    <div class="ps-4">
                        <h5 class="mb-2">Email us for Appointment</h5>
                        <h4 class="text-primary mb-0">
                            <a href="mailto:{{ site_settings()->email }}">{{ site_settings()->email }}</a>
                        </h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="d-flex align-items-center wow fadeIn" data-wow-delay="0.8s">
                    <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
                        <i class="fa fa-sms text-white"></i>
                    </div>
                    <div class="ps-4">
                        <h5 class="mb-2">Message us for Appointment</h5>
                        <h4 class="text-primary mb-0">
                            <a href="sms:8133226636">813-322-6636</a>
                        </h4>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="d-flex align-items-center wow fadeIn" data-wow-delay="1.2s">
                    <div class="bg-primary d-flex align-items-center justify-content-center rounded" style="width: 60px; height: 60px;">
                        <i class="fa fa-map-marker-alt text-white"></i>
                    </div>
                    <div class="ps-4">
                        <h5 class="mb-2">Visit our office</h5>
                        <h4 class="text-primary mb-0" style="font-size: 0.9rem;">{{ site_settings()->address }}</h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact Form and Map -->
        <div class="row g-5">
            <div class="col-lg-6 wow slideInUp" data-wow-delay="0.3s">
                <form id="contact-form">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-6">
                            <input type="text" name="name" id="name" class="form-control border-0  bg-light px-4" required placeholder="Your Name*" style="height: 55px;">
                            <span class="invalid-feedback d-none" id="name-error" role="alert"></span>
                        </div>
                        <div class="col-md-6">
                            <input type="email" name="email" id="email" class="form-control border-0 bg-light px-4" required placeholder="Your Email*" style="height: 55px;">
                            <span class="invalid-feedback d-none" id="email-error" role="alert"></span>
                        </div>
                        <div class="col-12">
                            <input type="text" name="phone" id="phone" class="form-control border-0 bg-light px-4" placeholder="Phone*" style="height: 55px;">
                            <span class="invalid-feedback d-none" id="phone-error" role="alert"></span>
                        </div>
                        <div class="col-12">
                            <input type="text" name="company" id="company" class="form-control border-0 bg-light px-4" placeholder="Company Name" style="height: 55px;">
                            <span class="invalid-feedback d-none" id="company-error" role="alert"></span>
                        </div>
                        <div class="col-12">
                            <select name="services[]" id="services" class="form-select contact_services bg-light border-0" multiple style="height: 55px;">
                                <option value="Personal Tax Preparation">Personal Tax Preparation</option>
                                <option value="Business Tax Preparation">Business Tax Preparation</option>
                                <option value="Bookkeeping">Bookkeeping</option>
                                <option value="Incorporation">Incorporation</option>
                                <option value="Payroll">Payroll</option>
                                <option value="Tax Notices">Tax Notices</option>
                                <option value="Consultation">Consultation</option>
                                <option value="Due Diligence">Due Diligence</option>
                                <option value="Private Foundation">Private Foundation</option>
                                <option value="Other">Other</option>
                            </select>
                            <span class="invalid-feedback d-none" id="services-error" role="alert"></span>
                        </div>
                        <div class="col-12">
                            <textarea name="message" id="message" class="form-control border-0 bg-light px-4 py-3" rows="4" placeholder="Message"></textarea>
                            <span class="invalid-feedback d-none" id="message-error" role="alert"></span>
                        </div>
                        <div class="col-12" style="font-size: 13px;">
                            <input type="checkbox" style="display: inline" checked required name="consent" id="consent">
                            <label style="display: inline" for="consent" role="alert">
                                By signing up, I agree to the 
                                <a href="https://skfinancial.com/privacy-policy">Privacy Policy</a> and 
                                <a href="https://skfinancial.com/terms">Terms & Conditions</a>
                            </label>
                        </div>
                        <div class="col-12">
                            <button class="btn btn-primary w-100 py-3 submit-btn" type="submit">Send Message</button>
                        </div>
                    </div>
                </form>
            </div>

            <div class="col-lg-6 wow slideInUp" data-wow-delay="0.6s">
                <iframe class="position-relative rounded w-100" src="https://maps.google.com/maps?width=100%25&amp;height=600&amp;hl=en&amp;q=2210%20Ashley%20Oaks%20Cir%20101,%20Wesley%20Chapel,%20FL%2033544,%20United%20States+(SK%20Financial)&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed" frameborder="0" style="min-height: 350px; border:0; max-width:100%;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
            </div>
        </div>
    </div>
</div>

@endsection