@extends('front.layouts.layout')
@section('meta_title'){{ $index_meta->{'title_' . App::getLocale()} }}@stop
@section('meta_description'){{ $index_meta->{'description_' . App::getLocale()} }}@stop
@section('meta_keywords')
    {{ $index_meta->{'kewords_' . App::getLocale()} }}
@stop
@section('meta')
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta itemprop="description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
    <!-- Twitter Card data -->
    <meta name="twitter:card" content="site">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta name="twitter:description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
    <!-- Twitter Card data -->
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $index_meta->{'title_' . App::getLocale()} }}" />
    <meta property="og:description" content="{{ $index_meta->{'description_' . App::getLocale()} }}" />
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Open Graph data -->
    <meta property="og:type" content="og:site">
    <meta property="og:url" content="{{ route('home') }}">
    <meta property="og:image" content="{{ url($index_meta->{'image_' . App::getLocale()}) }}">
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $index_meta->{'title_' . App::getLocale()} }}">
    <meta itemprop="description" content="{{ $index_meta->{'description_' . App::getLocale()} }}">
@endsection
@section('content')
    <div class="container-fluid pages-text-container">
        <div class="row">
            <div class="col-lg-10 col-md-10 col-sm-12 col-xs-12 m-auto">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12 text-container">
                        <h1 class="title">{{ translate('Prices And Plans') }}</h1>
                        <p class="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas cumque
                            aliquam pariatur ut sed sequi laboriosam ea rem, saepe et odit totam sunt culpa commodi dolore
                            doloribus amet nostrum nisi?</p>
                        <button class="btn btn-secondary">{{ translate('Start Now') }}</button>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12 img-container">
                        <img src="{{ url('front_layout/assets/imgs/prices-header-img.png') }}" alt="">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- HEADER END -->
    <!-- PLANS SECTION START -->
    <section class="container-fluid plans-section-container">
        <div class="row">
            <div class="col-lg-10 col-md-12 col-sm-12 m-auto">
                <div class="row head-row">
                    <div class="switch-wrapper">
                        <button id="monthly_btn" class="btn active">{{ translate('Monthly') }}</button>
                        <button id="yearly_btn" class="btn">{{ translate('Yearly') }}</button>
                    </div>
                    <div class="arrow-section" style="display: none">
                        <img class="desktop-arrow" src="{{ url('front_layout/assets/imgs/arrow-en.png') }}" alt="">
                        <img class="mobile-arrow" src="{{ url('front_layout/assets/imgs/mobile-arrow-en.png') }}"
                            alt="">
                        <div class="text">
                            <p>{{ translate('Enjoy') }}

                                <span class="discount">
                                    15%
                                </span>
                                <span class="block d-block">
                                    {{ translate('Off On Yearly Plans') }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="row plans">
                    @forelse ($packages['subscribtions'] as $key => $package)
                        <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 plan-container">
                            <div class="plan-wrapper"
                                style="background-color: {{ $package['background_color'] }};color:{{ $package['text_color'] }};transform: scale({{ $package['transform_scal'] }});">
                                <div class="title-wrapper primary-wrapper">
                                    <p class="plan-title">{{ $package['title_' . App::getLocale()] }}</p>
                                </div>
                                <div class="price-section price-month-amount">
                                    <p>{{ $package['amount'] }} / <span>{{ translate('Month') }}</span></p>
                                </div>
                                <div class="price-section price-year-amount-discount">
                                    <p>{{ $package['yearly_amount'] }} / <span>{{ translate('Year') }}</span></p>
                                </div>
                                <div class="price-section price-year-amount">
                                    <del style="color: red">
                                        <p style="color: {{ $package['text_color'] }}">
                                            {{ $package['yearly_amount'] + $package['yearly_amount'] * 0.15 }} /
                                            <span>{{ translate('Year') }}</span>
                                        </p>
                                    </del>
                                </div>

                                <div class="plan-features">
                                    @forelse ($package['features'] as $feature)
                                        <p class="feature-item">
                                            @if ($feature['countered'] == 1)
                                                {{ $feature['title_' . App::getLocale()] }}
                                                @if ($feature['pivot']['value'] == 'unlimt')
                                                    ( <span>
                                                        {{ translate('Unlimted') }} </span> )
                                                @else
                                                    ( <span>
                                                        {{ $feature['pivot']['quantity'] }} </span> )
                                                @endif

                                            @else
                                                {{ $feature['title_' . App::getLocale()] }}
                                            @endif
                                        </p>
                                    @empty

                                    @endforelse
                                </div>
                                <button class="btn"
                                    style="background-color: {{ $package['btn_background_color'] }}">{{ translate('Subscribe Now') }}</button>
                            </div>
                        </div>
                    @empty

                    @endforelse
                    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 plan-container">
                        <div class="plan-wrapper dark-bg">
                            <div class="title-wrapper dark-wrapper">
                                <p class="plan-title">{{ translate('Custom') }}</p>
                            </div>
                            <div class="custom-features">
                                <p class="feature-item">
                                    {{ translate('Contact Our Team To Customize Your Plan') }}
                                </p>
                            </div>
                            <button class="btn">{{ translate('Contact Us') }}</button>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- PLANS SECTION MOBILE START-->
    <!-- PLANS SECTION MOBILE END-->
    <!-- PLANS SECTION END -->
    <!-- COMPARISON TABLE START -->
    
    <section class="container-fluid comparison-table-container">
        <div class="row">
            <div class="col-lg-10 col-md-12 col-sm-12 m-auto ">
                <h3 class="title">{{ translate('Comparison Between Each Plan') }}</h3>
                <div class="table-wrapper table-responsive">
                    <table class="table table-striped table-borderless">
                        <thead>

                            <tr>
                                <th scope="col"></th>
                                @foreach ($all_features['subscribtions'] as $key => $subscribtion)
                                    <th scope="col">{{ $subscribtion['title'] }}
                                        <img style="margin: 0px 10px 0px 10px;"
                                            src="{{ getExternalRouts()['mangerRout'] . $subscribtion['icon'] }}" alt="">
                                    </th>

                                @endforeach

                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $subscribtionSize = sizeof($all_features['subscribtions']);
                            @endphp
                            @foreach ($all_features['features'] as $feature)
                                <tr class="text-center">
                                    <td>{{ $feature['title'] }}</td>
                                    @for ($i = 1; $i <= $subscribtionSize; $i++)
                                        <td>
                                            @if ($feature['subscribtions_new'][$i]['exist'] == false)
                                                <i class="bi bi-x"></i>
                                            @else

                                                @if ($feature['subscribtions_new'][$i]['value'] == 'unlimt')
                                                    <i class="bi bi-check2"></i>
                                                @else
                                                    <span>{{ $feature['subscribtions_new'][$i]['quantity'] }}</span>
                                                @endif

                                            @endif

                                        </td>
                                    @endfor
                                </tr>
                            @endforeach

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('modal')

@endsection
@section('script')
    <script>
        $('.price-year-amount-discount').hide();
        $('.price-year-amount').hide();
        $('#monthly_btn').click(function() {
            $(this).addClass('active');
            $('#yearly_btn').removeClass('active');
            $('.arrow-section').hide();
            $('.price-month-amount').show();
            $('.price-year-amount-discount').hide();
            $('.price-year-amount').hide();
        })
        $('#yearly_btn').click(function() {
            $(this).addClass('active');
            $('#monthly_btn').removeClass('active');
            $('.arrow-section').show();
            $('.price-month-amount').hide();
            $('.price-year-amount-discount').show();
            $('.price-year-amount').show();
        })
    </script>
@endsection