@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"><a href="{{ route('admin.saas.empresas.index') }}">Empresas</a></li>
                <li class="breadcrumb-item active">Nueva Empresa</li>
            </ol>
        </nav>
        <h3 class="font-weight-bold text-dark mb-0">
            <i class="bi bi-building-add text-primary mr-2"></i>
            Alta de Nueva Empresa / Clínica en el Sistema SaaS
        </h3>
    </div>
    <a href="{{ route('admin.saas.empresas.index') }}" class="btn btn-outline-secondary font-weight-bold">
        <i class="bi bi-arrow-left mr-1"></i> Volver al Listado
    </a>
</div>

<form action="{{ route('admin.saas.empresas.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <!-- Columna Izquierda: Datos de la Empresa y Usuario Admin -->
        <div class="col-lg-7">
            <div class="card card-outline card-primary shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="card-title font-weight-bold mb-0">
                        <i class="bi bi-hospital text-primary mr-1"></i> 1. Datos Comerciales y Fiscales de la Empresa
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 form-group">
                            <label class="font-weight-bold">Código Empresa</label>
                            <input type="text" name="codigo" class="form-control bg-light font-weight-bold" value="{{ old('codigo', $proximoCodigo) }}" readonly>
                        </div>
                        <div class="col-md-8 form-group">
                            <label class="font-weight-bold">Nombre Comercial (Clínica / Consultorio) *</label>
                            <input type="text" name="nombre" class="form-control" value="{{ old('nombre') }}" placeholder="Ej: Clínica Santa María" required>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Razón Social</label>
                            <input type="text" name="razon_social" class="form-control" value="{{ old('razon_social') }}" placeholder="Ej: Servicios Médicos Santa María S.A.">
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">RUC / Identificación Fiscal *</label>
                            <input type="text" name="ruc" class="form-control" value="{{ old('ruc') }}" placeholder="Ej: 1792345678001" required>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Representante / Propietario *</label>
                            <input type="text" name="representante" class="form-control" value="{{ old('representante') }}" placeholder="Ej: Dr. Fernando Salazar" required>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Teléfono de Contacto *</label>
                            <input type="text" name="telefono" class="form-control" value="{{ old('telefono') }}" placeholder="Ej: 0998765432" required>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Correo Electrónico Oficial *</label>
                            <input type="email" name="email" class="form-control" value="{{ old('email') }}" placeholder="gerencia@clinicasantamaria.com" required>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Logo de la Empresa (Opcional)</label>
                            <input type="file" name="logo" class="form-control-file" accept="image/*">
                        </div>
                        <div class="col-md-12 form-group">
                            <label class="font-weight-bold">Dirección Matriz *</label>
                            <input type="text" name="direccion" class="form-control" value="{{ old('direccion') }}" placeholder="Av. República del Salvador y Naciones Unidas" required>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Credenciales del Administrador de la Empresa -->
            <div class="card card-outline card-info shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="card-title font-weight-bold mb-0">
                        <i class="bi bi-person-lock text-info mr-1"></i> 2. Cuenta de Usuario Administrador para esta Empresa
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3">Se creará automáticamente el usuario administrador principal vinculado a esta empresa.</p>
                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Email de Acceso Administrador</label>
                            <input type="email" name="admin_email" class="form-control" value="{{ old('admin_email') }}" placeholder="Si se deja vacío usará el correo de la empresa">
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Contraseña Inicial</label>
                            <input type="text" name="admin_password" class="form-control" value="{{ old('admin_password', '12345678') }}">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Columna Derecha: Selección de Plan, Cupo de Pacientes, Licencia y Pago -->
        <div class="col-lg-5">
            <div class="card card-outline card-success shadow-sm mb-4">
                <div class="card-header">
                    <h5 class="card-title font-weight-bold mb-0">
                        <i class="bi bi-key-fill text-success mr-1"></i> 3. Plan, Cupo de Pacientes y Primera Licencia
                    </h5>
                </div>
                <div class="card-body">
                    <div class="form-group">
                        <label class="font-weight-bold">Plan SaaS Contratado *</label>
                        <select name="plan_id" id="selectPlanCreate" class="form-control font-weight-bold" required>
                            @foreach($planes as $plan)
                                <option value="{{ $plan->id }}"
                                        data-mensual="{{ $plan->precio_mensual }}"
                                        data-anual="{{ $plan->precio_anual }}"
                                        data-pacientes="{{ $plan->max_pacientes ?? 'Ilimitados' }}"
                                        data-modulos="{{ implode(', ', array_map(fn($m) => $catalogoModulos[$m]['nombre'] ?? $m, $plan->modulos ?? [])) }}"
                                        {{ $plan->destacado ? 'selected' : '' }}>
                                    {{ $plan->nombre }} — ${{ number_format($plan->precio_mensual, 2) }}/mes ({{ $plan->max_pacientes ? 'Hasta '.$plan->max_pacientes.' pac.' : 'Pacientes Ilimitados' }})
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="p-3 rounded bg-light border mb-3" id="resumenPlanSeleccionado">
                        <div class="small font-weight-bold text-primary mb-1"><i class="bi bi-info-circle-fill mr-1"></i> Detalles del Plan Seleccionado:</div>
                        <div class="small text-dark"><b>Cupo de Pacientes:</b> <span id="lblCupoPlan">-</span></div>
                        <div class="small text-dark mt-1"><b>Módulos incluidos:</b> <span id="lblModulosPlan">-</span></div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Ciclo de Licencia *</label>
                            <select name="tipo_ciclo" id="selectCicloCreate" class="form-control" required>
                                <option value="MENSUAL">Mensual (1 Mes)</option>
                                <option value="TRIMESTRAL">Trimestral (3 Meses)</option>
                                <option value="SEMESTRAL">Semestral (6 Meses)</option>
                                <option value="ANUAL">Anual (12 Meses)</option>
                                <option value="DEMO">Demo Gratuita (15 Días)</option>
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Cupo Pacientes Personalizado</label>
                            <input type="number" name="max_pacientes_custom" class="form-control" placeholder="Usar el del plan">
                            <small class="text-muted">Opcional si negoció otro cupo.</small>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Fecha Inicio Licencia</label>
                            <input type="date" name="fecha_inicio" class="form-control" value="{{ date('Y-m-d') }}">
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Descuento Especial ($)</label>
                            <input type="number" step="0.01" name="descuento" class="form-control" value="0.00">
                        </div>
                    </div>

                    <hr class="my-2">
                    <div class="custom-control custom-switch mb-3">
                        <input type="checkbox" class="custom-control-input" id="chkRegistrarPago" name="registrar_pago" value="1" checked>
                        <label class="custom-control-label font-weight-bold text-success" for="chkRegistrarPago">
                            Registrar Comprobante de Pago Inicial Automáticamente
                        </label>
                    </div>

                    <div class="row" id="boxPagoInicial">
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Método de Pago</label>
                            <select name="metodo_pago" class="form-control">
                                <option value="TRANSFERENCIA">Transferencia Bancaria</option>
                                <option value="TARJETA">Tarjeta de Crédito/Débito</option>
                                <option value="EFECTIVO">Efectivo</option>
                                <option value="DEPOSITO">Depósito</option>
                            </select>
                        </div>
                        <div class="col-md-6 form-group">
                            <label class="font-weight-bold">Nro. Referencia / Voucher</label>
                            <input type="text" name="referencia_pago" class="form-control" placeholder="Ej: TRX-00192">
                        </div>
                    </div>

                    <button type="submit" class="btn btn-success btn-block btn-lg font-weight-bold shadow-sm mt-2">
                        <i class="bi bi-check2-circle mr-1"></i> Crear Empresa, Emitir Licencia y Activar
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var selectPlan = document.getElementById('selectPlanCreate');
    function actualizarInfoPlan() {
        var opt = selectPlan.options[selectPlan.selectedIndex];
        if (!opt) return;
        document.getElementById('lblCupoPlan').textContent = opt.getAttribute('data-pacientes');
        document.getElementById('lblModulosPlan').textContent = opt.getAttribute('data-modulos');
    }
    selectPlan.addEventListener('change', actualizarInfoPlan);
    actualizarInfoPlan();
});
</script>
@endsection