@extends('layouts.agency')

@section('title', __('website.agency_policy'). " | ITVJP.COM Seller")

@section('style-libraries')

@stop
@section('content')
    <div id="content">
        <section id="main-slider" class="mb-30 mt-20" >
            <div class="w3-container">
               <span>
                    <span class="text-title-agency">{{__('website.agency_policy')}}</span>
                </span>
               <div class="table-wrapper">
                    <table>
                        <tr>
                        <th class="text-package">{{__('website.package')}}</th>
                        <th class="box-package color-mini text-box-package"><span>{{__('message.japanese_tv')}} <br> {{__('website.mini')}}</span></th>
                        <th class="box-package color-basic text-box-package">{{__('message.japanese_tv')}}  <br> {{__('website.basic')}}</th>
                        <th class="box-package color-premier text-box-package">{{__('message.japanese_tv')}}  <br> {{__('website.premier')}}</th>
                        </tr>
                        <tr>
                            <td class="text-month"><img src="{{ asset('images/agency/check.png') }}" alt=""> 1 {{__('website.month')}}</td>
                            @foreach ($services_1Month as $service1)
                                <td>
                                    <span class="text-price">{{$service1->usd}}$</span> <br>
                                    <span class="text-accounts-by">{{$discounts_first->account_quantity}} {{__('website.accounts_reduced')}} {{$discounts_first->discount}}%</span> <br>
                                    <div class="text-none more-accounts">
                                        @foreach ($discounts_agent as $discount)
                                            <span class="text-accounts-by">{{$discount->account_quantity}} {{__('website.accounts_reduced')}} {{$discount->discount}}%</span> <br>
                                        @endforeach
                                        <span class="text-reduce">
                                            <img src="{{ asset('images/agency/Vector-top.png') }}" alt=""> {{__('website.reduce')}}
                                        </span>
                                    </div>
                                    <span class="text-see-more">
                                        <img src="{{ asset('images/agency/Vector.png') }}" alt="">  {{__('website.see_more')}}
                                    </span>
                                </td>
                            @endforeach
                        </tr>
                        <tr>
                            <td class="text-month"><img src="{{ asset('images/agency/check.png') }}" alt=""> 3 {{__('website.month')}}</td>
                            @foreach ($services_3Months as $service3)
                                <td>
                                    <span class="text-price">{{$service3->usd}}$</span> <br>
                                    <span class="text-accounts-by">{{$discounts_first->account_quantity}} {{__('website.accounts_reduced')}} {{$discounts_first->discount}}%</span> <br>
                                    <div class="text-none more-accounts">
                                        @foreach ($discounts_agent as $discount)
                                            <span class="text-accounts-by">{{$discount->account_quantity}} {{__('website.accounts_reduced')}} {{$discount->discount}}%</span> <br>
                                        @endforeach
                                        <span class="text-reduce">
                                            <img src="{{ asset('images/agency/Vector-top.png') }}" alt=""> {{__('website.reduce')}}
                                        </span>
                                    </div>
                                    <span class="text-see-more">
                                        <img src="{{ asset('images/agency/Vector.png') }}" alt="">  {{__('website.see_more')}}
                                    </span>
                                </td>
                            @endforeach
                        </tr>
                        <tr>
                            <td class="text-month"><img src="{{ asset('images/agency/check.png') }}" alt=""> 6 {{__('website.month')}}</td>
                            @foreach ($services_6Months as $service6)
                                <td>
                                    <span class="text-price">{{$service6->usd}}$</span> <br>
                                    <span class="text-accounts-by">{{$discounts_first->account_quantity}} {{__('website.accounts_reduced')}} {{$discounts_first->discount}}%</span> <br>
                                    <div class="text-none more-accounts">
                                        @foreach ($discounts_agent as $discount)
                                            <span class="text-accounts-by">{{$discount->account_quantity}} {{__('website.accounts_reduced')}} {{$discount->discount}}%</span> <br>
                                        @endforeach
                                        <span class="text-reduce">
                                            <img src="{{ asset('images/agency/Vector-top.png') }}" alt=""> {{__('website.reduce')}}
                                        </span>
                                    </div>
                                    <span class="text-see-more">
                                        <img src="{{ asset('images/agency/Vector.png') }}" alt=""> {{__('website.see_more')}}
                                    </span>
                                </td>
                            @endforeach
                        </tr>
                        <tr>
                            <td class="text-month"><img src="{{ asset('images/agency/check.png') }}" alt=""> 12 {{__('website.month')}}</td>
                            @foreach ($services_12Months as $service12)
                                <td>
                                    <span class="text-price">{{$service12->usd}}$</span> <br>
                                    <span class="text-accounts-by">{{$discounts_first->account_quantity}} {{__('website.accounts_reduced')}} {{$discounts_first->discount}}%</span> <br>
                                    <div class="text-none more-accounts">
                                        @foreach ($discounts_agent as $discount)
                                            <span class="text-accounts-by">{{$discount->account_quantity}} {{__('website.accounts_reduced')}} {{$discount->discount}}%</span> <br>
                                        @endforeach
                                        <span class="text-reduce">
                                            <img src="{{ asset('images/agency/Vector-top.png') }}" alt=""> {{__('website.reduce')}}
                                        </span>
                                    </div>
                                    <span class="text-see-more">
                                        <img src="{{ asset('images/agency/Vector.png') }}" alt=""> {{__('website.see_more')}}
                                    </span>
                                </td>
                            @endforeach
                        </tr>
                    </table>
               </div>
            </div>
        </section>

        <section class="banner-section" style="background-image: url('{{ asset('images/agency/BG_32.png') }}')">
            <div class="banner-text">
                <div class="text-input-container">
                    <div class="text-banner" style="width: 52%">
                        <p class="text-banner-1">{{__('website.register_to')}}</p>
                        <a href="{{ route('agency.register') }}" class="btn btn-success" style="">{{ __('website.register_now') }}</a>
                    </div>
                    <div class="input-contact-container">
                        <div class="contact-info">
                            <span>{{__('website.you_can')}}</span>
                            <span class="text-banner-email w3-text-white">cs@itvmax.org</span>
                            <span class="text-banner-email">{{__('website.or')}}</span>
                            
                        </div>  
                        <div id="social" class="mt-10">
                            <a href="https://www.facebook.com/itvmax"><img class="text-banner-email icon-banner" src="{{ asset('images/agency/zl.png') }}" alt=""></a>
                            <a href="https://www.facebook.com/itvmax"><img class="icon-banner" src="{{ asset('images/agency/fb.png') }}" alt=""></a>
                            <a href="https://line.me/ti/p/Ujxl8m5gVC"><img class="icon-banner" src="{{ asset('images/agency/qr.jpg') }}" alt=""></a>
                        </div>
                    </div>
                </div> 
            </div>
        </section>
    </div>


@endsection
@section('styles')
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td{
            text-align: center;
            padding: 18px 0px 5px 0px;
        }

        tr:nth-child(even) {
        background-color: #344651;
        }
    </style>
@stop
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var seeMoreButtons = document.querySelectorAll('.text-see-more');
            seeMoreButtons.forEach(function(button) {
                button.addEventListener('click', function(event) {
                    event.preventDefault();
                    var moreAccountsDiv = button.parentNode.querySelector('.more-accounts');
                    if (moreAccountsDiv) {
                        moreAccountsDiv.classList.toggle('text-show');
                    }
                    button.classList.toggle('text-none');
                });
            });
        });

        var reduceButtons = document.querySelectorAll('.text-reduce');
            reduceButtons.forEach(function(button) {
                button.addEventListener('click', function(event) {
                    event.preventDefault();
                    var moreAccountsDiv = button.parentNode.parentNode.querySelector('.more-accounts');
                    if (moreAccountsDiv) {
                        moreAccountsDiv.classList.toggle('text-show');
                    }
                    var seeMoreButton = button.parentNode.parentNode.querySelector('.text-see-more');
                    if (seeMoreButton) {
                        seeMoreButton.classList.toggle('text-none');
                    }
                });
            });
    </script>
@stop