@php
    $respuestas = $respuestas ?? 0;
    $calificaciones = $calificaciones ?? 0;
    $chabots = $chabots ?? 0;
    $stp = $stp ?? 0;
@endphp
<table class="table align-middle table-striped gy-7">
    <!--begin::Table head-->
    <thead class="align-middle">
        <tr id="kt_pricing">
            <th colspan="3" class="text-center min-w-200px">
                <div class="min-w-200px bg-primary card-rounded py-12 mb-15">
                    <div class="text-white fs-3 fw-bold mb-7 nombrePlan" id="nombrePlan">{{ $nombre ?? 'N/A' }}</div>

                    <div class="fs-5x text-white d-flex justify-content-center align-items-start">
                        <span class="fs-2 mt-3">$</span>

                        <span class="lh-sm fw-semibold valorPlan" id="valorPlan">
                            {{ $valor ?? 0 }}
                        </span>
                    </div>
                </div>
            </th>
        </tr>
    </thead>
    <!--end::Table head-->

    <!--begin::Table body-->
    <tbody>
        <tr>
            <th class="card-rounded-start">
                <div class="fw-bold d-flex align-items-center ps-9 fs-3 textoMaximo" id="textoMaximo">Máximo {{ $totalMaximoEnvios ?? 0 }} envios al
                    mes
                </div>
            </th>

            <td>
                <div class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input checkMaximo" checked type="checkbox" value="1" name="maximo_envios"
                        id="checkMaximo" disabled/>
                </div>
            </td>
            <td>
                <input type="number" class="inputG campoValorDetalle" id="campoValorDetalle"
                    placeholder="Valor" name="valor_maximo_envio" value="{{$totalMaximoEnvios ?? 0}}"/>
            </td>

            <td>
                <div class="flex-root d-flex justify-content-center">
                    <span class="h-40px w-40px d-flex flex-center d-block">
                        <i class="fas fa-check fs-2x text-success"></i>
                    </span>
                </div>
            </td>
        </tr>
        <tr>
            <th class="card-rounded-start">
                <div class="fw-bold d-flex align-items-center ps-9 fs-3">Respuestas automáticas</div>
            </th>

            <td colspan="2">
                <div class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input checkRespuestas" {{$respuestas ? 'checked' : ''}} type="checkbox" value="1" name="respuesta_automatica"
                        id="checkRespuestas" />
                </div>
            </td>

            <td>
                <div class="flex-root d-flex justify-content-center">
                    <span class="h-40px w-40px d-flex flex-center d-block">
                        <i class="{{$respuestas ? 'fas fa-check text-success' :'las la-times text-danger'}} fs-2x iconoRespuesta" id="iconoRespuesta">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </span>
                </div>
            </td>
        </tr>
        <tr>
            <th class="card-rounded-start">
                <div class="fw-bold d-flex align-items-center ps-9 fs-3">Calificación de leads
                </div>
            </th>

            <td colspan="2">
                <div class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input checkCalificacion" {{$calificaciones ? 'checked' : ''}} type="checkbox" value="1" name="calificacion"
                        id="checkCalificacion" />
                </div>
            </td>

            <td>
                <div class="flex-root d-flex justify-content-center">
                    <span class="h-40px w-40px d-flex flex-center d-block">
                        <i class="{{$calificaciones ? 'fas fa-check text-success' :'las la-times text-danger'}} fs-2x iconoCalificacion" id="iconoCalificacion">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </span>
                </div>
            </td>
        </tr>
        <tr>
            <th class="card-rounded-start">
                <div class="fw-bold d-flex align-items-center ps-9 fs-3">Chatbots con IA
                </div>
            </th>

            <td colspan="2">
                <div class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input checkChatbots" {{$chabots ? 'checked' : ''}} type="checkbox" value="1" name="chatbots" id="checkChatbots"/>
                </div>
            </td>

            <td>
                <div class="flex-root d-flex justify-content-center">
                    <span class="h-40px w-40px d-flex flex-center d-block">
                        <i class="{{$chabots ? 'fas fa-check text-success' :'las la-times text-danger'}} fs-2x iconoChatbots" id="iconoChatbots">
                            <span class="path1"></span>
                            <span class="path2"></span>
                            </i>
                    </span>
                </div>
            </td>
        </tr>
        <tr>
            <th class="card-rounded-start">
                <div class="fw-bold d-flex align-items-center ps-9 fs-3">Integración con CRM (STP K2)
                </div>
            </th>

            <td colspan="2">
                <div class="form-check form-switch form-check-custom form-check-solid">
                    <input class="form-check-input checkSTP" {{$stp ? 'checked' : ''}} type="checkbox" value="1" name="stp" id="checkSTP"/>
                </div>
            </td>

            <td>
                <div class="flex-root d-flex justify-content-center">
                    <span class="h-40px w-40px d-flex flex-center d-block">
                        <i class="{{$stp ? 'fas fa-check text-success' :'las la-times text-danger'}} fs-2x iconoSTP" id="iconoSTP">
                            <span class="path1"></span>
                            <span class="path2"></span>
                        </i>
                    </span>
                </div>
            </td>
        </tr>
    </tbody>
    <!--end::Table body-->
</table>