@extends('frontend/layouts/master')

@section('meta')
    <meta name="title" content="">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:site_name" content="{{ ucwords(config('app.name')) }}">
    <meta property="og:locale" content="en_GB">
    <meta property="og:type" content="{{ ucwords(config('app.name')) }}">
    <meta name="twitter:title" content="">
    <meta name="twitter:description" content="">
    <meta name="twitter:domain" content="{{ env("APP_URL") }}">
@endsection

@section('title')
@endsection

@section('content')
<!-- Breadcrumbs Start -->
<div class="rs-breadcrumbs img1">
    <div class="container">
        <div class="breadcrumbs-inner">
            <h1 class="page-title">
                About Us
                <span class="watermark">About</span>
            </h1>
            <span class="sub-text">With 20+ years of expertise, Jones Property Consultant helps you buy, sell, and invest with confidence. <br/> Trusted guidance, smart investments, and seamless property solutions!</span>
        </div>
    </div>
</div>
<!-- Breadcrumbs End -->

<!-- About Start -->
<div id="rs-about" class="rs-about about-style2 pt-50 pb-50 md-pt-50 md-pb-50">
    <div class="container">
        <div class="row y-middle">
            <div class="col-lg-6 pr-40 md-pr-15 md-mb-50">
                <div class="about-img wow fadeInLeft" data-wow-duration="1.5s" data-wow-delay="0s">
                    <img src="{{ url('frontend/assets/images/about/about-us.webp') }}" alt="Images">
                </div>
            </div>
            <div class="col-lg-6 pr-35 md-pr-15 pl-30 md-pl-15">
                <div class="sec-title mb-45 md-mb-25">
                    <span class="sub-text big-text">About Us</span>
                    <h2 class="title title2 title-color pb-20">
                        Over 20 Years of Excellence in <span> Property Consulting</span>
                    </h2>
                    <p class="desc small2">At Jones Property Consultant, we bring over 20 years of expertise in helping clients make smart, strategic property decisions. Whether you're buying, selling, or investing, our trusted insights, market knowledge, and client-first approach ensure you get the best results.</p>
                </div>
                <!-- Counter Section Start -->
                <div id="rs-counter" class="rs-counter counter-style2 pb-45">
                    <div class="row">
                        <div class="col-lg-5 md-mb-30 col-md-5">
                            <div class="rs-counter-list">
                                <div class="counter-right-border"></div>
                                <div class="count-text">
                                    <div class="count-number">
                                        <span class="rs-count odometer" data-count="552">00</span>
                                        <span class="prefix">+</span>
                                    </div>
                                    <span class="title">Happy Customers</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-7">
                            <div class="rs-counter-list widget-padding">
                                <div class="count-text">
                                    <div class="count-number">
                                        <span class="rs-count odometer" data-count="652">00</span>
                                        <span class="prefix">+</span>
                                    </div>
                                    <span class="title">Completed Cases</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- About End -->

<!-- Call To Action Choose Start -->
<div class="rs-cta pt-50 pb-50 md-pt-50 md-pb-50 bg-light">
    <div class="container">
        <div class="call-action bg1 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="0s">
            <div class="sec-title">
                <span class="sub-text big-text">Careers</span>
                <h2 class="title title2 pb-28">
                    Want to Be Part of<br>
                    Our <span>Team?</span>
                </h2>
                <div class="btn-part">
                    <a class="readon details join" href="about.html">Join Our Team</a>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Call To Action Choose End -->

@include('frontend.inc.testimonial')

<!-- Contact Start -->
<div class="rs-contact contact-style2 pt-50 pb-50 md-pt-50 md-pb-50 bg-light">
    <div class="container">
        <div class="row no-gutters">
            <div class="col-lg-6">
                <div class="con-about">
                    <img src="{{ url('frontend/assets/images/contact/free-consultation.webp') }}" alt="Images">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="contact-section">
                    <div class="contact-wrap">
                        <div class="sec-title mb-35">
                            <h2 class="title title2">
                                Free <span>Consultation</span>
                            </h2>
                        </div>
                        <form>
                            <fieldset>
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 mb-30">
                                        <input class="from-control" type="text" id="name" name="name" placeholder="Name" required="">
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 mb-30">
                                        <input class="from-control" type="text" id="email" name="email" placeholder="E-Mail" required="">
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 mb-30">
                                        <input class="from-control" type="text" id="phone" name="phone" placeholder="Phone Number" required="">
                                    </div>
                                    <div class="col-lg-12 mb-35">
                                        <textarea class="from-control" id="message" name="message" placeholder="Your Message Here" required=""></textarea>
                                    </div>
                                </div>
                                <div class="btn-part">
                                    <div class="form-group mb-0">
                                        <input class="readon details submit btn-consultation" type="button" value="Submit Now">
                                    </div>
                                </div>
                            </fieldset>
                        </form>
                        <div id="form-messages"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Contact End -->

{{-- @include('frontend.inc.partner' , ["partner" => $partner]) --}}

@endsection

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#phone").mask('07999-999999');

            const Toast = Swal.mixin({
                toast: true,
                position: "bottom",
                showConfirmButton: false,
                timer: 3000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.onmouseenter = Swal.stopTimer;
                    toast.onmouseleave = Swal.resumeTimer;
                }
            });

            $(".btn-consultation").click(function () {
                var name = $("#name").val();
                var email = $("#email").val();
                var phone = $("#phone").val();
                var message = $("#message").val();

                if(name == ""){
                    Toast.fire({
                        icon: "warning",
                        text: "Name is required"
                    });

                    return;
                }

                if(email == ""){
                    Toast.fire({
                        icon: "warning",
                        text: "Email is required"
                    });
                    return;

                }

                if(phone == ""){
                    Toast.fire({
                        icon: "warning",
                        text: "Phone is required"
                    });
                    return;

                }

                if(message == ""){
                    Toast.fire({
                        icon: "warning",
                        text: "Message is required"
                    });
                    return;

                }

                $(this).html('<i class="fa-solid fa-spinner-third fa-spin"></i>');
                $(this).attr('disabled' , 'disabled');

                $.ajax({
                    url : "{{ route('consultation_submit') }}",
                    type : "POST",
                    data : {
                        name : name,
                        email : email,
                        phone : phone,
                        message : message,
                        _token : "{{ csrf_token() }}",
                    },
                    success:function(response){
                        if(response['status'] == "success"){
                            Toast.fire({
                                icon: "success",
                                text: response['message']
                            });

                            $("#name").val('');
                            $("#email").val('');
                            $("#phone").val('');
                            $("#message").val('');
                        }
                        else{
                            Toast.fire({
                                icon: "warning",
                                text: response['message']
                            });
                        }
                    }
                });
            });
        });
    </script>

@endsection