@extends('layouts.admin')

@section('title', 'Gestão de Planos')

@section('content')
<div class="container-fluid" style="max-width: 1400px; margin: 0 auto;">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h2 style="color: rgb(1, 15, 27); font-weight: 600; margin-bottom: 4px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                <i class="fas fa-cube me-2"></i>Gestão de Planos
            </h2>
            <p style="color: #64748b; margin-bottom: 0;">Gerencie os planos de assinatura disponíveis no sistema</p>
        </div>
        <button type="button" class="btn text-white px-4 py-2" style="background-color: rgb(243, 158, 11); border-radius: 8px; border: none;" data-bs-toggle="modal" data-bs-target="#createPlanModal">
            <i class="fas fa-plus me-2"></i>Novo Plano
        </button>
    </div>

    <!-- Plans organized by user type -->
    @php
        $individualPlans = $plans->where('user_type', 'Lawyer');
        $individualPlans = $plans->where('user_type', 'Lawyer');
        $empresaPlans = $plans->where('user_type', 'Firm');
    @endphp
    
    @if($individualPlans->count() > 0)
    <!-- Individual Plans Section -->
    <div class="mb-5">
        <div class="d-flex align-items-center mb-4">
            <h4 style="color: rgb(1, 15, 27); font-weight: 600; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                <i class="fas fa-user me-2"></i>Planos Individuais
            </h4>
        </div>
        
        <div class="row g-4">
            @foreach($individualPlans as $plan)
            <div class="col-md-6 col-lg-4">
                <div class="rounded-lg shadow-sm h-100 {{ !$plan->is_active ? 'opacity-75' : '' }}" 
                     style="background-color: white; border: 1px solid {{ $plan->is_active ? '#e2e8f0' : '#fbbf24' }};">
                    <div class="px-4 py-3" style="background-color: {{ $plan->is_active ? 'rgb(1, 15, 27)' : '#6b7280' }}; border-radius: 8px 8px 0 0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0 text-white" style="font-weight: 500;">
                                <i class="fas fa-cube me-2"></i>{{ $plan->name }}
                            </h6>
                            @if(!$plan->is_active)
                                <span class="badge bg-warning text-dark" style="font-size: 0.7rem;">
                                    <i class="fas fa-pause me-1"></i>Inativo
                                </span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="text-center mb-4">
                            <div class="display-6 fw-bold mb-1" style="color: rgb(1, 15, 27);">
                                R$ {{ number_format($plan->price, 2, ',', '.') }}
                            </div>
                            <div class="text-muted">
                                @if($plan->frequency_value == 1)
                                    por {{ $plan->frequency_interval == 'day' ? 'dia' : ($plan->frequency_interval == 'week' ? 'semana' : ($plan->frequency_interval == 'month' ? 'mês' : 'ano')) }}
                                @else
                                    a cada {{ $plan->frequency_value }} {{ $plan->frequency_interval == 'day' ? 'dias' : ($plan->frequency_interval == 'week' ? 'semanas' : ($plan->frequency_interval == 'month' ? 'meses' : 'anos')) }}
                                @endif
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="d-flex justify-content-between mb-2">
                                <span style="color: #6b7280;">Tipo:</span>
                                <span class="badge px-2 py-1" style="background-color: #10b981; color: white; font-size: 0.75rem;">Individual</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span style="color: #6b7280;">Máximo de Links:</span>
                                <span style="color: rgb(1, 15, 27); font-weight: 500;">{{ $plan->max_links == -1 ? 'Ilimitado' : $plan->max_links }}</span>
                            </div>
                        </div>
                        
                        <div class="text-center d-flex gap-2 justify-content-center flex-wrap">
                            <button type="button" class="btn text-white px-3" 
                                    style="background-color: rgb(1, 15, 27); border-radius: 6px;"
                                    data-bs-toggle="modal" data-bs-target="#editPlanModal{{ $plan->id }}">
                                <i class="fas fa-edit me-1"></i>Editar
                            </button>
                            
                            <form action="{{ route('admin.plans.toggle', $plan) }}" method="POST" class="d-inline">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn px-3" 
                                        style="background-color: {{ $plan->is_active ? '#dc2626' : '#059669' }}; color: white; border-radius: 6px;"
                                        onclick="return confirm('{{ $plan->is_active ? 'Desativar' : 'Ativar' }} o plano {{ $plan->name }}?')">
                                    <i class="fas fa-{{ $plan->is_active ? 'pause' : 'play' }} me-1"></i>{{ $plan->is_active ? 'Desativar' : 'Ativar' }}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
    
    @if($empresaPlans->count() > 0)
    <!-- Empresa Plans Section -->
    <div class="mb-5">
        <div class="d-flex align-items-center mb-4">
            <h4 style="color: rgb(1, 15, 27); font-weight: 600;">
                <i class="fas fa-building me-2"></i>Planos Empresariais
            </h4>
        </div>
        
        <div class="row g-4">
            @foreach($empresaPlans as $plan)
            <div class="col-md-6 col-lg-4">
                <div class="rounded-lg shadow-sm h-100 {{ !$plan->is_active ? 'opacity-75' : '' }}" 
                     style="background-color: white; border: 1px solid {{ $plan->is_active ? '#e2e8f0' : '#fbbf24' }};">
                    <div class="px-4 py-3" style="background-color: {{ $plan->is_active ? 'rgb(1, 15, 27)' : '#6b7280' }}; border-radius: 8px 8px 0 0;">
                        <div class="d-flex justify-content-between align-items-center">
                            <h6 class="mb-0 text-white" style="font-weight: 500;">
                                <i class="fas fa-cube me-2"></i>{{ $plan->name }}
                            </h6>
                            @if(!$plan->is_active)
                                <span class="badge bg-warning text-dark" style="font-size: 0.7rem;">
                                    <i class="fas fa-pause me-1"></i>Inativo
                                </span>
                            @endif
                        </div>
                    </div>
                    
                    <div class="p-4">
                        <div class="text-center mb-4">
                            <div class="display-6 fw-bold mb-1" style="color: rgb(1, 15, 27);">
                                R$ {{ number_format($plan->price, 2, ',', '.') }}
                            </div>
                            <div class="text-muted">
                                @if($plan->frequency_value == 1)
                                    por {{ $plan->frequency_interval == 'day' ? 'dia' : ($plan->frequency_interval == 'week' ? 'semana' : ($plan->frequency_interval == 'month' ? 'mês' : 'ano')) }}
                                @else
                                    a cada {{ $plan->frequency_value }} {{ $plan->frequency_interval == 'day' ? 'dias' : ($plan->frequency_interval == 'week' ? 'semanas' : ($plan->frequency_interval == 'month' ? 'meses' : 'anos')) }}
                                @endif
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <div class="d-flex justify-content-between mb-2">
                                <span style="color: #6b7280;">Tipo:</span>
                                <span class="badge px-2 py-1" style="background-color: #3b82f6; color: white; font-size: 0.75rem;">Empresa</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span style="color: #6b7280;">Máximo de Links:</span>
                                <span style="color: rgb(1, 15, 27); font-weight: 500;">{{ $plan->max_links == -1 ? 'Ilimitado' : $plan->max_links }}</span>
                            </div>
                        </div>
                        
                        <div class="text-center d-flex gap-2 justify-content-center flex-wrap">
                            <button type="button" class="btn text-white px-3" 
                                    style="background-color: rgb(1, 15, 27); border-radius: 6px;"
                                    data-bs-toggle="modal" data-bs-target="#editPlanModal{{ $plan->id }}">
                                <i class="fas fa-edit me-1"></i>Editar
                            </button>
                            
                            <form action="{{ route('admin.plans.toggle', $plan) }}" method="POST" class="d-inline">
                                @csrf
                                @method('PATCH')
                                <button type="submit" class="btn px-3" 
                                        style="background-color: {{ $plan->is_active ? '#dc2626' : '#059669' }}; color: white; border-radius: 6px;"
                                        onclick="return confirm('{{ $plan->is_active ? 'Desativar' : 'Ativar' }} o plano {{ $plan->name }}?')">
                                    <i class="fas fa-{{ $plan->is_active ? 'pause' : 'play' }} me-1"></i>{{ $plan->is_active ? 'Desativar' : 'Ativar' }}
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
    
    @if($plans->isEmpty())
    <div class="text-center py-5">
        <div class="mb-3">
            <div class="rounded-circle mx-auto d-flex align-items-center justify-content-center" 
                 style="width: 64px; height: 64px; background-color: #f8fafc; color: rgb(1, 15, 27);">
                <i class="fas fa-cube fa-2x"></i>
            </div>
        </div>
        <h5 style="color: rgb(1, 15, 27); font-weight: 500;">Nenhum plano encontrado</h5>
        <p style="color: #6b7280; margin-bottom: 0;">Não há planos cadastrados no sistema.</p>
    </div>
    @endif
