@extends('layouts.app')

@section('title', 'Planos')

@section('content')
@php
    $plansData = $plans->map(function ($plan) {
        return [
            'id' => $plan['id'],
            'valor' => $plan['valor'],
            'valor_trimestral' => $plan['valor_trimestral'] ?? $plan['valor'],
            'valor_semestral' => $plan['valor_semestral'] ?? $plan['valor'],
            'valor_anual' => $plan['valor_anual'] ?? $plan['valor'],
        ];
    })->all();
@endphp
<div class="container">
    <div class="row justify-content-center">
        <div class="d-flex justify-content-center">
            <div class="nav nav-pills" id="plan-periods" role="tablist">
                <button class="nav-link" id="mensal-tab" data-period="mensal" type="button" role="tab" aria-selected="true">Mensal</button>
                <button class="nav-link" id="semestral-tab" data-period="semestral" type="button" role="tab" aria-selected="false">Semestral</button>
                <button class="nav-link active" id="anual-tab" data-period="anual" type="button" role="tab" aria-selected="false">Anual</button>
            </div>
        </div>
    </div>

    <div class="row justify-content-center" id="planos-carousel-container" data-plans-data="{{ json_encode($plansData) }}">
        @foreach($plans as $plan)
        <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 vw-65">
            <div class="card custom-card card-plans vw-65 container-mobile-edge-to-edge">
                <div class="card-body">
                    <h3 class="card-title text-white">{{ $plan['name'] }}</h3> 
                    <hr/>
                    @if($plan['free'] == true)
                        <span class="price text-success">50%<span class="suffix color-secondary">/ganhos</span></span>
                    @else
                        <span class="price">
                            <span class="prefix">R$</span>
                            <span id="valor_{{ $plan['id'] }}" class="color-primary" data-valor-base="{{ $plan['valor'] }}">{{ number_format(floor($plan['valor']), 0, ',', '.') }}</span><span id="period-text_{{ $plan['id'] }}" class="suffix">,99 /mês</span>
                        </span>
                    @endif
                    <div class="screen-control">
                        @if($plan['free'] == true)
                            <strong>1 Tela disponível</strong>
                            <div class="screen-control-placeholder"></div>
                        @else
                            <strong>Número de Telas</strong>
                            <div class="screen-counter">
                                <button class="decrement" data-id="{{ $plan['id'] }}">-</button>
                                <span id="num_telas_{{ $plan['id'] }}">1</span>
                                <button class="increment" data-id="{{ $plan['id'] }}">+</button>
                            </div>
                        @endif
                    </div>
                    <div class="features">
                        <p>
                            {!! str_replace(
                                ['COM', 'SEM'],
                                ['<br><i class="fa-solid fa-check"></i> ', '<br><i class="fa-solid fa-xmark"></i> '],
                                $plan['description']
                            ) !!}
                        </p>
                    </div>
                    <div class="mt-auto d-flex justify-content-center">
                        <form action="{{ route('plans.calculate') }}" method="POST" class="calculate-form">
                            @csrf
                            <input type="hidden" name="plan_id" value="{{ $plan['id'] }}">
                            <input type="hidden" name="screen_count" id="input_num_telas_{{ $plan['id'] }}" value="1">
                            <input type="hidden" name="period" id="input_period_{{ $plan['id'] }}" value="anual">
                            <button type="submit" class="btn btn-primary">Escolher Plano</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endsection

@push('scripts')
    @vite('resources/js/plans-page.js')
@endpush