@extends('website.layout')
@section('title', 'Index')
@section('content')

    <div class="pageBg">
        <div class="container">
            
            <div class="row">
                <div class="col-12">
                    <h2 class="pageHeading pt-0">
                        Explore the Best Technical Indicators in the Market
                    </h2>
                    <p class="desc">
                        Trend identification and forecasting are central to trading. And
                        one tool that can help you in the process is technical indicators.
                        But with too much noise out there, finding the right indicator for
                        your trading strategies can be difficult. That's why our in-depth
                        reviews cut through the noise and tell you how an indicator can
                        help you.
                    </p>
                </div>
                <div class="col-12">
                    <div class="searchBox">
                        <button class="clearBtn">Clear All</button>
                        <select name="" id="platform" class="filter">
                            <option value="">Platform</option>
                            <option value="mt4">MT4</option>
                            <option value="mt5">MT5</option>
                            <option value="trading_view">Trading View</option>
                            <option value="c_trader">cTrader</option>
                            <option value="thinkor_swim">Thinkor Swim</option>
                        </select>

                        <select name="" id="type" class="filter">
                            <option value="">Type</option>
                            <option value="trend">Trend</option>
                            <option value="oscillator">Oscillator</option>
                            <option value="volume">Volume</option>
                        </select>

                        <select name="" id="popularity" class="filter">
                            <option value="">Popularity</option>
                            <option value="very_popular">Very Popular</option>
                            <option value="popular">Popular</option>
                            <option value="not_popular">Not Popular</option>
                        </select>

                        <select name="" id="market" class="filter">
                            <option value="">Market</option>
                            <option value="forex">Forex</option>
                            <option value="crypto">Crypto</option>
                            <option value="stocks">Stocks</option>
                            <option value="commodities">Commodities</option>
                        </select>

                        <select name="" id="function" class="filter">
                            <option value="">Function</option>
                            <option value="buy_sell">Buy/Sell</option>
                            <option value="overbought_oversold">Overbought/Oversold</option>
                            <option value="moving_average">Moving average</option>
                            <option value="support_resistance">Support/Resistance</option>
                            <option value="trend_confirmation">Trend Confirmation</option>
                            <option value="divergence">Divergence</option>
                        </select>

                        <select name="" id="complexity" class="filter">
                            <option value="">Complexity</option>
                            <option value="beginner">Beginner</option>
                            <option value="intermediate">Intermediate</option>
                            <option value="advance">Advance</option>
                        </select>

                        <select name="" id="source" class="filter">
                            <option value="">Source</option>
                            <option value="price">Price</option>
                            <option value="volume">Volume</option>
                            <option value="both">Both</option>
                        </select>

                        <select name="" id="trading_Style" class="filter">
                            <option value="">Trading Style</option>
                            <option value="scalping">Scalping</option>
                            <option value="day_trading">Day Trading</option>
                            <option value="swing_trading">Swing Trading</option>
                            <option value="position_trading">Position Trading</option>
                        </select>

                        <select name="" id="customization" class="filter">
                            <option value="">Customization</option>
                            <option value="adjustable_parameters">
                                Adjustable Parameters
                            </option>
                            <option value="predefined_settings">Predefined Settings</option>
                        </select>

                        <select name="" id="performance" class="filter">
                            <option value="">Performance</option>
                            <option value="backtested_results">Backtested Results</option>
                            <option value="live_performance">Live performance</option>
                        </select>

                        <select name="" id="rating" class="filter">
                            <option value="">Rating</option>
                            <option value="1">1 Star</option>
                            <option value="2">2 Star</option>
                            <option value="3">3 Star</option>
                            <option value="4">4 Star</option>
                            <option value="5">5 Star</option>
                        </select>

                        <select name="" id="price" class="filter">
                            <option value="">Price</option>
                            <option value="free">Free</option>
                            <option value="paid">Paid</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="row" id="indicator-listing">
                @include('website.indicator-listing', ['indicators' => $data])

            </div>
            <div class="col-12 pageContent pb-5">
                <h3>How Do We Review Indicators?</h3>
                <p>Our process involves multiple steps, including:</p>
                <h6>In-Depth Analysis</h6>
                <p>
                    We conduct a detailed analysis of each indicator by trading it on
                    the demo and live accounts. We test the indicator on different
                    market conditions and timeframes and assess its performance using
                    multiple strategies. We then note down the strengths and
                    weaknesses of the indicator.
                </p>
                <h6>Live Trading</h6>
                <p>
                    We test each indicator on the live markets using historical and
                    current market data. This gives greater accuracy than testing on
                    the demo accounts.
                </p>
                <h6>Checking Reviews</h6>
                <p>
                    Before publishing the content, we review user testimonials/reviews
                    of every indicator. We want to include the perspective of users
                    like you so we can find out how the indicator performs for each
                    user.
                </p>
                <h6>Why Read Our Indicator Reviews?</h6>
                <p>
                    Indicators turn price data into a visual interpretation. But
                    that’s not the only thing they do. There are several benefits of
                    reading about indicator reviews:
                </p>
                <h6>Save Time and Effort</h6>
                <p>
                    Countless trading indicators are out there, and selecting the
                    right one can be daunting. This is where our reviews come in handy
                    because our guides provide all of the necessary information that
                    saves time and helps you select the right indicator.
                </p>
                <h6>Improve Trading Performance</h6>
                <p>
                    Choosing the right indicators that fit your trading needs can
                    improve the overall trading results. Our reviews help find the
                    exact entry and exit points and other valuable inputs for the
                    indicator. This improves your trading and increases profitability.
                </p>
                <h6>Stay Updated</h6>
                <p>
                    The market is constantly evolving, and we must keep pace. Our
                    indicator reviews are a way of informing you about the recently
                    developed indicators and how you can use them in your strategies.
                </p>
                <h6>Build Confidence</h6>
                <p>
                    It goes without saying that the more knowledge one has about
                    trading, the better positioned he or she will be to make a better
                    decision. When you read our reviews, you get confidence that you
                    are using the best indicators, which have been researched and
                    analyzed by the pros.
                </p>
                <p>Explore our indicator reviews and move away from the herd.</p>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="sectionHeading">FAQ's</div>
                </div>
                <div class="col-12">
                    <div class="accordion faq-body">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="one">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    What is the purpose of indicators in trading?
                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="one">
                                <div class="accordion-body">
                                    An indicator helps you identify signals and trends in the
                                    market by tracing patterns over time using mathematical
                                    calculations. By looking at the historical price data, you
                                    can see the overall price behavior.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="two">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                    How can I read indicators?

                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="two">
                                <div class="accordion-body">
                                    Reading indicators requires special considerations like
                                    trend analysis, breakouts, reversals, and others. But all of
                                    this can be a hassle if you are just starting out. That's
                                    why we provide in-depth reviews so you can get a complete
                                    picture of the indicator.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="three">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                    Do FBFX provide trading strategies with indicators?

                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="three">
                                <div class="accordion-body">
                                    We analyze every indicator and use it for different trading
                                    strategies. When reviewing indicators, we provide trading
                                    strategies you can use with the indicator and how you can
                                    find the potential entry and exit points.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="four">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                                    What indicator do most traders use?

                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="four">
                                <div class="accordion-body">
                                    Most traders use indicators like the RSI, MA, Stochastics,
                                    and MACD. However, it all boils down to your trading
                                    strategy. For instance, if you are a trend trader, you can
                                    use MA, but for volume trading, you'll need an indicator
                                    like OBV.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="five">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                                    Can I trade without indicators?

                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="five">
                                <div class="accordion-body">
                                    Yeah, you can trade without an indicator by using
                                    fundamental analysis. However, many short-term traders rely
                                    on trading indicators to help them understand short-term
                                    price movements.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="six">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                                    What is the best volume indicator?
                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="six">
                                <div class="accordion-body">
                                    A volume indicator helps you determine both the short-term
                                    and long-term price dynamics. There are many volume
                                    indicators you can use for volume trading, including OBV,
                                    MFI, A/D, VWAP, and Chaikin Oscillator.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="seven">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
                                    Which indicator is used for volatility?

                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseSeven" class="accordion-collapse collapse" aria-labelledby="seven">
                                <div class="accordion-body">
                                    Indicators such as the ATR track volatility over time. The
                                    ATR values move upward or downward based on how much the
                                    price changes, with a higher ATR value indicating higher
                                    market volatility.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="eight">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
                                    How many indicators should I use in forex trading?

                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseEight" class="accordion-collapse collapse" aria-labelledby="eight">
                                <div class="accordion-body">
                                    The choice of indicators depends on your chosen trading
                                    strategies. We recommend not cluttering the charts with too
                                    many indicators. It's better to use two to three indicators
                                    for signal confirmation.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="nine">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine">
                                    Which indicator is best for day trading?

                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseNine" class="accordion-collapse collapse" aria-labelledby="nine">
                                <div class="accordion-body">
                                    There's no single indicator that can be called the best for
                                    day trading. Many day traders use many indicators like MA,
                                    RSI, EMA, and others to identify intra-day trends.
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="ten">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseTen" aria-expanded="false" aria-controls="collapseTen">
                                    Which indicator is best for scalping?
                                    <span class="accordion-icon"><i class="fas fa-chevron-down"></i></span>
                                </button>
                            </h2>
                            <div id="collapseTen" class="accordion-collapse collapse" aria-labelledby="ten">
                                <div class="accordion-body">
                                    As scalping requires quick action, some of the most commonly
                                    used indicators are the SMA and the EMA. They can help
                                    identify quick price moves.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('website.partials.footer')


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            function fetchIndicators(page = 1) {
                let filters = {
                    platform: $('#platform').val(),
                    type: $('#type').val(),
                    popularity: $('#popularity').val(),
                    market: $('#market').val(),
                    function: $('#function').val(),
                    complexity: $('#complexity').val(),
                    source: $('#source').val(),
                    tradingStyle: $('#trading_Style').val(),
                    customization: $('#customization').val(),
                    performance: $('#performance').val(),
                    rating: $('#rating').val(),
                    price: $('#price').val(),
                    page: page
                };

                $.ajax({
                    url: '{{ route('indicator') }}',
                    method: 'GET',
                    data: filters,
                    success: function(response) {
                        $('#indicator-listing').html(response.html);
                        $('#pagination').html(response.pagination);
                    }
                });
            }

            // Handle filter change
            $('.filter').change(function() {
                fetchIndicators();
            });

            // Handle pagination click
            $(document).on('click', '.pagination a', function(e) {
                e.preventDefault();
                let page = $(this).attr('href').split('page=')[1];
                fetchIndicators(page);
            });

            // Initial fetch
            fetchIndicators();

            $('.clearBtn').click(function() {
                $('.filter').val('');
                fetchIndicators();
            });
        });
    </script>


@endsection