</div>

<!-- Modais de Edição -->
@foreach($plans as $plan)
<div class="modal fade" id="editPlanModal{{ $plan->id }}" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 12px; border: none;">
            <form method="POST" action="{{ route('admin.plans.update', $plan->id) }}" id="editPlanForm{{ $plan->id }}">
                @csrf
                @method('PUT')
                
                <div class="modal-header" style="background-color: rgb(1, 15, 27); border-radius: 12px 12px 0 0;">
                    <h5 class="modal-title text-white fw-medium">
                        <i class="fas fa-edit me-2"></i>Editar Plano
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-12">
                            <label for="name{{ $plan->id }}" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Nome do Plano</label>
                            <input type="text" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   id="name{{ $plan->id }}" 
                                   name="name" 
                                   value="{{ old('name', $plan->name) }}" 
                                   required
                                   style="border-color: #d1d5db; padding: 12px;"
                                   placeholder="Ex: Plano Básico">
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-12">
                            <label for="userType{{ $plan->id }}" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Tipo de Usuário</label>
                            <select class="form-control @error('user_type') is-invalid @enderror" 
                                    id="userType{{ $plan->id }}" 
                                    name="user_type" 
                                    required
                                    style="border-color: #d1d5db; padding: 12px;">
                                <option value="Lawyer" {{ old('user_type', $plan->user_type) == 'Lawyer' ? 'selected' : '' }}>Individual (Advogado)</option>
                                <option value="Firm" {{ old('user_type', $plan->user_type) == 'Firm' ? 'selected' : '' }}>Empresa (Escritório)</option>
                            </select>
                            @error('user_type')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-6">
                            <label for="price{{ $plan->id }}" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Preço (R$)</label>
                            <input type="number" 
                                   class="form-control @error('price') is-invalid @enderror" 
                                   id="price{{ $plan->id }}" 
                                   name="price" 
                                   value="{{ old('price', $plan->price) }}" 
                                   step="0.01" 
                                   min="0" 
                                   required
                                   style="border-color: #d1d5db; padding: 12px;"
                                   placeholder="0,00">
                            @error('price')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-6">
                            <label for="max_links{{ $plan->id }}" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Máximo de Links</label>
                            <input type="number" 
                                   class="form-control @error('max_links') is-invalid @enderror" 
                                   id="max_links{{ $plan->id }}" 
                                   name="max_links" 
                                   value="{{ old('max_links', $plan->max_links) }}" 
                                   min="-1" 
                                   required
                                   style="border-color: #d1d5db; padding: 12px;"
                                   placeholder="-1 para ilimitado">
                            <small class="form-text text-muted">Use -1 para links ilimitados</small>
                            @error('max_links')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-6">
                            <label for="frequency_value{{ $plan->id }}" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Frequência</label>
                            <input type="number" 
                                   class="form-control @error('frequency_value') is-invalid @enderror" 
                                   id="frequency_value{{ $plan->id }}" 
                                   name="frequency_value" 
                                   value="{{ old('frequency_value', $plan->frequency_value) }}" 
                                   min="1" 
                                   required
                                   style="border-color: #d1d5db; padding: 12px;">
                            @error('frequency_value')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="col-6">
                            <label for="frequency_interval{{ $plan->id }}" class="form-label fw-medium" style="color: rgb(1, 15, 27);">Período</label>
                            <select class="form-select @error('frequency_interval') is-invalid @enderror" 
                                    id="frequency_interval{{ $plan->id }}" 
                                    name="frequency_interval" 
                                    required
                                    style="border-color: #d1d5db; padding: 12px;">
                                <option value="day" {{ old('frequency_interval', $plan->frequency_interval) === 'day' ? 'selected' : '' }}>Dia(s)</option>
                                <option value="week" {{ old('frequency_interval', $plan->frequency_interval) === 'week' ? 'selected' : '' }}>Semana(s)</option>
                                <option value="month" {{ old('frequency_interval', $plan->frequency_interval) === 'month' ? 'selected' : '' }}>Mês(es)</option>
                                <option value="year" {{ old('frequency_interval', $plan->frequency_interval) === 'year' ? 'selected' : '' }}>Ano(s)</option>
                            </select>
                            @error('frequency_interval')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <!-- Permissões/Features -->
                        <div class="col-12 mt-4">
                            <label class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Permissões</label>
                            <div class="border rounded p-3" style="border-color: #d1d5db; background-color: #f8fafc;">
                                <div class="row g-3">
                                    @php 
                                        $features = json_decode($plan->features, true) ?: [];
                                    @endphp
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="basic_info_{{ $plan->id }}" 
                                                   name="features[basic_info]" 
                                                   value="true"
                                                   {{ !empty($features['basic_info']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="basic_info_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Informações Básicas
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="custom_slug_{{ $plan->id }}" 
                                                   name="features[custom_slug]" 
                                                   value="true"
                                                   {{ !empty($features['custom_slug']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="custom_slug_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                URL Personalizada
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="profile_photo_{{ $plan->id }}" 
                                                   name="features[profile_photo]" 
                                                   value="true"
                                                   {{ !empty($features['profile_photo']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="profile_photo_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Foto de Perfil
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="background_colors_{{ $plan->id }}" 
                                                   name="features[background_colors]" 
                                                   value="true"
                                                   {{ !empty($features['background_colors']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="background_colors_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Cores de Fundo
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="background_images_{{ $plan->id }}" 
                                                   name="features[background_images]" 
                                                   value="true"
                                                   {{ !empty($features['background_images']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="background_images_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Imagens de Fundo
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="contact_info_{{ $plan->id }}" 
                                                   name="features[contact_info]" 
                                                   value="true"
                                                   {{ !empty($features['contact_info']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="contact_info_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Salvar na Agenda
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="analytics_basic_{{ $plan->id }}" 
                                                   name="features[analytics_basic]" 
                                                   value="true"
                                                   {{ !empty($features['analytics_basic']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="analytics_basic_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Analytics Básico
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="analytics_full_{{ $plan->id }}" 
                                                   name="features[analytics_full]" 
                                                   value="true"
                                                   {{ !empty($features['analytics_full']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="analytics_full_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Analytics Completo
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="leads_{{ $plan->id }}" 
                                                   name="features[leads]" 
                                                   value="true"
                                                   {{ !empty($features['leads']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="leads_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Captura de Leads
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" 
                                                   id="collaboration_management_{{ $plan->id }}" 
                                                   name="features[collaboration_management]" 
                                                   value="true"
                                                   {{ !empty($features['collaboration_management']) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="collaboration_management_{{ $plan->id }}" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Gerenciamento de Colaboradores
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer" style="border-top: 1px solid #e2e8f0;">
                    <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal" style="border-radius: 6px;">
                        Cancelar
                    </button>
                    <button type="submit" class="btn text-white px-4" style="background-color: rgb(243, 158, 11); border-radius: 6px; border: none;">
                        <i class="fas fa-save me-1"></i>Salvar Alterações
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endforeach

@if(session('success'))
<div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast show" role="alert">
        <div class="toast-header">
            <i class="fas fa-check-circle text-success me-2"></i>
            <strong class="me-auto">Sucesso</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            {{ session('success') }}
        </div>
    </div>
</div>
@endif

<!-- Modal para Criar Novo Plano -->
<div class="modal fade" id="createPlanModal" tabindex="-1" aria-labelledby="createPlanModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background-color: rgb(1, 15, 27);">
                <h5 class="modal-title text-white" id="createPlanModalLabel" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                    <i class="fas fa-plus me-2"></i>Criar Novo Plano
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('admin.plans.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="plan_name" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Nome do Plano</label>
                            <input type="text" class="form-control" id="plan_name" name="name" required style="border-color: #d1d5db;">
                        </div>
                        <div class="col-md-6">
                            <label for="plan_user_type" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Tipo de Usuário</label>
                            <select class="form-select" id="plan_user_type" name="user_type" required style="border-color: #d1d5db;">
                                <option value="">Selecione o tipo</option>
                                <option value="Lawyer">Individual</option>
                                <option value="Firm">Empresa</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="plan_price" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Preço (R$)</label>
                            <input type="number" step="0.01" class="form-control" id="plan_price" name="price" required style="border-color: #d1d5db;">
                        </div>
                        <div class="col-md-4">
                            <label for="plan_frequency_value" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Período (número)</label>
                            <input type="number" class="form-control" id="plan_frequency_value" name="frequency_value" required style="border-color: #d1d5db;" min="1" value="1">
                        </div>
                        <div class="col-md-4">
                            <label for="plan_frequency_interval" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Tipo de Período</label>
                            <select class="form-select" id="plan_frequency_interval" name="frequency_interval" required style="border-color: #d1d5db;">
                                <option value="">Selecione</option>
                                <option value="day">Dia(s)</option>
                                <option value="week">Semana(s)</option>
                                <option value="month" selected>Mês(es)</option>
                                <option value="year">Ano(s)</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label for="plan_max_links" class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Máx. Links</label>
                            <input type="number" class="form-control" id="plan_max_links" name="max_links" required style="border-color: #d1d5db;" min="-1" placeholder="-1 para ilimitado">
                            <small class="form-text text-muted">Use -1 para links ilimitados</small>
                        </div>
                        
                        <!-- Permissões/Features -->
                        <div class="col-12">
                            <label class="form-label fw-medium" style="color: rgb(1, 15, 27); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">Permissões</label>
                            <div class="border rounded p-3" style="border-color: #d1d5db; background-color: #f8fafc;">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="basic_info" name="features[basic_info]" value="true">
                                            <label class="form-check-label" for="basic_info" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Informações Básicas
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="custom_slug" name="features[custom_slug]" value="true">
                                            <label class="form-check-label" for="custom_slug" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                URL Personalizada
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="profile_photo" name="features[profile_photo]" value="true">
                                            <label class="form-check-label" for="profile_photo" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Foto de Perfil
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="background_colors" name="features[background_colors]" value="true">
                                            <label class="form-check-label" for="background_colors" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Cores de Fundo
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="background_images" name="features[background_images]" value="true">
                                            <label class="form-check-label" for="background_images" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Imagens de Fundo
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="contact_info" name="features[contact_info]" value="true">
                                            <label class="form-check-label" for="contact_info" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Salvar na Agenda
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="analytics_basic" name="features[analytics_basic]" value="true">
                                            <label class="form-check-label" for="analytics_basic" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Analytics Básico
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="analytics_full" name="features[analytics_full]" value="true">
                                            <label class="form-check-label" for="analytics_full" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Analytics Completo
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="leads" name="features[leads]" value="true">
                                            <label class="form-check-label" for="leads" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Captura de Leads
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" id="collaboration_management" name="features[collaboration_management]" value="true">
                                            <label class="form-check-label" for="collaboration_management" style="font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;">
                                                Gerenciamento de Colaboradores
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn text-white" style="background-color: rgb(243, 158, 11); border: none;">
                        <i class="fas fa-save me-2"></i>Criar Plano
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Os formulários já são enviados via POST normal com @method('PUT')
// Não é necessário JavaScript adicional para funcionalidade básica
</script>
@endpush