@extends('site.layout.master')
@section('content')
        
    <section class="price-list-section">
        <div class="container">
            <div class="price-list-content">

                <div class="price-list-title">
                    @if($record->sitepage->short_text != "")
                        <div class="price-list-h">
                            <h1>Bir Plan İçin Abone Olun</h1>
                        </div>
                    @endif
                    @if($record->sitepage->short_text_2 != "")
                        <div class="price-list-p">
                            <p>{!! $record->sitepage->short_text_2 !!}</p>
                        </div>
                    @endif
                </div>

                <div class="price-list-sub-content">
                    <div class="price-list-buttons">
                        <button class="form-input btn-gurulize btn-chose chose">
                            {!! $record->sitepage->short_text_3 !!}
                            <span>
                                -%{!! $record->sitepage->short_text_5 !!}
                            </span>
                        </button>
                        <button class="form-input btn-gurulize">
                            {!! $record->sitepage->short_text_4 !!}
                        </button>
                    </div>

                    <div class="price-list-box-list">
                        <div class="row">
                            @foreach($packages as $pack)
                                <div class="col-3">
                                    <div class="price-list-box @if($pack['current'] == 1)active-box @endif">
                                        <div class="price-list-title-top">
                                            <div class="price-list-box-title">
                                                <h3>{!! $pack['title'] !!}</h3>
                                                <p>{!! $pack['text'] !!}</p>
                                            </div>

                                            <div class="price-list-box-price">
                                                <div class="price-money" >
                                                    <p @if($pack['current'] == 1) id="price-month" @endif >{!! $pack['currency_icon'] !!}{!! $pack['monthly_price'] !!}/</p>
                                                </div>
                                                <div class="price-time">
                                                    <p>Month</p>
                                                    <p>{!! $pack['minimum_user'] !!} User</p>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="price-list-title-btn">
                                            <a href="{{ URL::to(Session::get('locale').'/'.trans('site.onboard-one')) }}?selected_plan={{ $pack['plan_id'] }}" class="form-input btn-gurulize">
                                                {!! $pack['start_title'] !!}
                                            </a>
                                        </div>

                                        <div class="price-list-bottom">
                                            <div class="price-list-bottom-ul">
                                                @if($pack['fee_per_user'] != "")
                                                    <div class="price-list-adduser">
                                                        <button id="removeuser" class="btn-gurulize btn-negative">
                                                            -
                                                        </button>
                                                        <p>Add User ({{ $pack['currency_icon'] }} {{ $pack['fee_per_user'] }} + {{ $frontsetting->custom62 }})</p>
                                                        <button id="plus-adduser" class="btn-gurulize btn-positive">
                                                            +
                                                        </button>
                                                    </div>
                                                @endif

                                                <ul>
                                                    @foreach($pack['features'] as $item)
                                                        <li>
                                                            {!! $item !!}
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>


                </div>

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


    <section class="plan-section">  
        <div class="container">
            <div class="plan-content">
                <div class="plan-top-btn">
                    <button class="form-input btn-gurulize btn-pln" id="btn-pln">
                        Planları Karşılaştır
                        <span>
                            <img src="images/asagiok.svg" alt="">
                        </span>
                    </button>
                    <div class="close-plans">
                        <a class="" id="close-pln"><img src="images/icon/Çarpı.svg" alt="">
                        </a>
                    </div>
                
                </div>

                <div class="plan-table">
                    <div class="plan-table-content">
                        <table id="hover-table">
                            <tr>
                                <th>Plan Özellikleri</th>
                                <th>Personal</th>
                                <th>Team</th>
                                <th>Team-Pro</th>
                                <th>Enterprice</th>
                            </tr>
                            <tr class="table-data">
                                <td>
                                    <div class="table-flex">
                                        <h4>
                                            Lorem
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet consectetur. Tincidunt tempor mattis eget odio turpis cras nunc.
                                        </p>
                                    </div>
                                </td>
                                <td>1</td>
                                <td>2</td>
                                <td>6</td>
                                <td>12</td>
                            </tr>
                            <tr class="table-data">
                                <td>
                                    <div class="table-flex">
                                        <h4>
                                            Lorem
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet consectetur. Tincidunt tempor mattis eget odio turpis cras nunc.
                                        </p>
                                    </div>
                                </td>
                                <td>1</td>
                                <td>2</td>
                                <td>6</td>
                                <td>12</td>
                            </tr>
                            <tr class="table-data">
                                <td>
                                    <div class="table-flex">
                                        <h4>
                                            Lorem
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet consectetur. Tincidunt tempor mattis eget odio turpis cras nunc.
                                        </p>
                                    </div>
                                </td>
                                <td>1</td>
                                <td>2</td>
                                <td>6</td>
                                <td>12</td>
                            </tr>
                            <tr class="table-data">
                                <td>
                                    <div class="table-flex">
                                        <h4>
                                            Lorem
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet consectetur. Tincidunt tempor mattis eget odio turpis cras nunc.
                                        </p>
                                    </div>
                                </td>
                                <td>1</td>
                                <td>2</td>
                                <td>6</td>
                                <td>12</td>
                            </tr>
                            <tr class="table-data">
                                <td>
                                    <div class="table-flex">
                                        <h4>
                                            Lorem
                                        </h4>
                                        <p>
                                            Lorem ipsum dolor sit amet consectetur. Tincidunt tempor mattis eget odio turpis cras nunc.
                                        </p>
                                    </div>
                                </td>
                                <td>1</td>
                                <td>2</td>
                                <td>6</td>
                                <td>12</td>
                            </tr>
                            
                        </table> 
                        
                        

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


    @include('site.layout.faq')

    @include('site.layout.footerTop')

@section('css')
    <style>
        .price-list-section .price-list-content .price-list-sub-content .price-list-box-list .price-list-box{height: auto !important; min-height: 765px !important;}
    </style>
@endsection

@section('js')

@foreach($packages as $pack)
@if($pack['current'] == 1)
        <script>
          $(document).ready(function() {
            let aylikUcret = {!! $pack['monthly_price'] !!};
            let kullanici = 0;
            @if( !empty($pack['fee_per_user']) )
            let ekUcret = {{ $pack['fee_per_user'] }};
            @else 
            let ekUcret = 0;
            @endif

            
        $('#plus-adduser').on('click', function() { 
            aylikUcret += ekUcret;
            kullanici++;
            $('#price-month').text('{!! $pack['currency_icon'] !!}' + aylikUcret + '/');
        });

        
            $('#removeuser').on('click', function() {
                if(kullanici > 0){
            aylikUcret -= ekUcret;
            kullanici = kullanici - 1;
            $('#price-month').text('{!! $pack['currency_icon'] !!}' + aylikUcret + '/');
            }
        });
        
      
    });
        </script>
        @endif
        @endforeach
@endsection

@endsection