@extends('layouts.admin')

@section('content')
<div class="d-flex flex-wrap justify-content-between align-items-center mb-3">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb bg-transparent p-0 mb-1">
                <li class="breadcrumb-item"><a href="{{ route('admin.saas.dashboard') }}">SaaS SuperAdmin</a></li>
                <li class="breadcrumb-item active">Planes y Módulos</li>
            </ol>
        </nav>
        <h3 class="font-weight-bold text-dark mb-0">
            <i class="bi bi-layers-fill text-primary mr-2"></i>
            Planes SaaS según Número de Pacientes y Valor por Módulos
        </h3>
        <p class="text-muted small mb-0">Configure el cupo máximo de pacientes y los módulos clínicos desbloqueados en cada nivel de precio.</p>
    </div>
    <div class="mt-2 mt-md-0">
        <button type="button" class="btn btn-primary font-weight-bold shadow-sm" data-toggle="modal" data-target="#modalCrearPlan">
            <i class="bi bi-plus-circle mr-1"></i> Nuevo Plan SaaS
        </button>
    </div>
</div>

<!-- Tarjetas Visuales de Planes -->
<div class="row mb-4">
    @foreach($planes as $plan)
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card h-100 shadow-sm border-0 position-relative" style="border-radius: 16px; border-top: 5px solid {{ $plan->color }} !important;">
                @if($plan->destacado)
                    <span class="badge badge-warning text-dark font-weight-bold position-absolute" style="top: 12px; right: 14px; border-radius: 8px;">
                        <i class="bi bi-star-fill mr-1"></i> MÁS VENDIDO
                    </span>
                @endif

                <div class="card-body d-flex flex-column p-4">
                    <h5 class="font-weight-bold mb-1" style="color: {{ $plan->color }};">{{ $plan->nombre }}</h5>
                    <p class="text-muted small mb-3" style="min-height: 38px;">{{ $plan->descripcion }}</p>

                    <div class="p-3 rounded mb-3 text-center" style="background: rgba(15, 23, 42, 0.03); border: 1px solid #e2e8f0;">
                        <div class="h2 font-weight-bold text-dark mb-0">
                            ${{ number_format($plan->precio_mensual, 2) }}
                            <small class="text-muted" style="font-size: 0.9rem;">/mes</small>
                        </div>
                        <div class="small text-success font-weight-bold mt-1">
                            Plan Anual: ${{ number_format($plan->precio_anual, 2) }}/año
                        </div>
                    </div>

                    <!-- Cupo de Pacientes y Límites -->
                    <div class="mb-3">
                        <div class="d-flex align-items-center justify-content-between py-1 border-bottom">
                            <span class="small font-weight-bold text-dark"><i class="bi bi-people-fill text-primary mr-1"></i> Límite Pacientes:</span>
                            @if(is_null($plan->max_pacientes) || $plan->max_pacientes <= 0)
                                <span class="badge badge-success">Ilimitados</span>
                            @else
                                <span class="badge badge-primary">Hasta {{ number_format($plan->max_pacientes) }}</span>
                            @endif
                        </div>
                        <div class="d-flex align-items-center justify-content-between py-1 border-bottom">
                            <span class="small text-muted"><i class="bi bi-person-vcard mr-1"></i> Límite Doctores:</span>
                            <span class="small font-weight-bold">{{ $plan->max_doctores ? $plan->max_doctores : 'Ilimitados' }}</span>
                        </div>
                        <div class="d-flex align-items-center justify-content-between py-1 border-bottom">
                            <span class="small text-muted"><i class="bi bi-person-check mr-1"></i> Límite Usuarios:</span>
                            <span class="small font-weight-bold">{{ $plan->max_usuarios ? $plan->max_usuarios : 'Ilimitados' }}</span>
                        </div>
                    </div>

                    <!-- Módulos de acuerdo al valor del plan -->
                    <h6 class="text-uppercase font-weight-bold text-muted" style="font-size: 0.72rem; letter-spacing: 0.5px;">
                        Módulos Incluidos ({{ count($plan->modulos ?? []) }}/{{ count($catalogoModulos) }}):
                    </h6>
                    <ul class="list-unstyled small mb-4 flex-grow-1">
                        @foreach($catalogoModulos as $clave => $mod)
                            @php $incluido = in_array($clave, $plan->modulos ?? []); @endphp
                            <li class="py-1 d-flex align-items-center {{ $incluido ? 'text-dark font-weight-600' : 'text-muted' }}" style="{{ !$incluido ? 'opacity: 0.55; text-decoration: line-through;' : '' }}">
                                @if($incluido)
                                    <i class="bi bi-check-circle-fill text-success mr-2"></i>
                                @else
                                    <i class="bi bi-x-circle text-secondary mr-2"></i>
                                @endif
                                <span>{{ $mod['nombre'] }}</span>
                            </li>
                        @endforeach
                    </ul>

                    <div class="d-flex justify-content-between align-items-center pt-2 border-top mt-auto">
                        <span class="small text-muted">
                            <i class="bi bi-building mr-1"></i> {{ $plan->empresas_count ?? 0 }} clínicas en este plan
                        </span>
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-outline-primary font-weight-bold" data-toggle="modal" data-target="#modalEditarPlan{{ $plan->id }}">
                                <i class="bi bi-pencil-square mr-1"></i> Editar
                            </button>
                            @if($plan->empresas_count == 0)
                                <form action="{{ route('admin.saas.planes.destroy', $plan->id) }}" method="POST" onsubmit="return confirm('¿Eliminar este plan?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
                                </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Editar Plan -->
        <div class="modal fade" id="modalEditarPlan{{ $plan->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form action="{{ route('admin.saas.planes.update', $plan->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="modal-content" style="border-radius: 14px;">
                        <div class="modal-header bg-light">
                            <h5 class="modal-title font-weight-bold">
                                <i class="bi bi-pencil-square text-primary mr-1"></i> Editar {{ $plan->nombre }}
                            </h5>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-md-6 form-group">
                                    <label class="font-weight-bold">Nombre del Plan *</label>
                                    <input type="text" name="nombre" class="form-control" value="{{ $plan->nombre }}" required>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label class="font-weight-bold">Precio Mensual ($) *</label>
                                    <input type="number" step="0.01" name="precio_mensual" class="form-control" value="{{ $plan->precio_mensual }}" required>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label class="font-weight-bold">Precio Anual ($)</label>
                                    <input type="number" step="0.01" name="precio_anual" class="form-control" value="{{ $plan->precio_anual }}">
                                </div>
                                <div class="col-md-12 form-group">
                                    <label class="font-weight-bold">Descripción Comercial</label>
                                    <input type="text" name="descripcion" class="form-control" value="{{ $plan->descripcion }}">
                                </div>
                                <div class="col-md-3 form-group">
                                    <label class="font-weight-bold text-primary">
                                        <i class="bi bi-people-fill"></i> Máx. Pacientes
                                    </label>
                                    <input type="number" min="0" name="max_pacientes" class="form-control" value="{{ $plan->max_pacientes }}" placeholder="Vacío = Ilimitado">
                                    <small class="text-muted">Vacío o 0 = Ilimitados</small>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label class="font-weight-bold text-info">
                                        <i class="bi bi-person-vcard"></i> Máx. Doctores
                                    </label>
                                    <input type="number" min="0" name="max_doctores" class="form-control" value="{{ $plan->max_doctores }}" placeholder="Vacío = Ilimitado">
                                    <small class="text-muted">Vacío o 0 = Ilimitados</small>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label class="font-weight-bold text-dark">
                                        <i class="bi bi-person-check-fill text-success"></i> Límite Usuarios
                                    </label>
                                    <input type="number" min="0" name="max_usuarios" class="form-control" value="{{ $plan->max_usuarios }}" placeholder="Vacío = Ilimitado">
                                    <small class="text-muted">Vacío o 0 = Ilimitados</small>
                                </div>
                                <div class="col-md-3 form-group">
                                    <label class="font-weight-bold">Color Identificador</label>
                                    <input type="color" name="color" class="form-control" value="{{ $plan->color }}">
                                </div>
                                <div class="col-md-7 form-group">
                                    <label class="font-weight-bold text-primary">
                                        <i class="bi bi-globe2 mr-1"></i> URL de Compra (Página Web del Administrador SaaS)
                                    </label>
                                    <input type="url" name="url_compra" class="form-control" value="{{ $plan->url_compra ?: 'https://www.sysventascev.com' }}" placeholder="https://www.sysventascev.com">
                                </div>
                                <div class="col-md-5 form-group">
                                    <label class="font-weight-bold text-success">
                                        <i class="bi bi-whatsapp mr-1"></i> WhatsApp de Ventas SaaS
                                    </label>
                                    <input type="text" name="whatsapp" class="form-control" value="{{ $plan->whatsapp ?: '593985422150' }}" placeholder="Ej: 593985422150">
                                </div>
                            </div>

                            <hr class="my-2">
                            <label class="font-weight-bold d-block mb-2">
                                <i class="bi bi-grid-1x2-fill text-primary mr-1"></i> Módulos Incluidos de acuerdo al Valor del Plan:
                            </label>
                            <div class="row">
                                @foreach($catalogoModulos as $clave => $mod)
                                    <div class="col-md-6 mb-2">
                                        <div class="p-2 border rounded d-flex align-items-start" style="background: #f8fafc;">
                                            <input type="checkbox" name="modulos[]" value="{{ $clave }}"
                                                   id="edit_mod_{{ $plan->id }}_{{ $clave }}"
                                                   class="mt-1 mr-2"
                                                   {{ in_array($clave, $plan->modulos ?? []) ? 'checked' : '' }}>
                                            <label for="edit_mod_{{ $plan->id }}_{{ $clave }}" class="mb-0" style="cursor: pointer;">
                                                <div class="font-weight-bold text-dark small">
                                                    <i class="bi {{ $mod['icono'] }} text-primary mr-1"></i> {{ $mod['nombre'] }}
                                                </div>
                                                <div class="text-muted" style="font-size: 0.75rem;">{{ $mod['descripcion'] }}</div>
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="row mt-2">
                                <div class="col-md-6">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="destacado" value="1" class="custom-control-input" id="destacado_{{ $plan->id }}" {{ $plan->destacado ? 'checked' : '' }}>
                                        <label class="custom-control-label font-weight-bold" for="destacado_{{ $plan->id }}">Destacar como Plan Recomendado</label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" name="sincronizar_licencias" value="1" class="custom-control-input" id="sync_{{ $plan->id }}" checked>
                                        <label class="custom-control-label font-weight-bold text-primary" for="sync_{{ $plan->id }}">Sincronizar módulos y cupo con licencias activas</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                            <button type="submit" class="btn btn-primary font-weight-bold">
                                <i class="bi bi-save mr-1"></i> Guardar Cambios del Plan
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
</div>

<!-- Modal Crear Nuevo Plan -->
<div class="modal fade" id="modalCrearPlan" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form action="{{ route('admin.saas.planes.store') }}" method="POST">
            @csrf
            <div class="modal-content" style="border-radius: 14px;">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title font-weight-bold">
                        <i class="bi bi-plus-circle mr-1"></i> Crear Nuevo Plan SaaS
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Nombre del Plan *</label>
                            <input type="text" name="nombre" class="form-control" placeholder="Ej: Plan Especialidades Médicas" required>
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold">Precio Mensual ($) *</label>
                            <input type="number" step="0.01" name="precio_mensual" class="form-control" placeholder="49.90" required>
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold">Precio Anual ($)</label>
                            <input type="number" step="0.01" name="precio_anual" class="form-control" placeholder="499.00">
                        </div>
                        <div class="col-md-12 form-group">
                            <label class="font-weight-bold">Descripción del Plan</label>
                            <input type="text" name="descripcion" class="form-control" placeholder="Breve descripción de a quién va dirigido este plan">
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold text-primary">
                                <i class="bi bi-people-fill"></i> Máx. Pacientes
                            </label>
                            <input type="number" min="0" name="max_pacientes" class="form-control" placeholder="Vacío = Ilimitado">
                            <small class="text-muted">Vacío o 0 = Ilimitados.</small>
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold text-info">
                                <i class="bi bi-person-vcard"></i> Máx. Doctores
                            </label>
                            <input type="number" min="0" name="max_doctores" class="form-control" placeholder="Vacío = Ilimitado">
                            <small class="text-muted">Vacío o 0 = Ilimitados.</small>
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold text-dark">
                                <i class="bi bi-person-check-fill text-success"></i> Límite Usuarios
                            </label>
                            <input type="number" min="0" name="max_usuarios" class="form-control" placeholder="Vacío = Ilimitado">
                            <small class="text-muted">Vacío o 0 = Ilimitados.</small>
                        </div>
                        <div class="col-md-3 form-group">
                            <label class="font-weight-bold">Color Distintivo</label>
                            <input type="color" name="color" class="form-control" value="#2563eb">
                        </div>
                        <div class="col-md-7 form-group">
                            <label class="font-weight-bold text-primary">
                                <i class="bi bi-globe2 mr-1"></i> URL de Compra (Página Web del Administrador SaaS)
                            </label>
                            <input type="url" name="url_compra" class="form-control" value="https://www.sysventascev.com" placeholder="https://www.sysventascev.com">
                        </div>
                        <div class="col-md-5 form-group">
                            <label class="font-weight-bold text-success">
                                <i class="bi bi-whatsapp mr-1"></i> WhatsApp de Ventas SaaS
                            </label>
                            <input type="text" name="whatsapp" class="form-control" value="593985422150" placeholder="Ej: 593985422150">
                        </div>
                    </div>

                    <hr class="my-2">
                    <label class="font-weight-bold d-block mb-2">
                        <i class="bi bi-check2-square text-primary mr-1"></i> Seleccione los Módulos Incluidos en el Valor de este Plan:
                    </label>
                    <div class="row">
                        @foreach($catalogoModulos as $clave => $mod)
                            <div class="col-md-6 mb-2">
                                <div class="p-2 border rounded d-flex align-items-start" style="background: #f8fafc;">
                                    <input type="checkbox" name="modulos[]" value="{{ $clave }}"
                                           id="new_mod_{{ $clave }}"
                                           class="mt-1 mr-2"
                                           {{ $mod['esencial'] ? 'checked' : '' }}>
                                    <label for="new_mod_{{ $clave }}" class="mb-0" style="cursor: pointer;">
                                        <div class="font-weight-bold text-dark small">
                                            <i class="bi {{ $mod['icono'] }} text-primary mr-1"></i> {{ $mod['nombre'] }}
                                        </div>
                                        <div class="text-muted" style="font-size: 0.75rem;">{{ $mod['descripcion'] }}</div>
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary font-weight-bold">
                        <i class="bi bi-check-circle mr-1"></i> Crear Plan SaaS
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection