@extends('layouts.app')

@section('content')
<div class="modern-page-container">

    {{-- Header --}}
    <div class="page-header">
        <div class="page-header-content">
            <div class="page-title-section">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-1">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.plans.index') }}" class="text-decoration-none">Planos</a>
                        </li>
                        <li class="breadcrumb-item active">Novo Plano</li>
                    </ol>
                </nav>
                <h1 class="page-title"><i class="bi bi-plus-circle me-2"></i>Novo Plano</h1>
                <p class="page-subtitle">Crie um novo plano de assinatura com seus limites e plataformas</p>
            </div>
            <a href="{{ route('admin.plans.index') }}" class="btn-modern btn-outline">
                <i class="bi bi-arrow-left"></i>
                <span>Voltar</span>
            </a>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
            <i class="bi bi-exclamation-triangle me-2"></i>Corrija os erros abaixo antes de salvar.
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4 align-items-start">

        <div class="col-lg-8">
            <form action="{{ route('admin.plans.store') }}" method="POST">
                @csrf

                {{-- Identificação --}}
                <div class="form-card mb-4">
                    <div class="form-section">
                        <div class="section-header">
                            <h3 class="section-title"><i class="bi bi-tag me-2 text-primary"></i>Identificação</h3>
                            <p class="section-description">Nome e slug únicos do plano</p>
                        </div>
                        <div class="row g-3">
                            <div class="col-sm-6">
                                <label class="field-label">Nome <span class="text-danger">*</span></label>
                                <input type="text" name="name"
                                       class="form-input @error('name') is-invalid @enderror"
                                       value="{{ old('name') }}" placeholder="Ex: Pro" required>
                                @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6">
                                <label class="field-label">Slug <span class="text-danger">*</span></label>
                                <input type="text" name="slug"
                                       class="form-input @error('slug') is-invalid @enderror"
                                       value="{{ old('slug') }}" placeholder="Ex: pro" required>
                                @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <small class="text-muted">Somente letras, números e hífens.</small>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Limites --}}
                <div class="form-card mb-4">
                    <div class="form-section">
                        <div class="section-header">
                            <h3 class="section-title"><i class="bi bi-sliders me-2 text-primary"></i>Limites do Plano</h3>
                            <p class="section-description">Defina os tetos de uso para usuários neste plano</p>
                        </div>
                        <div class="row g-3">
                            <div class="col-sm-6 col-md-4">
                                <label class="field-label">Máx. Fontes <span class="text-danger">*</span></label>
                                <input type="number" name="max_sources"
                                       class="form-input @error('max_sources') is-invalid @enderror"
                                       value="{{ old('max_sources', 5) }}" min="0" max="9999" required>
                                @error('max_sources')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <small class="text-muted">9999 = ilimitado</small>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="field-label">Máx. Destinos <span class="text-danger">*</span></label>
                                <input type="number" name="max_destinations"
                                       class="form-input @error('max_destinations') is-invalid @enderror"
                                       value="{{ old('max_destinations', 3) }}" min="0" max="9999" required>
                                @error('max_destinations')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <small class="text-muted">9999 = ilimitado</small>
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="field-label">Frequência mín. de leitura <span class="text-danger">*</span></label>
                                <select name="min_read_interval_minutes"
                                        class="form-select @error('min_read_interval_minutes') is-invalid @enderror" required>
                                    @foreach([3 => '3 minutos', 5 => '5 minutos', 10 => '10 minutos', 15 => '15 minutos'] as $val => $label)
                                        <option value="{{ $val }}" {{ old('min_read_interval_minutes', 15) == $val ? 'selected' : '' }}>
                                            {{ $label }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('min_read_interval_minutes')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="field-label">Máx. posts/hora <span class="text-danger">*</span></label>
                                <input type="number" name="max_posts_per_hour"
                                       class="form-input @error('max_posts_per_hour') is-invalid @enderror"
                                       value="{{ old('max_posts_per_hour', 12) }}" min="1" max="100" required>
                                @error('max_posts_per_hour')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="field-label">Intervalo entre posts (seg.) <span class="text-danger">*</span></label>
                                <input type="number" name="publish_interval_seconds"
                                       class="form-input @error('publish_interval_seconds') is-invalid @enderror"
                                       value="{{ old('publish_interval_seconds', 10) }}" min="0" max="300" required>
                                <small class="text-muted">Pausa entre publicações para evitar flood (0 = sem pausa)</small>
                                @error('publish_interval_seconds')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="field-label">Máx. tentativas por oferta <span class="text-danger">*</span></label>
                                <input type="number" name="max_attempts_per_offer"
                                       class="form-input @error('max_attempts_per_offer') is-invalid @enderror"
                                       value="{{ old('max_attempts_per_offer', 3) }}" min="1" max="10" required>
                                @error('max_attempts_per_offer')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <label class="field-label">Preço mensal (R$) <span class="text-danger">*</span></label>
                                <input type="number" name="price_monthly"
                                       class="form-input @error('price_monthly') is-invalid @enderror"
                                       value="{{ old('price_monthly', 0) }}" min="0" step="0.01" required>
                                @error('price_monthly')<div class="invalid-feedback">{{ $message }}</div>@enderror
                                <small class="text-muted">0 = plano gratuito</small>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Plataformas e extras --}}
                <div class="form-card mb-4">
                    <div class="form-section">
                        <div class="section-header">
                            <h3 class="section-title"><i class="bi bi-broadcast me-2 text-primary"></i>Plataformas e Marketplaces</h3>
                            <p class="section-description">Canais de publicação e marketplaces permitidos neste plano</p>
                        </div>

                        <div class="mb-4">
                            <label class="field-label mb-2">Plataformas de publicação permitidas</label>
                            @php $currentPlatforms = old('platforms_allowed', ['telegram']); @endphp
                            <div class="d-flex flex-wrap gap-3">
                                <div class="platform-check-card {{ in_array('telegram', $currentPlatforms) ? 'selected' : '' }}">
                                    <input class="form-check-input visually-hidden" type="checkbox"
                                           name="platforms_allowed[]" value="telegram" id="plat_telegram"
                                           {{ in_array('telegram', $currentPlatforms) ? 'checked' : '' }}
                                           onchange="this.closest('.platform-check-card').classList.toggle('selected', this.checked)">
                                    <label class="d-flex align-items-center gap-2 m-0" for="plat_telegram" style="cursor:pointer">
                                        <i class="bi bi-telegram fs-5 text-primary"></i>
                                        <span class="fw-semibold">Telegram</span>
                                    </label>
                                </div>
                                <div class="platform-check-card {{ in_array('whatsapp', $currentPlatforms) ? 'selected' : '' }}">
                                    <input class="form-check-input visually-hidden" type="checkbox"
                                           name="platforms_allowed[]" value="whatsapp" id="plat_whatsapp"
                                           {{ in_array('whatsapp', $currentPlatforms) ? 'checked' : '' }}
                                           onchange="this.closest('.platform-check-card').classList.toggle('selected', this.checked)">
                                    <label class="d-flex align-items-center gap-2 m-0" for="plat_whatsapp" style="cursor:pointer">
                                        <i class="bi bi-whatsapp fs-5 text-success"></i>
                                        <span class="fw-semibold">WhatsApp</span>
                                    </label>
                                </div>
                            </div>
                            @error('platforms_allowed')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div class="mb-4">
                            <label class="field-label mb-2">Marketplaces permitidos</label>
                            <small class="text-muted d-block mb-2">Links de quais marketplaces este plano pode capturar e publicar.</small>
                            @php
                                $allLinkTypes     = \App\Models\Plan::LINK_TYPES;
                                $currentLinkTypes = old('link_types_allowed', array_keys($allLinkTypes));
                                $linkIcons = [
                                    'mercadolivre' => ['icon' => 'bi-bag-fill',    'color' => 'text-warning'],
                                    'amazon'       => ['icon' => 'bi-box-seam',    'color' => 'text-info'],
                                    'shopee'       => ['icon' => 'bi-shop',        'color' => 'text-danger'],
                                    'outros'       => ['icon' => 'bi-link-45deg',  'color' => 'text-secondary'],
                                ];
                            @endphp
                            <div class="d-flex flex-wrap gap-3">
                                @foreach($allLinkTypes as $value => $label)
                                    @php $li = $linkIcons[$value] ?? ['icon' => 'bi-link-45deg', 'color' => 'text-secondary']; @endphp
                                    <div class="platform-check-card {{ in_array($value, $currentLinkTypes) ? 'selected' : '' }}">
                                        <input class="form-check-input visually-hidden" type="checkbox"
                                               name="link_types_allowed[]" value="{{ $value }}" id="link_{{ $value }}"
                                               {{ in_array($value, $currentLinkTypes) ? 'checked' : '' }}
                                               onchange="this.closest('.platform-check-card').classList.toggle('selected', this.checked)">
                                        <label class="d-flex align-items-center gap-2 m-0" for="link_{{ $value }}" style="cursor:pointer">
                                            <i class="bi {{ $li['icon'] }} fs-5 {{ $li['color'] }}"></i>
                                            <span class="fw-semibold">{{ $label }}</span>
                                        </label>
                                    </div>
                                @endforeach
                            </div>
                            @error('link_types_allowed')<div class="text-danger small mt-1">{{ $message }}</div>@enderror
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <label class="field-label">Descrição</label>
                                <textarea name="description"
                                          class="form-control @error('description') is-invalid @enderror"
                                          rows="2"
                                          placeholder="Descrição interna ou de marketing do plano">{{ old('description') }}</textarea>
                                @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" name="is_active"
                                           id="is_active" value="1"
                                           {{ old('is_active', '1') ? 'checked' : '' }}>
                                    <label class="form-check-label fw-semibold" for="is_active">
                                        Plano ativo (disponível para novos usuários)
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn-modern btn-primary">
                        <i class="bi bi-check-lg"></i>
                        <span>Criar Plano</span>
                    </button>
                    <a href="{{ route('admin.plans.index') }}" class="btn-modern btn-outline">Cancelar</a>
                </div>
            </form>
        </div>

        {{-- Dicas --}}
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom py-2 px-3">
                    <span class="fw-semibold small text-uppercase text-muted" style="letter-spacing:.05em">
                        <i class="bi bi-lightbulb me-1 text-warning"></i>Dicas
                    </span>
                </div>
                <div class="card-body p-3">
                    <ul class="list-unstyled small text-muted mb-0 d-flex flex-column gap-2">
                        <li><i class="bi bi-check2 text-success me-1"></i>Use <strong>9999</strong> para definir limites ilimitados de fontes ou destinos.</li>
                        <li><i class="bi bi-check2 text-success me-1"></i>O <strong>slug</strong> é o identificador interno — após criar com usuários, não poderá ser alterado.</li>
                        <li><i class="bi bi-check2 text-success me-1"></i>Planos <strong>inativos</strong> não aparecem para novos cadastros, mas continuam ativos para quem já assina.</li>
                        <li><i class="bi bi-check2 text-success me-1"></i>A <strong>frequência mínima</strong> define o menor intervalo de leitura que o usuário pode configurar.</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

@push('styles')
<style>
.platform-check-card {
    border: 2px solid var(--border-color);
    border-radius: 10px;
    padding: .6rem 1.1rem;
    transition: border-color .15s, background .15s;
    background: var(--background-secondary);
}
.platform-check-card.selected {
    border-color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 8%, white);
}
</style>
@endpush
@endsection