@extends('front.layout.app')
@section('content')

<style>
.contact::before {
    content: unset !important;
}
.central h3, .central h4 {
    color: #fff;
    font-size: 23px;
    text-align: left;
}
</style>


<main>

    <section class="main-banner">
        <div class="banner-img">
            <div class="img-main">
                <img class="img-fluid" src="https://fitkatiekarr.com/assets/admin/uploads/recent_upload_page/9bb6181fa7c066eae82ec469a8d47366.png" alt="">
            </div>

            <div class="content">
                <h2 data-aos="fade-left" data-aos-delay="200" data-aos-duration="1500">Contact <span>Us</span></h2>
                <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500">I’m always creating and uploading
                    new Content! :)</p>
            </div>
        </div>
    </section>

    <section class="contact pageCon mt-5 pt-5">
        <div class="container mt-3">
            <div class="row justify-content-center">
                <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 text-center">
                    <div class="row justify-content-center">
        <div class="col-12 col-lg-8">
                <div class="central">
                 <div class="row gy-4">
                    <div class="col-12 col-lg-6"><h3>Company Name :</h3></div>
                    <div class="col-12 col-lg-6"><h4>Fit Katie Karr LLC</h4></div>
                    <div class="col-12 col-lg-6"><h3>Business Address :</h3></div>
                    <div class="col-12 col-lg-6"> <h4>Dallas TX USA</h4></div>
                    <div class="col-12 col-lg-6"><h3>City :</h3></div>
                    <div class="col-12 col-lg-6"> <h4>Dallas</h4></div>
                    <div class="col-12 col-lg-6"><h3>State/Province :</h3></div>
                    <div class="col-12 col-lg-6"> <h4>Texas</h4></div>
                    <div class="col-12 col-lg-6"><h3>Country :</h3> 
                    </div> <div class="col-12 col-lg-6"> <h4>United States</h4></div>
                 </div>
                </div>
            </div>
        </div>
                    
                   
                    
                    
            
              </div>
                 

<!--<h2 class="form-title">Get in Touch</h2>-->
<!--<form>-->
<!--<div class="form-group">-->
<!--<label class="form-label" id="emailLabel" for="name"></label>-->
<!--<input type="text" class="form-control" id="name" name="name" placeholder="Company Name / Principal Name"-->
<!--tabindex="2">-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label class="form-label" id="emailLabel" for="email"></label>-->
<!--<input type="email" class="form-control" id="email" name="email" placeholder="Email" tabindex="2">-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label class="form-label" id="emailLabel" for="country"></label>-->
<!--<select class="form-control form-select" name="country" id="country">-->
<!--<option value="" selected disabled>Select Country</option>-->
<!--@if(isset($countries))-->
<!--@foreach($countries as $country)-->
<!--<option value="{{ $country->name }}">{{ $country->name }}</option>-->
<!--@endforeach-->
<!--@endif-->
<!--</select>-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label class="form-label" id="emailLabel" for="state"></label>-->
<!--<select class="form-control form-select " name="state" id="state">-->
<!--<option value="" selected disabled>Select State/Province</option>-->
<!--@if(isset($states))-->
<!--@foreach($states as $state)-->
<!--<option value="{{ $state->name }}">{{ $state->name }}</option>-->
<!--@endforeach-->
<!--@endif-->
<!--</select>-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label class="form-label" id="emailLabel" for="city"></label>-->
<!--<select class="form-control form-select" name="city" id="city">-->
<!--<option value="" selected disabled>Select City</option>-->
<!--<option value="Alexander City">Alexander City</option>-->
<!--<option value="Andalusia">Andalusia</option>-->
<!--<option value="Anniston">Anniston</option>-->
<!--<option value="Phenix City">Phenix City</option>-->
<!--<option value="Kingman">Kingman</option>-->
<!--<option value="Tucson">Tucson</option>-->
<!--<option value="Forrest City">Forrest City</option>-->
<!--<option value="Fort Smith">Fort Smith</option>-->
<!--<option value="Central City">Central City</option>-->
<!--<option value="Osceola">Osceola</option>-->
<!--<option value="Anaheim">Anaheim</option>-->
<!--<option value="Calistoga">Calistoga</option>-->
<!--<option value="Downey">Downey</option>-->
<!--<option value="Lancaster">Lancaster</option>-->
<!--<option value="Oakland">Oakland</option>-->
<!--<option value="San Francisco">San Francisco</option>-->
<!--<option value="San Marino">San Marino</option>-->
<!--<option value="Santa Monica">Santa Monica</option>-->
<!--<option value="Southington">Southington</option>-->
<!--<option value="Stratford">Stratford</option>-->
<!--<option value="Wallingford">Wallingford</option>-->
<!--<option value="Watertown">Watertown</option>-->
<!--<option value="Dover">Dover</option>-->
<!--<option value="New Castle">New Castle</option>-->
<!--<option value="Cocoa Beach">Cocoa Beach</option>-->
<!--<option value="Fort Lauderdale">Fort Lauderdale</option>-->
<!--<option value="Fort Myers">Fort Myers</option>-->
<!--<option value="Fort Pierce">Fort Pierce</option>-->
<!--<option value="Hollywood">Hollywood</option>-->
<!--<option value="Lake City">Lake City</option>-->
<!--<option value="Lakeland">Lakeland</option>-->
<!--<option value="New York City">New York City</option>-->
<!--<option value="Holland">Holland</option>-->
<!--<option value="Ozark">Ozark</option>-->
<!--</select>-->
<!--</div>-->
<!--<div class="form-group">-->
<!--<label class="form-label" id="messageLabel" for="message"></label>-->
<!--<textarea rows="6" cols="60" name="message" class="form-control" id="message" placeholder="Your message"-->
<!--tabindex="4"></textarea>-->
<!--</div>-->
<!--<div class="text-center margin-top-25">-->
<!--<a class="btn btn-mod btn-border btn-large sendMail">Send Message</a>-->
<!--<input type="reset" hidden id="resetBtn" />-->
<!--</div>-->

<!--</form>-->
 
                    
                </div>
                
        </div>
    </section>

@section('script')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script>
    
    $('.sendMail').click(function(e) {
        // e.prevent.default()
        $.ajax({
            url: "https://formsubmit.co/ajax/info@fitkatiekarr.com",
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}', // Include CSRF token
                name: $('#name').val(), // Email name
                email: $('#email').val(), // Email 
                country: $('#country').val(), // Email subject
                state: $('#state').val(),// Email message content
                city: $('#city').val(),
                message: $('#message').val(),
            },
            success: function(response) {
                Swal.fire({
                  position: 'top-end',
                  icon: 'success',
                  title: "Your Email has been send successfuly",
                  showConfirmButton: false,
                  timer: 1500
                })
                $("#resetBtn").click();
            },
            error: function(xhr) {
                // Handle errors, e.g., display an error message
                Swal.fire({
                  icon: 'error',
                  title: 'Oops...',
                  text: 'Something went wrong!'
                })
                console.log('Error: ' + xhr.responseText);
            }
        });
    });
</script>

@endsection

@endsection