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

    <section class="bg reviewDetail">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-3">
                    <div class="imgWrapper">
                        <img src="{{ asset($response->image) }}" alt="Indicator Logo" class="boxLogo" />
                        <div class="reviewBox">
                            @if (isset($response->rating))
                                <span>{{ $response->rating }}.0</span>
                            @endif
                            <img src="{{ asset('/assets/svg/Star.svg') }}" alt="" />
                        </div>
                    </div>

                </div>
                <div class="col-md-6">
                    @if (isset($response->name))
                        <div class="pageTitle">{{ $response->name }}</div>
                    @endif
                    <div class="pageDesc">
                        @if (isset($response->introduction))
                            {!! $response->introduction !!}
                        @endif

                    </div>
                </div>
                <div class="col-md-3">
                    <div class="btnWrapper">
                        <a href="{{ $response->signup_link }}" target="_blank">
                            <span>Open an account </span>
                            <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M2.11592 9.5C2.11592 13.469 5.34692 16.7 9.31592 16.7C13.2849 16.7 16.5159 13.469 16.5159 9.5C16.5159 5.531 13.2849 2.3 9.31592 2.3C5.34692 2.3 2.11592 5.531 2.11592 9.5ZM0.315918 9.5C0.315918 4.532 4.34792 0.5 9.31592 0.5C14.2839 0.5 18.3159 4.532 18.3159 9.5C18.3159 14.468 14.2839 18.5 9.31592 18.5C4.34792 18.5 0.315918 14.468 0.315918 9.5ZM9.31592 10.4H5.71592V8.6H9.31592V5.9L12.9159 9.5L9.31592 13.1V10.4Z"
                                    fill="white" />
                            </svg>
                        </a>
                        <p>Your capital is at risk</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="pageBg info">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="boxWrapper">
                        <div class="upperBox">
                            <div class="row gx-5">
                                <div class="col-md-6 br-1">
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/Accuracy.svg') }}" alt="" />
                                            <span>Accuracy</span>
                                        </div>
                                        @if (isset($response->accuracy))
                                            <div>{{ $response->accuracy }}</div>
                                        @endif
                                    </div>
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/Dollar.svg') }}" alt="" />
                                            <span>Profitability</span>
                                        </div>
                                        @if (isset($response->profability))
                                            <div>{{ $response->profability }}</div>
                                        @endif

                                    </div>
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/StopLoss.svg') }}" alt="" />
                                            <span>Maximum Drawdown</span>
                                        </div>
                                        @if (isset($response->max_drawdown))
                                            <div>{{ $response->max_drawdown }}</div>
                                        @endif
                                    </div>
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/Martingale.svg') }}" alt="" />
                                            <span>Average Drawdown</span>
                                        </div>
                                        @if (isset($response->avg_drawdown))
                                            <div>{{ $response->avg_drawdown }}</div>
                                        @endif

                                    </div>
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/Duration.svg') }}" alt="" />
                                            <span>Drawdown Duration</span>
                                        </div>
                                        @if (isset($response->drawdown_duration))
                                            <div>{{ $response->drawdown_duration }}</div>
                                        @endif

                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/Dollar.svg') }}" alt="" />
                                            <span>Annualized Return</span>
                                        </div>
                                        @if (isset($response->annualized_return))
                                            <div>{{ $response->annualized_return }}</div>
                                        @endif

                                    </div>
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/SharpeRatio.svg') }}" alt="" />
                                            <span>Sharpe Ratio</span>
                                        </div>
                                        @if (isset($response->sharpe_ratio))
                                            <div>{{ $response->sharpe_ratio }}</div>
                                        @endif

                                    </div>
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/ProfitFactor.svg') }}" alt="" />
                                            <span>Profit Factor</span>
                                        </div>
                                        @if (isset($response->profit_factor))
                                            <div>{{ $response->profit_factor }}</div>
                                        @endif

                                    </div>
                                    <div class="stats">
                                        <div class="label">
                                            <img src="{{ asset('/assets/svg/WinRate.svg') }}" alt="" />
                                            <span>Win Rate</span>
                                        </div>
                                        @if (isset($response->win_rate))
                                            <div>{{ $response->win_rate }}</div>
                                        @endif

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tabs row pt-0">
                            <div class="col-12">
                                @if (isset($response->tabs))

                                    <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                        @foreach ($response->tabs as $index => $tab)
                                            <button class="nav-link {{ $index == 0 ? 'active' : '' }}"
                                                id="nav-{{ Str::slug($tab['title']) }}-tab" data-bs-toggle="tab"
                                                data-bs-target="#nav-{{ Str::slug($tab['title']) }}" type="button"
                                                role="tab" aria-controls="nav-{{ Str::slug($tab['title']) }}"
                                                aria-selected="{{ $index == 0 ? 'true' : 'false' }}">
                                                {{ $tab['title'] }}
                                            </button>
                                        @endforeach
                                    </div>
                                    <div class="tab-content" id="nav-tabContent">
                                        @foreach ($response->tabs as $index => $tab)
                                            <div class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}"
                                                id="nav-{{ Str::slug($tab['title']) }}" role="tabpanel"
                                                aria-labelledby="nav-{{ Str::slug($tab['title']) }}-tab" tabindex="0">
                                                {!! $tab['description'] !!}
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                        <div class="row pt-4">
                            <div class="col-md-6">
                                <div class="prosBox">
                                    <div class="textWrapper">
                                        <div>Pros</div>
                                        <div class="icon add">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                                stroke-linecap="round" stroke-linejoin="round"
                                                class="lucide lucide-plus">
                                                <path d="M5 12h14" />
                                                <path d="M12 5v14" />
                                            </svg>
                                        </div>
                                    </div>
                                    <ul>
                                        @if (isset($response->pros))
                                            @foreach ($response->pros as $pro)
                                                <div class="pros">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="lucide lucide-plus">
                                                        <path d="M5 12h14" />
                                                        <path d="M12 5v14" />
                                                    </svg>
                                                    <li>{{ $pro->text }}</li>
                                                </div>
                                            @endforeach
                                        @endif
                                    </ul>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="prosBox">
                                    <div class="textWrapper">
                                        <div>Cons</div>
                                        <div class="icon minus">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                class="lucide lucide-minus">
                                                <path d="M5 12h14" />
                                            </svg>
                                        </div>
                                    </div>
                                    <ul>
                                        @if (isset($response->cons))
                                            @foreach ($response->cons as $con)
                                                <div class="pros red">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                                        viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                                                        class="lucide lucide-minus">
                                                        <path d="M5 12h14" />
                                                    </svg>
                                                    <li>{{ $con->text }}</li>
                                                </div>
                                            @endforeach
                                        @endif
                                    </ul>
                                </div>
                            </div>
                            <!-- <div class="col-12 pt-4">
                                @foreach ($response->images as $image)
    <div class="additionalImg">
                                    <img src="{{ asset($image->image) }}" alt="Indicator" />
                                </div>
    @endforeach
                            </div> -->
                            <div class="col-12 pt-2 textualInfo pt-5">
                                @foreach ($response->headings as $heading)
                                    {!! $heading->description !!}
                                @endforeach

                            </div>
                        </div>
                        <div class="video pt-4">
                            @if (isset($response->video_link))
                                <iframe src="https://www.youtube.com/embed/{{ $response->video_link }}"
                                    title="YouTube video player"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                    allowfullscreen></iframe>
                            @endif
                        </div>
                        <div class="tabs">
                            <div class="box">
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    @foreach ($featuredBrokers as $index => $broker)
                                        <button class="nav-link {{ $index == 0 ? 'active' : '' }}"
                                            id="nav-tab-{{ $broker->id }}" data-bs-toggle="tab"
                                            data-bs-target="#tab-content-{{ $broker->id }}" type="button"
                                            role="tab" aria-controls="tab-content-{{ $broker->id }}"
                                            aria-selected="{{ $index == 0 ? 'true' : 'false' }}">
                                            {{ $broker->title }}
                                        </button>
                                    @endforeach
                                </div>
                                <div class="tab-content" id="nav-tabContent">
                                    @foreach ($featuredBrokers as $index => $broker)
                                        <div class="tab-pane fade {{ $index == 0 ? 'show active' : '' }}"
                                            id="tab-content-{{ $broker->id }}" role="tabpanel"
                                            aria-labelledby="nav-tab-{{ $broker->id }}" tabindex="0">
                                            <p>{!! $broker->description !!}</p>
                                            <div class="text-center">
                                                <a href="{{ $broker->signup_link }}" target="_blank" rel="noopener"
                                                    class="themeBtn d-inline-flex">Signup</a>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                        </div>
                        <div class="row pt-5">
                            <div class="col-12">
                                <div class="heading">FAQ's</div>
                            </div>
                            <div class="col-12">
                                <div class="accordion faq-body">
                                    @if (isset($response->faqs))

                                        @foreach ($response->faqs as $faq)
                                            <div class="accordion-item">
                                                <h2 class="accordion-header" id="one">
                                                    <button class="accordion-button" type="button"
                                                        data-bs-toggle="collapse"
                                                        data-bs-target="#collapse{{ $faq->id }}"
                                                        aria-expanded="false" aria-controls="collapseOne">
                                                        {{ $faq->title }}

                                                        <span class="accordion-icon"><i
                                                                class="fas fa-chevron-down"></i></span>
                                                    </button>
                                                </h2>
                                                <div id="collapse{{ $faq->id }}" class="accordion-collapse collapse"
                                                    aria-labelledby="one">
                                                    <div class="accordion-body">
                                                        {!! $faq->description !!}
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @include('website.partials.footer')

@endsection