@extends('layouts.app')

@section('title', ($plan ? 'Editar ' . $plan->nombre : 'Nuevo plan') . ' | Superadmin | Veltrix v2')

@push('styles')
<style>
.pf-shell  { background: #f8fafc; min-height: 100vh; padding: 28px 32px 60px; }
.pf-back   { font-size: .82rem; color: #64748b; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 20px; }
.pf-back:hover { color: #4f46e5; }
.pf-title  { font-size: 1.3rem; font-weight: 700; color: #0f172a; margin-bottom: 4px; }
.pf-sub    { font-size: .82rem; color: #64748b; margin-bottom: 28px; }

.pf-section {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 24px; margin-bottom: 20px;
}
.pf-section-title {
    font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: #64748b; margin-bottom: 18px;
    display: flex; align-items: center; gap: 8px;
}
.pf-section-title i { font-size: 1.1rem; color: #4f46e5; }

/* Module grid */
.mod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}
.mod-item {
    position: relative;
    border: 1.5px solid #dbe4f2; border-radius: 14px;
    padding: 14px 14px 16px;
    display: flex; align-items: flex-start; gap: 10px;
    cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
    user-select: none;
    background: #fff;
}
.mod-item:focus-visible {
    outline: 2px solid rgba(38, 191, 217, .45);
    outline-offset: 2px;
}
.mod-item:hover {
    transform: translateY(-1px);
}
.mod-item.is-active {
    border-color: rgba(38, 191, 217, .45);
    background: linear-gradient(180deg, #f8fdff 0%, #eefbff 100%);
    box-shadow: 0 12px 24px rgba(18, 56, 84, 0.08);
}
.mod-item.is-inactive {
    background: #fcfdff;
}
.mod-item input[type=checkbox] { display: none; }
.mod-icon {
    width: 34px; height: 34px; border-radius: 8px;
    background: #f1f5f9; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.mod-item.is-active .mod-icon { background: #dff8ff; }
.mod-item.is-inactive .mod-icon { background: #f2f5f9; }
.mod-icon i { font-size: 1.1rem; color: #64748b; }
.mod-item.is-active .mod-icon i { color: #1298b6; }
.mod-item.is-inactive .mod-icon i { color: #7d8aa3; }
.mod-label  { font-size: .8rem; font-weight: 600; color: #1e293b; line-height: 1.3; }
.mod-desc   { font-size: .7rem; color: #94a3b8; margin-top: 2px; line-height: 1.3; }

/* Category label */
.mod-cat-label {
    grid-column: 1 / -1;
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: #94a3b8; margin-top: 8px; margin-bottom: 4px;
}

/* Promotions */
.promo-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
    flex-wrap: wrap;
}
.promo-row input[type=number] { width: 90px; }
.promo-label { font-size: .8rem; color: #475569; font-weight: 500; flex-shrink: 0; }
.promo-del { background: none; border: none; color: #ef4444; font-size: 1.1rem; cursor: pointer; padding: 0 4px; }

/* Form actions */
.pf-actions {
    display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px;
}

.mod-state {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}
.mod-state-icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d7e0ec;
    background: #fff;
}
.mod-state-icon i {
    font-size: .95rem;
    line-height: 1;
}
.mod-item.is-active .mod-state-icon {
    border-color: rgba(38, 191, 217, .35);
    background: rgba(38, 191, 217, .12);
}
.mod-item.is-active .mod-state-icon i {
    color: #0f9bb9;
}
.mod-item.is-inactive .mod-state-icon i {
    color: #c15467;
}
.mod-state-badge {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 7px;
    border-radius: 999px;
}
.mod-item.is-active .mod-state-badge {
    color: #0a6a80;
    background: rgba(38, 191, 217, .12);
}
.mod-item.is-inactive .mod-state-badge {
    color: #8a5b67;
    background: #f8eaee;
}
</style>
@endpush

@section('content')
<div class="pf-shell">
    <a href="{{ route('superadmin.planes.index', [], false) }}" class="pf-back">
        <i class="bx bx-arrow-back"></i> Volver a planes
    </a>

    <div class="pf-title">{{ $plan ? 'Editar: ' . $plan->nombre : 'Nuevo plan' }}</div>
    <div class="pf-sub">{{ $plan ? 'Actualiza los datos, módulos y promociones del plan.' : 'Define los detalles, módulos incluidos y descuentos por período.' }}</div>

    @if ($errors->any())
        <div class="alert alert-danger mb-4">
            <ul class="mb-0 ps-3">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('status'))
        <div class="alert alert-success mb-4">
            {{ session('status') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger mb-4">
            {{ session('error') }}
        </div>
    @endif

    <form
        method="POST"
        action="{{ $plan ? route('superadmin.planes.update', $plan, false) : route('superadmin.planes.store', [], false) }}"
        id="planForm"
    >
        @csrf
        @if ($plan) @method('PUT') @endif
        <input type="hidden" name="modulos_payload" id="modulosPayload" value="">

        {{-- Datos generales --}}
        <div class="pf-section">
            <div class="pf-section-title"><i class="bx bx-layer"></i> Datos del plan</div>
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-semibold" style="font-size:.82rem">Nombre del plan</label>
                    <input type="text" name="nombre" class="form-control form-control-sm @error('nombre') is-invalid @enderror"
                           value="{{ old('nombre', $plan?->nombre) }}" placeholder="Ej: Plan Básico" required>
                    @error('nombre')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold" style="font-size:.82rem">Slug (URL único)</label>
                    <input type="text" name="slug" class="form-control form-control-sm @error('slug') is-invalid @enderror"
                           value="{{ old('slug', $plan?->slug) }}" placeholder="Ej: basico" required>
                    @error('slug')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-semibold" style="font-size:.82rem">Precio mensual (COP)</label>
                    <input type="number" name="precio_mensual" min="0" step="1000" class="form-control form-control-sm @error('precio_mensual') is-invalid @enderror"
                           value="{{ old('precio_mensual', $plan?->precio_mensual) }}" placeholder="0" required>
                    @error('precio_mensual')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-2 d-flex align-items-end">
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" role="switch" name="activo" value="1"
                               id="planActivo" {{ old('activo', $plan ? ($plan->activo ? '1' : '') : '1') ? 'checked' : '' }}>
                        <label class="form-check-label" for="planActivo" style="font-size:.82rem;font-weight:600">Activo</label>
                    </div>
                </div>

                <div class="col-md-4">
                    <label class="form-label fw-semibold" style="font-size:.82rem">Máx. usuarios</label>
                    <input type="number" name="max_usuarios" min="1" class="form-control form-control-sm"
                           value="{{ old('max_usuarios', $plan?->max_usuarios ?? 5) }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold" style="font-size:.82rem">Máx. sucursales</label>
                    <input type="number" name="max_sucursales" min="1" class="form-control form-control-sm"
                           value="{{ old('max_sucursales', $plan?->max_sucursales ?? 1) }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-semibold" style="font-size:.82rem">Máx. productos</label>
                    <input type="number" name="max_productos" min="1" class="form-control form-control-sm"
                           value="{{ old('max_productos', $plan?->max_productos ?? 500) }}" required>
                </div>
            </div>
        </div>

        {{-- Módulos --}}
        <div class="pf-section">
            <div class="pf-section-title"><i class="bx bx-grid-alt"></i> Módulos incluidos</div>
            @php
                $activosCheck = old('modulos', $plan?->modulosActivos()->all() ?? []);
                $categorias = collect($todosModulos)->groupBy('categoria', preserveKeys: true);
            @endphp
            <div class="mod-grid">
                @foreach ($categorias as $cat => $mods)
                    <div class="mod-cat-label">{{ ucfirst($cat) }}</div>
                    @foreach ($mods as $moduleKey => $meta)
                        @php
                            $moduleKey = (string) $moduleKey;
                            $moduleEnabled = in_array($moduleKey, $activosCheck, true);
                        @endphp
                        <div
                            class="mod-item {{ $moduleEnabled ? 'is-active' : 'is-inactive' }}"
                            data-module-card
                            data-module-key="{{ $moduleKey }}"
                            data-selected="{{ $moduleEnabled ? '1' : '0' }}"
                            tabindex="0"
                            role="checkbox"
                            aria-checked="{{ $moduleEnabled ? 'true' : 'false' }}"
                        >
                            <input type="checkbox" value="{{ $moduleKey }}"
                                   {{ $moduleEnabled ? 'checked' : '' }}>
                            <div class="mod-icon"><i class="bx {{ $meta['icono'] }}"></i></div>
                            <div class="flex-grow-1">
                                <div class="mod-label">{{ $meta['label'] }}</div>
                                <div class="mod-desc">{{ $meta['descripcion'] }}</div>
                            </div>
                            <div class="mod-state">
                                <span class="mod-state-icon">
                                    <i class="bx {{ $moduleEnabled ? 'bxs-check-circle' : 'bx-x' }}"></i>
                                </span>
                                <span class="mod-state-badge">{{ $moduleEnabled ? 'Activo' : 'No incluido' }}</span>
                            </div>
                        </div>
                    @endforeach
                @endforeach
            </div>
        </div>

        {{-- Promociones --}}
        <div class="pf-section">
            <div class="pf-section-title"><i class="bx bxs-tag-alt"></i> Descuentos por período</div>
            <div id="promoContainer">
                @php
                    $promos = old('promo_meses')
                        ? collect(array_map(null, old('promo_meses', []), old('promo_descuento', []), old('promo_activo', [])))
                        : ($plan?->promociones ?? collect());
                @endphp
                @foreach ($promos as $i => $promo)
                    @php
                        $pMeses    = is_array($promo) ? ($promo[0] ?? '') : ($promo->meses ?? '');
                        $pDescto   = is_array($promo) ? ($promo[1] ?? '') : ($promo->descuento_porcentaje ?? '');
                        $pActivo   = is_array($promo) ? isset($promo[2]) : ($promo->activo ?? true);
                    @endphp
                    <div class="promo-row">
                        <span class="promo-label">Pago de</span>
                        <input type="number" name="promo_meses[]" min="1" max="60" class="form-control form-control-sm"
                               value="{{ $pMeses }}" placeholder="3">
                        <span class="promo-label">mes(es) =</span>
                        <input type="number" name="promo_descuento[]" min="0" max="100" step="0.01" class="form-control form-control-sm"
                               value="{{ $pDescto }}" placeholder="10">
                        <span class="promo-label">% descuento</span>
                        <div class="form-check ms-2 mb-0">
                            <input class="form-check-input" type="checkbox" name="promo_activo[{{ $i }}]" value="1" {{ $pActivo ? 'checked' : '' }}>
                            <label class="form-check-label" style="font-size:.78rem">Activa</label>
                        </div>
                        <button type="button" class="promo-del" onclick="this.closest('.promo-row').remove()">
                            <i class="bx bx-x-circle"></i>
                        </button>
                    </div>
                @endforeach
            </div>
            <button type="button" class="btn btn-outline-secondary btn-sm mt-2" id="addPromo">
                <i class="bx bx-plus me-1"></i>Agregar período de descuento
            </button>
        </div>

        <div class="pf-actions">
            <a href="{{ route('superadmin.planes.index', [], false) }}" class="btn btn-outline-secondary">Cancelar</a>
            <button type="submit" class="btn btn-primary px-4">
                <i class="bx {{ $plan ? 'bx-check' : 'bx-plus' }} me-1"></i>
                {{ $plan ? 'Guardar cambios' : 'Crear plan' }}
            </button>
        </div>
    </form>
</div>

<script>
let promoIdx = {{ $promos instanceof \Illuminate\Support\Collection ? $promos->count() : count($promos) }};

document.getElementById('addPromo').addEventListener('click', function () {
    const container = document.getElementById('promoContainer');
    const row = document.createElement('div');
    row.className = 'promo-row';
    row.innerHTML = `
        <span class="promo-label">Pago de</span>
        <input type="number" name="promo_meses[]" min="1" max="60" class="form-control form-control-sm" placeholder="3">
        <span class="promo-label">mes(es) =</span>
        <input type="number" name="promo_descuento[]" min="0" max="100" step="0.01" class="form-control form-control-sm" placeholder="10">
        <span class="promo-label">% descuento</span>
        <div class="form-check ms-2 mb-0">
            <input class="form-check-input" type="checkbox" name="promo_activo[${promoIdx}]" value="1" checked>
            <label class="form-check-label" style="font-size:.78rem">Activa</label>
        </div>
        <button type="button" class="promo-del" onclick="this.closest('.promo-row').remove()">
            <i class="bx bx-x-circle"></i>
        </button>
    `;
    container.appendChild(row);
    promoIdx++;
});

document.querySelectorAll('[data-module-card]').forEach((card) => {
    const input = card.querySelector('input[type="checkbox"]');
    const icon = card.querySelector('.mod-state-icon i');
    const badge = card.querySelector('.mod-state-badge');

    if (!input || !icon || !badge) {
        return;
    }

    const setActiveState = (active) => {
        input.checked = active;
        card.dataset.selected = active ? '1' : '0';
        card.classList.toggle('is-active', active);
        card.classList.toggle('is-inactive', !active);
        card.setAttribute('aria-checked', active ? 'true' : 'false');
        icon.className = `bx ${active ? 'bxs-check-circle' : 'bx-x'}`;
        badge.textContent = active ? 'Activo' : 'No incluido';
    };

    const syncState = () => {
        const active = card.dataset.selected === '1' || input.checked;
        setActiveState(active);
    };

    syncState();

    card.addEventListener('click', (event) => {
        event.preventDefault();
        setActiveState(card.dataset.selected !== '1');
        syncModulesPayload();
    });

    card.addEventListener('keydown', (event) => {
        if (event.key !== ' ' && event.key !== 'Enter') {
            return;
        }

        event.preventDefault();
        setActiveState(card.dataset.selected !== '1');
        syncModulesPayload();
    });
});

const syncModulesPayload = () => {
    const payloadField = document.getElementById('modulosPayload');
    if (!payloadField) {
        return;
    }

    const values = Array.from(document.querySelectorAll('[data-module-card]'))
        .filter((card) => card.dataset.selected === '1')
        .map((card) => card.dataset.moduleKey || '')
        .filter((value) => value !== '');

    payloadField.value = JSON.stringify(values);
};

syncModulesPayload();

document.getElementById('planForm')?.addEventListener('submit', (event) => {
    const form = event.currentTarget;

    syncModulesPayload();

    form.querySelectorAll('input[data-generated-module-hidden="1"]').forEach((node) => node.remove());

    form.querySelectorAll('[data-module-card] input[type="checkbox"]').forEach((input) => {
        input.removeAttribute('name');
    });

    form.querySelectorAll('[data-module-card]').forEach((card) => {
        if (card.dataset.selected !== '1') {
            return;
        }

        const hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'modulos[]';
        hidden.value = card.dataset.moduleKey || '';
        hidden.setAttribute('data-generated-module-hidden', '1');
        form.appendChild(hidden);
    });
});

// Auto-generate slug from nombre (only for new plans)
@if (! $plan)
document.querySelector('input[name=nombre]').addEventListener('input', function () {
    const slugField = document.querySelector('input[name=slug]');
    if (slugField._touched) return;
    slugField.value = this.value
        .toLowerCase()
        .normalize('NFD').replace(/[̀-ͯ]/g, '')
        .replace(/[^a-z0-9]+/g, '-')
        .replace(/^-+|-+$/g, '');
});
document.querySelector('input[name=slug]').addEventListener('input', function () {
    this._touched = true;
});
@endif
</script>
@endsection