@extends('layouts.app')

@section('title')
    <style>
        #notify_cont {
            position: absolute;
            width: 412px;
            background: #fff;
            z-index: 11;
            /*top: 67px;*/
            border-radius: 5px;
            padding: 5px 15px;
            max-height: 357px;
            overflow: hidden;
            overflow-y: auto;
            border: 1px solid #eee;
            /*-webkit-box-shadow: 0px 0px 11px -6px rgb(0 0 0 / 75%);*/
            /*-moz-box-shadow: 0px 0px 11px -6px rgba(0,0,0,0.75);*/
            /*box-shadow: 0px 0px 11px -6px rgb(0 0 0 / 75%);*/
            display: none;
        }

        .notify_list {
            cursor: pointer;
            width: 100%;
            float: left;
            color: #666;
            border-bottom: 1px solid #fafafa;
            padding: 5px 0;
        }

        .notify_list:hover {
            color: #666;
            font-weight: bold;
        }
        .step-2{
            display: none;
        }
        .step-3{
            display:none;
        }
        .step-4{
            display:none;
        }

        .thank-you-pop img
        {
            width:100px;
            height:auto;
            margin:0 auto;
            display:block;
            margin-bottom:25px;
            margin-top:25px;
        }
        .yes-no-toggle__button--first {
            border-radius: 5px 0 0 5px!important;
            border-right-width: 0!important;
        }

        .yes-no-toggle__button {
            z-index: 1!important;
            position: relative!important;
            display: inline-block!important;
            margin: 0!important;
            padding: 6px 10px!important;
            min-width: 47px!important;
            background-color: #fff;
            border: 1px solid #969696!important;
            border-radius: 0 5px 5px 0!important;
            color: #555;
            -webkit-box-shadow: none!important;
            box-shadow: none!important;
            font-size: 16px!important;
            line-height: normal!important;
            cursor: pointer!important;
            outline: none!important;
        }
        .yes-no-toggle__button--first {
            border-radius: 5px 0 0 5px!important;
            border-right-width: 0!important;
        }
    </style>

    @section('content')

        <header data-spy="affix" data-offset-top="39" data-offset-bottom="0" class="large">

            <div class="row container box">
                <div class="col-md-5">
                    <!-- Logo start -->
                    <div class="brand">
                        <h1><a class="scroll-to" href="#top"><img class="img-responsive" width="150"
                                                                  src="img/text10x-logo.png" alt="text10x"></a></h1>
                    </div>
                    <!-- Logo end -->
                </div>

                <div class="col-md-7">
                    <!-- <div class="pull-right">
                          <div class="header-info pull-right">
                            <div class="contact pull-left">CONTACT: (516) 412 6787</div>
                          </div>
                        </div> -->

                    <div class="clearfix"></div>

                    <!-- start navigation -->
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="container-fluid">
                            <!-- Toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse"
                                        data-target="#bs-example-navbar-collapse-1">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand scroll-to" href="#top"><img class="img-responsive" width="150"
                                                                                   src="img/text10x-logo.png" alt="Car|Rental"></a>
                            </div>
                            <!-- Collect the nav links, for toggling -->
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <!-- Nav-Links start -->
                                <ul class="nav navbar-nav navbar-right">
                                    <li class="f-to"><span class="scroll-to">
                                        @if (isset($fullName))
                                                {{ $fullName }}
                                            @endif
                                    </span></li>
                                    <li class="f-to"><span class="scroll-to">
                                        @if (isset($company))
                                                {{ $company->name }}
                                            @endif
                                    </span></li>
                                    <li class="f-to"><span class="scroll-to">
                                        @if (isset($formattedPhone))
                                                {{ $formattedPhone }}
                                            @endif
                                    </span></li>
                                </ul>
                                <!-- Nav-Links end -->
                            </div>
                        </div>
                    </nav>
                    <!-- end navigation -->
                </div>
            </div>
        </header>
        <!-- Teaser start -->
        <section id="teaser">
            <div class="container">
                <div class="row">
                    <div class="col-md-7 col-xs-12 pull-right">
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <!-- Wrapper for slides start -->
                            <div class="carousel-inner">
                                <div class="item active">
                                    <h1 class="title">Get your vehicle appraised!
                                       
                                    </h1>
                                    <div class="car-img">
                                        <img src="img/car1.png" class="img-responsive" alt="car1">
                                    </div>
                                </div>
                                <div class="item">
                                    <h1 class="title">Get your vehicle appraised!

                                    </h1>
                                    <div class="car-img">
                                        <img src="img/car2.png" class="img-responsive" alt="car1">
                                    </div>
                                </div>
                            </div>
                            <!-- Wrapper for slides end -->

                            <!-- Slider Controls start -->
{{--                            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">--}}
{{--                                <span class="glyphicon glyphicon-chevron-left"></span>--}}
{{--                            </a>--}}
{{--                            <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">--}}
{{--                                <span class="glyphicon glyphicon-chevron-right"></span>--}}
{{--                            </a>--}}
                            <!-- Slider Controls end -->
                        </div>
                    </div>
                    <div class="col-md-5 col-xs-12 pull-left">
                        <div class="reservation-form-shadow">
                            <form id="car-select-form">
                                @csrf
                                <div class="step-1">

                                <span style="text-align: center;font-size: 18px;" class="different-drop-off">Search For
                                    Vehcile:</span>
                                    <!-- Pick-up location start -->
                                    <input type="hidden" value="{{ isset($lead) ? $lead->id : '' }}" id="lead_id">
                                    <div class="location">
                                        <div class="input-group pick-up">
                                            <input type="hidden" value="{{ isset($lead) ? $lead->id : '' }}" id="leadid">
                                            <input type="text" name="vechilesearch" onkeyup="vehcilesearch();"
                                                   id="vechilesearch" class="form-control" placeholder="Year Make & Model"
                                                   value="" style="border: solid black 1px;" autocomplete="off">
                                        </div>

                                        {{--                            <div id="notify_cont" style="display:none;"></div> --}}
                                        <div id="notify_cont">
                                            <span class="notify_list">No result!</span>
                                        </div>
                                        <!-- Pick-up location end -->

                                        <a class="different-drop-off" href="#">Example: 2016 BMW 3
                                            Series</a>
                                        <span style="text-align: center;font-size: 18px;" class="different-drop-off">Or Select
                                        Your Vehcile</span>
                                        <div class="row">

                                            <div class="col-md-12 drop">
                                                <div class="form-group">
                                                    <select name="year" style="width:100% !important;"
                                                            class="form-control" id="year">
                                                        <option value>Year</option>
                                                        @php

                                                            $currYear = date('Y');
                                                            $oldYear = date('Y', strtotime('-40 years'));

                                                            // Generate years array
                                                            for ($i = $currYear; $i >= $oldYear; $i--) {
                                                                $years[] = $i;
                                                            }
                                                        @endphp
                                                        @foreach ($years as $year)
                                                            <option value="{{ $year }}">{{ $year }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 drop">
                                                <div class="form-group">

                                                    <select name="make" class="form-control" id="make" disabled>
                                                        <option value>Make</option>
                                                        @foreach ($carMakes as $make)
                                                            <option value="{{ $make->id }}">{{ $make->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12 drop">
                                                <div class="form-group">
                                                    <select name="model" class="form-control" id="model" disabled>
                                                        <option value>Model</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-12 drop">
                                                <button class="btn btn-success btn-lg btn-block vechile-btn"
                                                        style="background-color: #2F6FED !important;border-color: #2F6FED !important;outline: none;"
                                                        id="strtbtn" disabled>Get
                                                    Started</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="step-2">
                                <span style="text-align: center;font-size: 18px;" class="different-drop-off">
                                    <h3 class="hname2">
                                        -
                                    </h3>
                                </span>

                                    <h5 id="backstrt" style="cursor: pointer; text-align: center; color: forestgreen;">Edit Vehicle</h5>
                                    <span style="text-align: center;font-size: 18px;" class="different-drop-off">Tell us more
                                    about your Requirement:</span>
                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <div class="form-group">

                                                <select name="style" class="form-control" id="style">
                                                    <option value="" selected>Select a Car Style</option>
                                                    <option value="EX-L 4dr Sedan (1.5L 4cyl Turbo CVT)">EX-L 4dr Sedan (1.5L
                                                        4cyl Turbo CVT)</option>
                                                    <option value="EX-L 4dr Sedan (1.5L 4cyl Turbo CVT)">EX-L 4dr Sedan (2.0L
                                                        4cyl Turbo 10A)</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <div class="form-group">
                                                <label style="color: #716D6E;" >Current Condition:</label>
                                                <select name="condition" class="form-control" id="condition">
                                                    <option value="Rough">Rough</option>
                                                    <option value="Average">Average</option>
                                                    <option value="Clean">Clean</option>
                                                    <option value="Outstanding">Outstanding</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <div class="form-group">
                                                <label style="color: #716D6E;">Current Mileage:</label>
                                                <input type="number" id="mileage" class="form-control" name="mileage"
                                                       autocomplete="off">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <button class="btn btn-success btn-lg btn-block vechile-btn"
                                                    style="background-color: #2F6FED !important;border-color: #2F6FED !important;outline: none;"
                                                    id="nextbtn" disabled>Next</button>
                                        </div>
                                    </div>


                                </div>


                                <div class="step-3">
                                <span style="text-align: center;font-size: 18px;" class="different-drop-off">
                                    <h3 class="hname2">
                                        -
                                    </h3>
                                </span>
                                    <span style="text-align: center;font-size: 18px;"
                                          class="different-drop-off bodystyle"></span>
                                    <h5  id="backstep" style="cursor: pointer; text-align: center; color: forestgreen;">Edit Vehicle</h5>
                                    <span style="text-align: center;font-size: 14px;" class="different-drop-off"><b>Your
                                        appraisal is ready!</b></span>
                                    <span style="text-align: center;font-size: 18px;" class="different-drop-off">Please enter
                                    your contact information to receive an emailed copy of your appraisal:</span>

                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <div class="form-group">

                                                <input id="firstName" name="firstName" class="form-control info"
                                                       placeholder="First name" type="text" value>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <div class="form-group">

                                                <input id="lastName" name="lastName" class="form-control info"
                                                       placeholder="Last name" type="text" value>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <div class="form-group">

                                                <input id="email" name="email" class="form-control info"
                                                       type="email" placeholder="E-mail" value>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <div class="form-group">

                                                <input id="phone" name="phone" class="form-control info"
                                                       type="tel" placeholder="+1 (___) ___-____" maxlength="17" value>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="share-lead-info__subheader share-lead-info__subheader--voi">
                                                <div class="share-lead-info__subheader-text eva-themed">Are you currently in
                                                    the market for a&nbsp;vehicle?</div>
                                                <div class="share-lead-info__subheader-toggle eva-themed">
                                                    <div class="yes-no-toggle eva-themed yes-no-toggle--true"
                                                         style="display:flex;padding-bottom: 4px;">
                                                        <button
                                                                class="yes-no-toggle__button yes-no-toggle__button--first eva-themed yesbtn"
                                                                onClick="showmodel(event);">Yes</button>
                                                        <button
                                                                class="yes-no-toggle__button yes-no-toggle__button--last eva-themed nobtn"
                                                                onClick="hidemodel(event);">No</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-4 carmake2">
                                        <div class="col-md-12">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <select name="year2" class="form-control" id="year2">
                                                            <option value="">Year</option>
                                                            @foreach ($years as $year)
                                                                <option value="{{ $year }}">{{ $year }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <select name="make2" class="form-control" id="make2" disabled>
                                                            <option value="">Make</option>
                                                            @foreach ($carMakes as $make)
                                                                <option value="{{ $make->id }}">{{ $make->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-group">
                                                        <select name="model2" class="form-control" id="model2" disabled>
                                                            <option value="">Model</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12 drop">
                                            <button class="btn btn-success btn-lg btn-block vechile-btn"
                                                    style="background-color: #2F6FED !important;border-color: #2F6FED !important;outline: none;"
                                                    id="reportbtn" disabled>Get Your TMV<sup></sup> Report</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="step-4" >
                                    <div class="row">
                                        <div class="card">
                                            <div class="card-body card-body-3">
                                                <div class="col-md-12">
                                                    <h2 style="text-align: center;" class="hname2">
                                                        -
                                                    </h2>
                                                    <h3 style="text-align: center;" class="step-subtitle eva-themed bodystyle"></h3>
                                                    <div class="thank-you-pop"><img src="https://vehicle.text10x.ai/appraise-vehicle/Green-Round-Tick.png" alt=""></div>
                                                    <h2 class="final" style="text-align: center;">Congratulation!</h2>
                                                    <h4 class="share-lead-info__status-message eva-themed" style="font-weight:100 !important; text-align: center;">Your vehicle appraisal form is submitted successfully!</h4>
                                                    <h4 class="share-lead-info__status-message eva-themed" style="font-weight:100 !important; text-align: center;">One of our experts will get back to you.</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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


                    </div>

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

        <div class="container">
            <div class="row text-center">
                <div class="col-md-4">
                    <div class="content-box">
                        <div class="circle">1</div>
                        <span>Tell us more about your Requirement</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="content-box">
                        <div class="circle">2</div>
                        <span>Enter additional information</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="content-box">
                        <div class="circle">3</div>
                        <span>View your details</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="arrow-down"></div>
        <!-- Teaser end -->

        <!-- Locations start -->
        <section id="locations">
            <div class="container location-select-container wow bounceInDown" data-wow-offset="200">

                <div class="arrow-down-location">&nbsp;</div>
            </div>

            @if(isset($company) && !empty($company->address) && !empty($company->city) && !empty($company->state))
            <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?width=100%25&amp;height=300&amp;hl=en&amp;q={{$company->address}},{{$company->city}},{{$company->state}};t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe>
            @else
                <iframe
                        width="100%"
                        height="400"
                        frameborder="0"
                        scrolling="no"
                        marginheight="0"
                        marginwidth="0"
                        src="https://maps.google.com/maps?q=New+York,NY&t=&z=14&ie=UTF8&iwloc=B&output=embed">
                </iframe>
            @endif
        </section>
        <!-- Locations end -->

        <!-- Contact start -->
        <section id="contact" class="container wow bounceInUp" data-wow-offset="50">
            <div class="row">
                <div class="col-md-12">
                    <h2>True Market Value Report®</h2>
                </div>

                <div class="col-md-8 col-xs-12 pull-left">
                    <p class="contact-info"><b>
                            @if (isset($company))
                                {{ $company->name }}
                            @endif
                        </b> is a powerful tool to
                        help you identify a fair price for your vehicle, derived from a
                        proprietary algorithm developed by statisticians, data
                        collection/processing experts and pricing analysts.<br>
                        <span class="address"> We take many factors into account,
                        including but not limited to: make, model, age, mileage,
                        original and current market pricing, geographic region and
                        seasonality.</span>
                    </p>
                </div>

            </div>
        </section>
        <!-- Contact end -->

        <a href="#" class="scrollup">ScrollUp</a>

        <!-- Footer start -->
        <footer>
            <div class="container">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div class="clearfix"></div>
                        <p class="copyright">Copyright 2025 Text10X. All Rights Reserved.</p>
                    </div>
                </div>
            </div>
        </footer>
        <!-- Footer end -->

    @endsection
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
            crossorigin="anonymous"></script>

    <script type="text/javascript">
        $(document).on('change', '#model', function() {
            if ($(this).val() === "") {
                $('#strtbtn').attr('disabled', true);
                $('#strtbtn').attr('style',
                    'background-color: #e5e5e5 !important;border-color: #e5e5e5 !important;outline: none;');
            } else {
                $('#strtbtn').attr('disabled', false);
                $('#strtbtn').attr('style',
                    'background-color: #28a745 !important;border-color: #28a745 !important;outline: none;');
            }
        });
        // first step on change
        $(document).on('change', '#year', function() {
            if ($(this).val() === "") {
                $('#make').attr('disabled', true);
                $('#make').prop('selectedIndex', 0);
                $('#model').attr('disabled', true);
                $('#model').prop('selectedIndex', 0);
            } else {
                $('#make').attr('disabled', false);
            }
        });

        // fiesrt step
        // $(document).on('change', '#make', function() {
        //     if ($(this).val() === "") {
        //         $('#model').attr('disabled', true);
        //         $('#model').prop('selectedIndex', 0);
        //     } else {
        //         $('#model').attr('disabled', true);
        //         var makeid = $(this).val();
        //         $.ajax({
        //             url: "loadcars.php",
        //             type: "POST",
        //             data: {
        //                 makeid: makeid,
        //                 check: "ajax1"
        //             },
        //             success: function(data) {
        //                 $('#model').html(data);
        //                 $('#model').attr('disabled', false);
        //             },
        //         });
        //     }
        // });

        $(document).on('change', '#make', function() {
            if ($(this).val() === "") {
                $('#model').attr('disabled', true);
                $('#model').prop('selectedIndex', 0);
            } else {
                $('#model').attr('disabled', true);
                var makeid = $(this).val();

                $.ajax({
                    url: "{{ route('load.models') }}",
                    type: "POST",
                    data: {
                        makeid: makeid,
                        _token: "{{ csrf_token() }}" // Laravel CSRF token
                    },
                    success: function(response) {
                        $('#model').html(response);
                        $('#model').attr('disabled', false);
                    },
                });
            }
        });




        // 2nd modal make year 3rd step

        $(document).on('change', '#year2', function() {

            $('#reportbtn').attr('disabled', true);
            $('#reportbtn').attr('style',
                'background-color: #e5e5e5 !important;border-color: #e5e5e5 !important;outline: none;');

            if ($(this).val() === "") {
                $('#make2').attr('disabled', true);
                $('#make2').prop('selectedIndex', 0);
                $('#model2').attr('disabled', true);
                $('#model2').prop('selectedIndex', 0);
            } else {
                $('#make2').attr('disabled', false);

            }
        });

        $(document).on('change', '#make2', function() {
            if ($(this).val() === "") {
                $('#model2').attr('disabled', true);
                $('#model2').prop('selectedIndex', 0);
            } else {
                $('#model2').attr('disabled', true);
                var makeid = $(this).val();

                $.ajax({
                    url: "{{ route('load.models') }}",
                    type: "POST",
                    data: {
                        makeid: makeid,
                        _token: "{{ csrf_token() }}" // Laravel CSRF token
                    },
                    success: function(data) {
                        $('#model2').attr('disabled', false);
                        $('#model2').html(data);
                    },
                });
            }
        });


        // 3rd step
        $(document).on('change', '#model2', function() {
            if ($(this).val() === "" || $('#firstName').val() == "" || $('#lastName').val() == "" || $('#email')
                .val() == "" || $('#phone').val() == "") {
                $('#reportbtn').attr('disabled', true);
                $('#reportbtn').attr('style',
                    'background-color: #e5e5e5 !important;border-color: #e5e5e5 !important;outline: none;');
            } else {
                $('#reportbtn').attr('disabled', false);
                $('#reportbtn').attr('style',
                    'background-color: #28a745 !important;border-color: #28a745 !important;outline: none;');
            }
        });

        // function showmodel(event) {
        //     alert("here");
        //     event.preventDefault();
        //     $('.carmake2').show();
        //     $('.yesbtn').css({
        //         'background-color': '#007ee5',
        //         'color': 'white',
        //     });
        //     $('.nobtn').css('background-color', '#fff');
        //     $('.nobtn').css('color', '#555');
        // }

        $(document).ready(function() {
            $('.yesbtn').click(function(event) {
                showmodel(event);
            });
        });

        function showmodel(event) {

            event.preventDefault(); // Prevent default behavior
            $('.carmake2').show();
            $('.yesbtn').css({
                'background-color': '#007ee5',
                'color': 'white',
            });
            $('.nobtn').css('background-color', '#fff');
            $('.nobtn').css('color', '#555');
        }

        // function hidemodel(event) {
        //     event.preventDefault();
        //     $('#year2').prop('selectedIndex', 0);
        //     $('#make2').attr('disabled', true);
        //     $('#make2').prop('selectedIndex', 0);
        //     $('#model2').attr('disabled', true);
        //     $('#model2').prop('selectedIndex', 0);
        //
        //     if ($('#firstName').val() == "" || $('#lastName').val() == "" || $('#email').val() == "" || $('#phone').val() ==
        //         "") {
        //         $('#reportbtn').attr('disabled', true);
        //         $('#reportbtn').attr('style',
        //             'background-color: #e5e5e5 !important;border-color: #e5e5e5 !important;outline: none;');
        //     } else {
        //         $('#reportbtn').attr('disabled', false);
        //         $('#reportbtn').attr('style',
        //             'background-color: #28a745 !important;border-color: #28a745 !important;outline: none;');
        //     }
        //
        //
        //     $('.carmake2').hide();
        //     $('.nobtn').css({
        //         'background-color': '#007ee5',
        //         'color': 'white',
        //     });
        //     $('.yesbtn').css('background-color', '#fff');
        //     $('.yesbtn').css('color', '#555');
        // }

        $(document).ready(function() {
            // Bind the click event for the 'No' button
            $('.nobtn').click(function(event) {
                hidemodel(event);
            });
        });

        function hidemodel(event) {
            event.preventDefault(); // Prevent default behavior

            // Reset select elements and disable them
            $('#year2').prop('selectedIndex', 0);
            $('#make2').attr('disabled', true);
            $('#make2').prop('selectedIndex', 0);
            $('#model2').attr('disabled', true);
            $('#model2').prop('selectedIndex', 0);

            // Check if any input fields are empty and disable the 'reportbtn' button if so
            if ($('#firstName').val() == "" || $('#lastName').val() == "" || $('#email').val() == "" || $('#phone').val() == "") {
                $('#reportbtn').attr('disabled', true);
                $('#reportbtn').attr('style', 'background-color: #e5e5e5 !important;border-color: #e5e5e5 !important;outline: none;');
            } else {
                $('#reportbtn').attr('disabled', false);
                $('#reportbtn').attr('style', 'background-color: #28a745 !important;border-color: #28a745 !important;outline: none;');
            }

            // Hide the car make model and reset button styles
            $('.carmake2').hide();
            $('.nobtn').css({
                'background-color': '#007ee5',
                'color': 'white',
            });
            $('.yesbtn').css('background-color', '#fff');
            $('.yesbtn').css('color', '#555');
        }

        $(document).ready(function() {
            $('.carmake2').hide();
            $("#phone").mask("+1 (999) 999-9999");
        });

        $(document).on('click', '#strtbtn', function(event) {
            event.preventDefault();

            var make = $('#make').find(":selected").text();

            $.ajax({
                url: "{{ route('get-car-styles') }}",
                type: "POST",
                data: {
                    _token: "{{ csrf_token() }}",
                    make: make,
                },
                success: function(data) {
                    if (data == true) {
                        $('#style').hide();
                    } else {
                        $('#style').html(data);
                    }

                },
            });

            var year = $('#year').val();
            var make = $('#make').find(":selected").text();
            var model = $('#model').find(":selected").text();

            $('.hname2').text(year + " " + make + " " + model);

            // $('.step-1').html($('.step-2').html());
            // $('.step-2').empty();

            $('.step-1').css('display', 'none');
            $('.step-2').css('display', 'block');
            $('.step-3').css('display', 'none');
        });


        $(document).on('click', '#backstrt', function() {

            $('.step-1').css('display', 'block');
            $('.step-2').css('display', 'none');
            $('.step-3').css('display', 'none');
        });





        $(document).on('click', '#backstep', function() {
            $('.step-1').css('display', 'none');
            $('.step-2').css('display', 'block');
            $('.step-3').css('display', 'none');
        });

        document.addEventListener("DOMContentLoaded", function () {
            const phoneInput = document.getElementById("phone");

            phoneInput.addEventListener("focus", function () {
                if (!phoneInput.value.trim()) {
                    phoneInput.value = "+1 (";
                }
            });

            phoneInput.addEventListener("input", function (event) {
                let cursorPosition = phoneInput.selectionStart; // Save cursor position
                let numbers = phoneInput.value.replace(/\D/g, ""); // Remove non-numeric characters

                if (numbers.startsWith("1")) {
                    numbers = numbers.substring(1); // Remove leading "1"
                }

                let formattedNumber = "+1 ";
                if (numbers.length > 0) formattedNumber += "(";
                if (numbers.length >= 1) formattedNumber += numbers.substring(0, 3);
                if (numbers.length >= 4) formattedNumber += ") " + numbers.substring(3, 6);
                if (numbers.length >= 7) formattedNumber += "-" + numbers.substring(6, 10);

                phoneInput.value = formattedNumber;

                // Adjust cursor position to prevent it from jumping
                setTimeout(() => {
                    phoneInput.setSelectionRange(cursorPosition, cursorPosition);
                }, 10);
            });

            phoneInput.addEventListener("blur", function () {
                if (phoneInput.value === "+1 (") {
                    phoneInput.value = ""; // Reset if left empty
                }
            });
        });
        //2nd step button make green

        $(document).on('change', '#style', function() {
            if ($('#style').val() == "" || $('#mileage').val() == "") {
                $('#nextbtn').attr('disabled', true);
                $('#nextbtn').attr('style',
                    'background-color: #e5e5e5 !important;border-color: #e5e5e5 !important;outline: none;');
            } else {
                $('#nextbtn').attr('disabled', false);
                $('#nextbtn').attr('style',
                    'background-color: #28a745 !important;border-color: #28a745 !important;outline: none;');
            }
        });


        $(document).on('keyup', '#mileage', function(e) {

            var text_count = $(this).val().length;
            if (e.keyCode == 8 && text_count == 0) {
                $('#nextbtn').attr('disabled', true);
                $('#nextbtn').attr('style',
                    'background-color: #e5e5e5 !important;border-color: #e5e5e5 !important;outline: none;');
            } else {
                $('#nextbtn').attr('disabled', false);
                $('#nextbtn').attr('style',
                    'background-color: #28a745 !important;border-color: #28a745 !important;outline: none;');
            }
        });



        $(document).on('click', '#nextbtn', function(event) {
            event.preventDefault();
            var style = $('#style').find(":selected").text();
            $('.bodystyle').text(style);

            $('.step-1').css('display', 'none');
            $('.step-2').css('display', 'none');
            $('.step-3').css('display', 'block');

        });




        $(document).on('keyup change blur', '.info', function(e) {

            var text_count = $(this).val().length;
            var phone = $('#phone').val();
            phone = phone.replace(/[#_]/g, '');
            phone = phone.replace('(', '');
            phone = phone.replace(')', '');
            phone = phone.replace('-', '');
            phone = phone.replace(/ /g, '');

            if (e.keyCode == 8 && text_count == 0 || $('#firstName').val() == "" || $('#lastName').val() == "" || $(
                '#email').val() == "" || $('#phone').val() == "" || phone.length < 12) {
                $('#reportbtn').attr('disabled', true);
                $('#reportbtn').attr('style',
                    'background-color: #e5e5e5 !important;border-color: #e5e5e5 !important;outline: none;');
            } else {
                $('#reportbtn').attr('disabled', false);
                $('#reportbtn').attr('style',
                    'background-color: #28a745 !important;border-color: #28a745 !important;outline: none;');
            }
        });



        // $(document).on('click', '#reportbtn', function() {
        //
        //     var lead_id = $('#lead_id').val();
        //     var year = $('#year').val();
        //     var make = $('#make').find(":selected").text();
        //     var model = $('#model').val();
        //     var year_buy = $('#year2').val();
        //     var make_buy = $('#make2').val();
        //     var model_buy = $('#model2').val();
        //     var style = $('#style').val();
        //     var mileage = $('#mileage').val();
        //     var condition = $('#condition').val();
        //     var firstName = $('#firstName').val();
        //     var lastName = $('#lastName').val();
        //     var email = $('#email').val();
        //     var phone = $('#phone').val();
        //
        //
        //     $.ajax({
        //         url: "insertdata.php",
        //         type: "POST",
        //         data: {
        //             check: "ajax1",
        //             lead_id: lead_id,
        //             year: year,
        //             make: make,
        //             model: model,
        //             year_buy: year_buy,
        //             make_buy: make_buy,
        //             model_buy: model_buy,
        //             style: style,
        //             mileage: mileage,
        //             condition: condition,
        //             firstName: firstName,
        //             lastName: lastName,
        //             email: email,
        //             phone: phone,
        //         },
        //         success: function(data) {
        //             $('.step3').css('display', 'none');
        //             $('.step4').css('display', 'block');
        //         },
        //         error: function() {
        //             toastr.error("Something Went Wrong");
        //         }
        //     });
        //
        //
        //
        // });

        {{--$(document).on('click', '#reportbtn', function(event) {--}}
        {{--    event.preventDefault();--}}
        {{--    var formData = {--}}
        {{--        lead_id: $('#lead_id').val(),--}}
        {{--        year: $('#year').val(),--}}
        {{--        make: $('#make').find(":selected").text(),--}}
        {{--        model: $('#model').val(),--}}
        {{--        year_buy: $('#year2').val(),--}}
        {{--        make_buy: $('#make2').val(),--}}
        {{--        model_buy: $('#model2').val(),--}}
        {{--        style: $('#style').val(),--}}
        {{--        mileage: $('#mileage').val(),--}}
        {{--        condition: $('#condition').val(),--}}
        {{--        firstName: $('#firstName').val(),--}}
        {{--        lastName: $('#lastName').val(),--}}
        {{--        email: $('#email').val(),--}}
        {{--        phone: $('#phone').val(),--}}
        {{--        _token: $('meta[name="csrf-token"]').attr('content')--}}
        {{--    };--}}

        {{--    $.ajax({--}}
        {{--        url: "{{ route('insertdata') }}", // Laravel route--}}
        {{--        type: "POST",--}}
        {{--        data: formData,--}}
        {{--        success: function(response) {--}}
        {{--            if (response.success) {--}}
        {{--                $('.step-3').hide();--}}
        {{--                $('.step-4').show();--}}
        {{--            } else {--}}
        {{--                toastr.error("Something went wrong");--}}
        {{--            }--}}
        {{--        },--}}
        {{--        error: function() {--}}
        {{--            toastr.error("Something Went Wrong");--}}
        {{--        }--}}
        {{--    });--}}
        {{--});--}}

        // $.ajaxSetup({
        //     headers: {
        //         'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //     }
        // });

        {{--$(document).on('click', '#reportbtn', function(event) {--}}
        {{--    event.preventDefault();--}}
        {{--    var formData = {--}}
        {{--        lead_id: $('#lead_id').val(),--}}
        {{--        year: $('#year').val(),--}}
        {{--        make: $('#make').find(":selected").text(),--}}
        {{--        model: $('#model').val(),--}}
        {{--        year_buy: $('#year2').val(),--}}
        {{--        make_buy: $('#make2').val(),--}}
        {{--        model_buy: $('#model2').val(),--}}
        {{--        style: $('#style').val(),--}}
        {{--        mileage: $('#mileage').val(),--}}
        {{--        condition: $('#condition').val(),--}}
        {{--        firstName: $('#firstName').val(),--}}
        {{--        lastName: $('#lastName').val(),--}}
        {{--        email: $('#email').val(),--}}
        {{--        phone: $('#phone').val(),--}}
        {{--    };--}}

        {{--    $.ajax({--}}
        {{--        url: "{{ route('insertdata') }}", // Laravel route--}}
        {{--        type: "POST",--}}
        {{--        data: formData,--}}
        {{--        success: function(response) {--}}
        {{--            if (response.success) {--}}
        {{--                $('.step-3').hide();--}}
        {{--                $('.step-4').show();--}}
        {{--            } else {--}}
        {{--                toastr.error("Something went wrong");--}}
        {{--            }--}}
        {{--        },--}}
        {{--        error: function() {--}}
        {{--            toastr.error("Something Went Wrong");--}}
        {{--        }--}}
        {{--    });--}}
        {{--});--}}


        $(document).on('click', '#reportbtn', function(event) {
            event.preventDefault();
            var lead_id = $('#lead_id').val();
            var year = $('#year').val();
            var make = $('#make').find(":selected").text();
            var model = $('#model').val();
            var year_buy = $('#year2').val();
            var make_buy = $('#make2').val();
            var model_buy = $('#model2').val();
            var style = $('#style').val();
            var mileage = $('#mileage').val();
            var condition = $('#condition').val();
            var firstName = $('#firstName').val();
            var lastName = $('#lastName').val();
            var email = $('#email').val();
            var phone = $('#phone').val();

            $.ajax({
                url: "{{ route('insertdata') }}",
                type: "POST",
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'), // CSRF token
                    check: "ajax1",
                    lead_id: lead_id,
                    year: year,
                    make: make,
                    model: model,
                    year_buy: year_buy,
                    make_buy: make_buy,
                    model_buy: model_buy,
                    style: style,
                    mileage: mileage,
                    condition: condition,
                    firstName: firstName,
                    lastName: lastName,
                    email: email,
                    phone: phone,
                },
                success: function(response) {
                    if (response.success) {
                        $('.step-3').hide();
                        $('.step-4').show();
                    } else {
                        toastr.error("Something Went Wrong");
                    }
                },
                error: function() {
                    toastr.error("Something Went Wrong");
                }
            });
        });



        // function vehcilesearch() {
        //     alert("here");
        //     var value = $("#vechilesearch").val();
        //     var leadid = 46;
        //
        //
        //     if(value == '')
        //     {
        //         $('#notify_cont').hide();
        //         $("#notify_cont").html('');
        //     }
        //     else
        //     {
        //         $('#notify_cont').show();
        //         $("#notify_cont").html('<img src="/loader.gif" width="100%">');
        //         $("#vechilesearch").css('border','none');
        //
        //         $.ajax({
        //             type: "GET",
        //             url: "loadcars.php",
        //             data: {
        //                 value:value,
        //                 leadid:leadid,
        //                 check:"ajax2"
        //             },
        //             beforeSend: function() {
        //                 $("#notify_cont").html('<img src="loader.gif" width="100%">');
        //             },
        //             success: function(result) {
        //
        //                 if(result == '')
        //                 {
        //                     $("#notify_cont").html('<span class="notify_list" style="text-align:center;border:none;padding:20px 0">No match found!</span>');
        //                 }
        //                 else{
        //                     $('#notify_cont').html(result);
        //                 }
        //
        //
        //
        //                 //  $('#notify_cont').html(result);
        //             },
        //         });
        //     }
        // }

        function vehcilesearch() {
            var value = $("#vechilesearch").val();
            var leadid = 46; // Set this dynamically if needed, for now it's hardcoded

            if (value === '') {
                $('#notify_cont').hide();
                $("#notify_cont").html('');
            } else {
                $('#notify_cont').show();
                $("#notify_cont").html('<img src="/loader.gif" width="100%">');
                // $("#vechilesearch").css('border', 'none');

                $.ajax({
                    type: "POST", // You can change it to POST if needed
                    url: "{{ route('search.cars') }}", // Using the Laravel route helper
                    data: {
                        value: value,
                        leadid: leadid,
                        _token: "{{ csrf_token() }}"
                    },
                    beforeSend: function() {
                        $("#notify_cont").html('<img src="loader.gif" width="100%">');
                    },
                    success: function(response) {
                        if (response.output === '') {
                            $("#notify_cont").html(
                                '<span class="notify_list" style="text-align:center;border:none;padding:20px 0">No match found!</span>'
                            );
                        } else {
                            $('#notify_cont').html(response.output);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log('AJAX Error:', error);
                    }
                });
            }
        }


        function formfill(year, make, model) {

            // $('#vechilesearch').val('');

            $('#make').attr('disabled', false);

            $('#year').find('option[value="' + year + '"]').attr("selected", true);

            $("select#make option").each(function() {
                this.selected = (this.text == make);
            });

            $('#notify_cont').css('display', 'none');

            $('#model').append('<option value="' + model + '" selected>' + model + '</option>');

            $('#strtbtn').attr('disabled', false);
            $('#strtbtn').attr('style',
                'background-color: #28a745 !important;border-color: #28a745 !important;outline: none;');

        }
    </script>